Vue模板語法 mustache語法列表渲染 事件

Vue模板語法 mustache語法 雙大括號語法

指令

1. Vue 指令
   • 作用： 是用來操作DOM的，指令就是綁定在DOM身上的一個屬性，這個屬性具備一定的功能，這個功能用來操作DOM
   • 以后我們不在像以前一樣，先獲取DOM，在操作了，我們現在可以直接使用指令來操作DOM
   • 這個指令需要模板語法的支持，所以我們采用jsx語法糖
2. Vue 組件

模板語法

模板語法支持性還是很高的，數據類型都是支持的，但是不支持 輸出語法 （ console.log alert ）

指令的具體展示

1. 格式：
   • v-xxx = "mustache語法"
   • v-xxx = "msg"
   • v-xxx = "{{msg}}" 錯誤的
2. v-html 將一個數據展示在一個DOM內容中， innerHTML( html屬性 )
   • 防止腳本攻擊 xss CSRF
3. v-bind
   • 使用技巧： 凡是 DOM 的屬性要和數據進行綁定，那么我們就可以使用 v-bind
   • 格式： v-bind:DOMattr = "data"
   • 簡寫： :DOMattr = "data"
4. v-text 非轉義輸出,v-html 轉義輸出

<p v-html="a"></p><p v-text="a"></p>

new Vue({
el:'#app',
data:{
a:'<em>hello,world</em>'
}
})

輸出的結果：
hello,world
<em>hello,world</em>

5. class vs style
   1. class

• object寫法

<div :class = "{[size]:true,[color]: true,[box]: true}"></div><div :class = "{[size]: 5>2?true:false,[color]: true,[box]: true}"></div>

• arr寫法

<div :class = "[size,box,color]"></div><div :class = "[class_flag?size:'',box,color]"></div>

2. style

• object寫法

<div :style = "{width:'100px',height: '100px',background: 'blue'}"></div><div :style = "style"></div>

• arr寫法

<div :style = "[style,border]"></div>

6. 條件渲染 v-if && v-show
   1. 條件渲染有兩個指令， 一個是 v-if , 另外一個是 v-show
   2. v-if 有三種使用形式
      • 單路分支
      • 雙路分支
      • 多路分支

<div id="app"><h3> v-if 單路</h3><p v-if = "flag"> 單路分支 </p><h3> v-if 雙路 </h3><p v-if = "flag"> 雙路1 </p><p v-else> 雙路2 </p><h3> v-if 多路 </h3><p v-if = "type === 'A' "> A </p><p v-else-if = " type === 'B'"> B </p><p v-else> C </p></div>

new Vue({
el: '#app',
data: {
msg: 'hello 下午到了',
flag: false,
type: 'A'
}
})

3. v-show

<div id="app"><h3> v-show </h3><p v-show = "flag"> 千鋒教育 </p></div>

new Vue({
el: '#app',
data: {
msg: 'hello vue.js',
flag: false
}
})

4. v-if vs v-show
   • v-if 如果值為false，那么綁定的DOM就會被銷毀
   • v-if 操作的是一個DOM的生成和銷毀
   • 如果v-if的初始值時false,那么綁定元素是否會渲染呢？
     答：v-if如果是false，那么這個DOM元素是不會渲染的
   • v-show 操作的是一個DOM的dispay樣式屬性
   • 如果v-show的初始值是false,那么這個綁定的DOM元素是否會渲染呢？
     答：v-show不管值是什么，它都會渲染出來
   • 總結：一般來說，v-if 有更高的切換開銷，而 v-show 有更高的初始渲染開銷。因此，如果需要非常頻繁地切換，則使用 v-show 較好；如果在運行時條件很少改變，則使用 v-if 較好。
   • template：相當於虛擬DOM
     • template標簽如果放在模板的范圍內使用，那么將來不會被解析渲染

<div id="app"><template v-if = 'flag'><div class="box" ><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li></ul></div></template></div>

new Vue({
el: '#app',
data: {
msg: 'hello vue.js',
flag: false
}
})

7. 列表渲染：
   v-for 是用來做列表渲染的
   1. 格式
      v-for = " xxx in(of) data "
      舉例：
      v-for = " item in(of) todos "

<div id="app"><h3> num </h3><ul><li v-for = " n in num "> {{ n }} </li></ul><h3> string </h3><ul><li v-for = " s of str"> {{ s }} </li></ul><h3> arr </h3><ul><li v-for = " item in arr "> {{ item }} </li></ul></div>

