vue3-初步接觸/指令和條件渲染

2023-04-19 23:53 作者:蕪湖小量化 0人讀過(guò) | 我要投稿

vue環(huán)境的配置

在終端進(jìn)入項(xiàng)目目錄并進(jìn)行如下操作

請(qǐng)確保已經(jīng)安裝node.js

npm init vue@latest

初步學(xué)習(xí)不需要開(kāi)啟額外的功能選擇no 否則會(huì)進(jìn)入ts的啟動(dòng)

cd <your-project-name>

npm install?

npm run dev

框架構(gòu)建完成

初步認(rèn)識(shí)vue文件結(jié)構(gòu)

部分設(shè)置沒(méi)有啟用? 圖片展示的是最基本的vue框架

assets：是用于存放著各種靜態(tài)文件，比如圖片，css等。

components：用于存放自定義的公共組件，即非路由組件，區(qū)別views包下的page組件。router：vue-router路由文件。index.js中引入views包下的.vue。store：是vuex的文件，主要用于項(xiàng)目里邊的一些狀態(tài)保存。比如state、mutations、actions、getters、modules。

views：用于存放我們寫(xiě)好的各種頁(yè)面，即路由組件，比如Login.vue，Home.vue。

App.vue：是主vue模塊，主要是使用router-link引入其他模塊，App.vue是項(xiàng)目的主組件，所有的頁(yè)面都是在App.vue下切換的。
main.js：程序入口文件，主要作用是初始化vue實(shí)例，同時(shí)可以在此文件中引用某些組件庫(kù)或者全局掛載一些變量。

使用npm run dev 可以打開(kāi)html的服務(wù)

指令和條件渲染

展示相關(guān)文件

vue主模塊

子組件1

<template id="app">
?
?<div class="top" v-if="number>50">
? ?<p v-if="number>200">渲染:大于200</p>
? ?<p v-else-if="50<number<200">渲染:50-200</p>
? ?<p v-else>渲染:小于50</p>
?</div>
?<div v-else>不渲染</div>
?
?<template v-if="show">
? ?<p>靜夜思</p>
? ?<p>李白</p>
? ?<p>床前明月光</p>
?</template>
?
?
?<div v-show="number>200">
? ?v-show渲染
?</div>

</template>

<script>
export default {
?name: "Conditional-Render",
?data(){
? ?return{
? ? ?number:100,
? ? ?show:true,
? ?}
?}
}

</script>

<style scoped>
@import "@/assets/Conditional-Render.css";
</style>

子組件2

<template id="app">
?<h1>開(kāi)始Vue的旅程</h1>
?
?
?<p>模板數(shù)字: {{number}}</p>
?
?
?<p>模板結(jié)果: {{result}}</p>
?
?
?
?<p>html插值文字: <span v-html="insert_html_code"></span></p>
?
?<p v-if="true">這是一段會(huì)被渲染的文字</p>
?<p v-if="false">這是一段不會(huì)被渲染的文字</p>
?
?<input v-model.trim="content" placeholder="請(qǐng)輸入備注！">
?<br>
?<button class="btn-1" v-on:click="clickButton">換算</button>
?<p class="text-1">對(duì)于v-bind可以省略直接使用:來(lái)綁定對(duì)于v-on可以把v-on:縮寫(xiě)成@</p>
?<p>本節(jié)小結(jié):初步接觸一些模板指令 v-on/v-if/v-html/v-bind/v-once</p>
</template>

<script>
export default {
?name: "modelInsert",
?data(){
? ?return{
? ? ?number:0,
? ? ?result:0,
? ? ?insert_html_code:"<span style=\"font-family: 楷體, sans-serif; color: #a261e8\">理論化學(xué)</span>",
? ? ?id_1:'top_hello'
? ?}
?},
?methods:{
? ?clickButton() {
? ? ?this.number = this.number + 1
? ? ?this.result = this.number ** 2
? ?}
?}
}
</script>

<style scoped>
?@import "@/assets/model-insert.css";
</style>

子組件3

<template>
?<button class="btn" @click="count++">第 {{count}} 次點(diǎn)擊</button>
</template>

<script>
export default {
?name: "start",
?data(){
? ?return{
? ? ?count:0,
? ?}
?}
}
</script>

<style scoped>
?@import "@/assets/start.css";
</style>

css1

*{
? ?margin: 0;
}
.top{
? ?margin-top: 20px;
}
p{
? ?color: #41c557;
}

css2

*{
? ?margin: 0;
}
h1{
? ?color: #2a9fde;
? ?font-family: 楷體, sans-serif;
? ?letter-spacing: 2px;
? ?font-size: 20px;
}
p{
? ?height: 20px;
? ?color: #5bc8ea;
? ?font-family: 楷體, sans-serif;
}
.btn-1{
? ?margin-top: 5px;
? ?margin-left: 50px;
? ?background-color: #e2d1f3;
? ?color: #128625;
? ?border: 2px solid #5bc8ea;
}
.text-1{
? ?text-indent: 2em;
? ?margin-top: 10px;
}
input{
? ?margin-top: 10px;
? ?width: 200px;
? ?text-align: center;
}