1.template的三種用法
- 使用Vue完整版脑沿，寫在HTML里面
<div id='xxx'>
{{n}}
<button @click="add"></button>
</div>
new Vue({
el:'#xxx'
data:{n:0}, // 這里data可以寫成函數(shù)
methods:{
add(){
....
}
}
})
2.使用Vue完整版扛吞，寫在選項里面
<div id='app'>
</div>
new Vue({
template:`
<div>
{{n}}
<button @click='add'>+1</button>
</div>`,
data:{n:0},
methods:{
add(){
...
}
}
}).$mount('#app') // 等于 el:'#app'
這樣寫有一個細(xì)節(jié)
- HTML里面的 div#app 元素會被 template 外層的 div 替換
- 使用Vue的不完整版移盆，配合 xxx.vue 文件
<template> <!-- 這里不是HTML 而是 XML -->
<div>
{{n}}
<button @click='add'>
+1
</button>
</div>
</template>
<!--
XML中 必須有閉合標(biāo)簽 / 比如 <input />
<div /> 空div可以這樣寫
-->
<script>
export default {
data(){ return {n:0} }, // 這里data必須是函數(shù)
methods:{add(){ this.n += 1 }}
}
</script>
<style>
這里寫css
</style>
在另一個地方寫下如下代碼
import Xxx from './xxx.vue'
// Xxx 是一個 options 對象
new Vue({
render: h => h(Xxx)
}).$mount('')
2.模板的常用指令
- 表達(dá)式
{{ object.a }} 表達(dá)式
{{ n + 1 }} 可以寫任何運算
{{ fn(n) }} 可以調(diào)用函數(shù)于樟，默認(rèn)會在 methods 里面找
如果值為 undefined 或 null 就不顯示
另一中寫法為
<div v-text="表達(dá)式"></div>
- HTML內(nèi)容
-
假設(shè) data.x 值為
<strong> hi </strong>
那么
<div v-hmtl='x'></ div>即可顯示粗體的 hi
- 展示 {{ n }}
<div v-pre>{{n}}</div>v-pre 不會對模板進(jìn)行編譯
- 綁定屬性
<img v-bind:src='x'> <!-- 這里 x 是變量 -->
上面可以簡寫為
<img :src='x'>
- 綁定對象
<div :style='{border:'1px solid red',height:100}'>
</div>
<!-- 這里 100 可以被解釋成 100px -->
- 綁定事件
- v-on:事件名
<button v-on:click='add'> +1 </button>
<!-- 點擊之后屡贺，Vue 會運行 add() -->
<button v-on:click='xxx(1)'> xxx函數(shù) </button>
<!-- 點擊之后Vue會運行 xxx(1) -->
<button v-on:click=' n+=1 '> xxx </button>
<!--
點擊之后贝攒，Vue會運行 n+=1
總之：發(fā)現(xiàn)函數(shù)就會自動加括號在點擊時運行,否則就是運行代碼
-->
縮寫寫法：
<button @click='add'> +1 </button>
- 條件判斷
- if...else
<div v-if="x >0"> <!-- 符合條件就顯示div -->
x大于0
</div>
<div v-else-if="x ===0">
x為0
</div>
<div v-else>
x小于0
</div>
- 循環(huán)
- for (value，key) in 對象 或 數(shù)組
<ul>
<li v-for=" (u,index) in users" :key="index">
索引:{{index}}值:{{u.name}}
</li>
</ul>
<ul>
<li v-for=" (value, name) in obj" :key="name" >
屬性名:{{name}}圣猎，屬性值:{{name}}
</li>
</ul>
- 顯示與隱藏
- v-show
<div v-show="n%2===O"> n是偶數(shù)</div>
3.指令通用用法
1.什么是指令
<div v-text='x'></div>
<div v-html='x'></div>
以 v- 開頭的東西就是指令
2.語法
- v-指令名：參數(shù)=值士葫，如 v-on:click=add
- 如果參數(shù)值沒有特殊字符，則可以不加引號
- 有些指令沒有參數(shù)和值送悔，如 v-pre
- 有些指令沒有值慢显，如 v-on:click.prevent (阻止默認(rèn)事件)
3.事件修飾符
有些指令支持修飾符
- @click.stop = 'add' 表示阻止事件傳播，冒泡
- @click.prevent = 'add' 表示阻止默認(rèn)動作
- @click.prevent.stop = 'add' 表示以上兩種意思
常用的修飾符有很多
- v-on 支持的有 .{ keycode | keyAlias } 即鍵碼 或 按鍵別名
- 另外還有 .stop .prevent .capture .self .once .passive .native
- 快捷鍵相關(guān) .ctrl .alt .shift .meta .exact
- 鼠標(biāo)相關(guān) .left .right .middle
- v-bind 支持的 .prop .camel .sync
- v-model 支持的 .lazy .number .trim
4. .sync 修飾符
Vue的幾個規(guī)則
- 組件不能修改 props 外部數(shù)據(jù)
- $emit 可以觸發(fā)事件欠啤，并傳參
- event 可以獲取$emit的參數(shù)
在有些情況下荚藻，我們可能需要對一個 prop 進(jìn)行“雙向綁定”。不幸的是跪妥，真正的雙向綁定會帶來維護(hù)上的問題鞋喇，因為子組件可以變更父組件，且在父組件和子組件都沒有明顯的變更來源眉撵。因此 Vue 推薦以 update:myPropName 的模式觸發(fā)事件取而代之
看一個場景侦香，子組件要使用父組件傳遞的參數(shù)加以修改
<template>
<div class="child">
{{money}}
<button @click="$emit('update:money',money - 100)">
<span>花錢</span>>
</button>
</div>
</template>
<script>
export default {
props:['money']
}
</script>
<style scoped>
.child{
border: 1px solid black;
}
</style>
<!--
這里是子組件 點擊執(zhí)行自定義事件 'update:money.' 執(zhí)行內(nèi)容 為 'money - 100'
-->
<template>
<div id="app">
App.vue 我現(xiàn)在有 {{total}}
<hr/>
<Child :money="total" v-on:update:money="total = $event"/>
</div>
</template>
<script>
import Child from './components/Child.vue'
export default {
name: 'App',
data(){
return {
total:10000
}
},
methods:{
add(){
this.n++;
}
},
components:{
Child:Child
}
}
</script>
<style lang="scss">
#app {
border:1px solid red;
padding: 10px;
}
</style>
<!--
這里是父組件 傳給子組件 :money='total' props 數(shù)據(jù) 父元素綁定'update:money' 事件，子組件執(zhí)行時 便觸發(fā)事件 執(zhí)行 'total = $event' $event表示子組件調(diào)用的參數(shù)
當(dāng)子組件修改父組件數(shù)據(jù)時纽疟，必須這樣寫
-->
當(dāng)使用 .sync 修飾符時
<Child :money.sync="total"/>
<!-- 等價于 -->
<Child :money="total" v-on:update:money="total = $event"/>
子組件的自定義事件必須按照 update:參數(shù)名 格式 不能修改