new Vue({
el: '#app',
data: {
msg: 'hello vue.js',
num: 10,
str: 'I hate you ~~',
arr: [ 1,2,3,4 ],
})

2. 帶參數的格式
   v-for = " (item,index) in todos "

<div id="app"><h3> arr - v-for 帶參數的 </h3><ul><li v-for = "( item , index) in arr "><p> item -- {{ item }} </p><p> index ---{{ index }} </p></li></ul><h3> object </h3><ul><li v-for = " item in obj "> {{ item }} </li></ul><h3> object-v-for 帶參數 </h3><ul><li v-for = " (item,key) in obj "><p> item -- {{ item }} </p><p> key -- {{ key }} </p></li></ul><h3> object-v-for 帶三個參數 </h3><ul><li v-for = " (item,key,index) in obj "><p> item -- {{ item }} </p><p> key -- {{ key }} </p><p> index -- {{ index }} </p></li></ul></div>

new Vue({
el: '#app',
data: {
msg: 'hello vue.js',
num: 10,
str: 'I hate you ~~',
arr: [ 1,2,3,4 ],
obj: {
id: 1,
name: 'zyz',
age: 18
}
})

3. key( 留一部分 )
   • 每次列表循環的后面都要綁定一個key,是為了進行DOM的唯一標識，這樣就不會讓vue因為惰性而影響列表的正常渲染
   • 理想的key是使用數據中的id
4. 數據的更新檢測
   • 使用以下方法操作數組，可以檢測變動：
     push() pop() shift() unshift() splice() sort() reverse()
   • 新數組替換舊數組：
     filter(), concat() 和 slice() ,map()
   • 不能檢測以下變動的數組：
       vm.items[indexOfItem] = newValue
               解決  (1)Vue.set(example1.items, indexOfItem, newValue)
     vm.items.length = 0
               解決   (1)splice

<div id="app"><h3> json </h3><button v-on:click = "add"> 添加 </button><button v-on:click = "notChange"> 不能檢測的 </button><button v-on:click = "clear"> 清空一個數組 </button><ul><li v-for = "item in json"><ul><li v-for = "(ele,index) in item" :key = "index">
{{ ele }}
</li></ul></li></ul><h3> 新數組 computed - filter </h3><ul><li v-for = " item in newJson" :key = "item.id">
{{ item.text }}
</li></ul></div>

new Vue({
el: '#app',
data: {
json: [
'aa',
{
id: 1,
text: '睡覺'
},
{
id: 2,
text: '敲代碼'
}
]
},
methods: {
//這里面存放的都是事件的處理程序
add () {
this.json.push({
id: 3,
text: '打籃球'
})
},
notChange () {
// this.json[0] = '做作業'// Vue.set(this.json,0,'做作業')this.$set(this.json,0,'做作業')
},
clear () {
// this.json.length = 0this.json.splice(0,this.json.length)
}
}
})

5. methods 方法
   • 事件的添加使用的是 v-on:eventType = '事件處理程序'
   • 事件處理程序往options里面的methods配置項中書寫

<button v-on:click = "add"> + </button>

new Vue({
el: '#app',
data: {
arr: [1,2,3,4]
},
methods: {
add () {
this.arr.push(5)
}
}
})

6. computed 計算屬性
   • 計算屬性中存放的也是方法
   • 計算屬性的方法中必須要有返回值
   • 計算屬性的方法名可以像data選項中定義的數據一樣使用

computed: { // 計算屬性// 這里存放的也是方法，但是這個方法是有返回值的，並且方法名還可以當做一個變量（相當於直接在data里面定義的數據）來使用
newJson () {
return this.json.filter( item => {
return item.id>1
})
}
}

事件

1. 指令v-on
2. 格式
   v-on:eventType = "事件處理程序名稱"
3. 簡寫
   @eventType = '事件處理程序名稱'

<div id="app"><h3> 普通事件 </h3><button v-on:click = 'normalHandler'> 普通事件 </button><button @click = 'normalHandler'> 普通事件-簡寫 </button><h3> 事件對象 </h3><button @click = "eventHandler"> 事件對象 </button><h3> 事件傳參 </h3><button @click = "arguHandler( 10,20 )"> 事件傳參 </button><button @click = "arguHandler( a,b )"> 事件傳參 </button><button @click = "argu_event_handler( a,b,$event )"> 事件傳參 - 事件對象 </button></div>

//如果我的參數中需要事件對象//解決： 在方法調用的時候，使用一個叫做$event的作為實際參數new Vue({
el: '#app',
data: {
a: 10,
b: 20
},
methods: {
normalHandler () {
alert('普通事件')
},
eventHandler ( e ) {
console.log( e )
},
arguHandler ( a, b ) {
alert( a + b )
},
argu_event_handler ( a,b,e) {
console.log( e )
console.log( a + b )
}
}
})

4. 事件的修飾符
   1. 格式： v-on:click.xxx = 'handler'
   • xxx指的是修飾符的名稱
   2. 修飾符的種類：
      • .stop：阻止冒泡
      • .prevent：阻止瀏覽器的默認行為
      • .capture：事件捕獲
      • .self：阻止冒泡
      • .once：事件只觸發一次
      • .passive：滾輪事件不會立即觸發，會等待onScoll完成再觸發
   3. 問題： 修飾符使用有什么好處？
      • 舉例： 事件冒泡案例
      • 分析： 發現 e.stopPropagation() 在每一個方法中都要使用，這個時候發現代碼很冗余
      • 解決： 事件修飾符

<div id="app"><div class="big" @click.stop = "bigHandler"><div class="middle" @click.stop = "middleHandler"><div class="small" @click.stop = "smallHandler"></div></div></div><hr><div class="big" @click.self = "bigHandler"><div class="middle" @click.self = "middleHandler"><div class="small" @click.self = "smallHandler"></div></div></div></div>

new Vue({
el: '#app',
methods: {
bigHandler (e) {
// e.stopPropagation()
alert('big')
},
middleHandler (e) {
// e.stopPropagation()
alert('middle')
},
smallHandler (e) {
// e.stopPropagation()
alert( 'small' )
}
}
})

5. 按鍵修飾符

   1. 案例： 敲擊鍵盤的enter鍵，將用戶輸入的數據拿到手？

   2. 事件的書寫

      • 先寫方法，然后在綁定DOM元素身上

   3. 需要按鍵修飾符的原因：

      • 我們發現當我們需要書寫很多下面類似代碼的時候，發現代碼在重復，我們希望代碼能復用或是簡寫
      • 解決： 它將這部分代碼封裝在自己的 Vue.js中，然后我們來調用這個功能，我們通過按鍵修飾符來使用

   <div id="app"> <input type="text" @keyup = "get_user_input"> <h3> 按鍵修飾符 </h3> <input type="text" @keyup.enter = "get_user_shuru"> <input type="text" @keyup.13 = "get_user_shuru"> <input type="text" @keyup.s = "get_user_shuru"> </div> 

     new Vue({ el: '#app', methods: { get_user_input ( e ) { const keyCode = e.keyCode const target = e.target if( keyCode === 13 ){ console.log( target.value ) } }, get_user_shuru ( e ) { // 用戶輸入獲取value的方法 console.log( e.target.value ) } } }) 

   4. 自定義按鍵修飾符鍵盤碼
      • Vue.config.keyCodes.p = 80

6. 雙向數據綁定/數據驅動/深入響應式

1. 原理：
   • vue是通過數據劫持和事件的發布訂閱來進行數據驅動的，當我們在data選項中定義數據后，vue會通過observer（觀察者）
     監聽data選項，將data選項中的所有key通過es5的Object.definedPropty進行getter和setter設置，當
     數據綁定在DOM上是，就會觸發getter,給DOM設置初始值，當我們在V(視圖中)輸入內容時，就會觸發setter
     ,就可以獲得最新的值，通過watch（監聽）通知Vue進行V(視圖)重新渲染
2. v-model
   • vue中通過 v-model 來進行雙向數據綁定
   • v-model只用於表單元素
   • v-model默認綁定 value屬性
3. 格式：
   • <input type = 'text' v-model = "msg"/>
4. 購物車加減案例

     <div id="app"> <h3> 購物車加減 </h3> <div> <button @click = "decrement"> - </button> <input type="text" v-model = 'number'> <button @click = "increment"> + </button> </div> </div> 

    new Vue({ el: '#app', methods: { increment () { //加 this.number ++ }, decrement () { // 減 this.number -- } } }) 

5. 通過單項數據綁定實現雙向數據綁定
   • 原理：鍵盤一輸入內容就要獲取input的值，然后修改vm數據

      <div id="app"> <input type="text" :value = "msg" @input = "getValue"> <h3> {{ msg }} </h3> </div> 

       new Vue({ el: '#app', data: { msg: '請輸入' }, methods: { getValue ( e ) { var val = e.target.value this.msg = val } } }) 

6.