目錄

通過key來管理狀態

事件處理

內聯事件處理器

方法事件處理器

事件傳參

獲取event

傳遞參數

傳參的過程中獲取事件對象

事件修飾符

阻止事件描述符

阻止事件冒泡

數組變化偵測

變更方式

替換一個數組

計算屬性

Class綁定

綁定對象

綁定數組

Style綁定

偵聽器

表單輸入綁定

修飾符

---

????????

這里是第二次發的關于學習Vue的一些知識點，都是一些比較實用點。

通過key來管理狀態

當使用v-for渲染之后，如果數據項順序改變，Vue不會隨著dom元素順序移動，而是就地更新元素，確保在原本指定的位置上渲染。為了方便跟蹤，所以要為每個元素對應的塊提供一個唯一的key。

?? key通過v-bind綁定屬性，推薦在什么時候都能使用，是一個基礎類型的值。

??因為順序會發生變化，所以不推薦用index，應該使用唯一索引。

<template><h3>列表渲染</h3><p v-for="(value, key, index) of user">{{index}}-{{key}}-{{value}}</p><div v-for="item of result" :key="item.id"><p>{{item.title}}</p></div>
</template>
<script>export default {data() {return{user:{name: ["2132",123214],age: 13,},result: [{"id": 1,"title": "133",},{"id":2,"title":"123",}]}}}
</script>

事件處理

使用v-on來監聽事件，事件處理分為

1. 內聯：事件被觸發的時候執行內聯語句

2. 方法：一個指向組件上定義的方法的屬性名或是路徑

內聯事件處理器

<template><h3>內聯事件處理器</h3><button @click="count++"> Add</button><p>{{count}}</p>
</template><script>export default{data(){return{count: 0}}
}</script><style scoped></style>

方法事件處理器

<template><h3>方法事件處理器</h3><button @click="addCount"> Add</button><p>{{count}}</p>
</template><script>export default{data(){return{count: 0}},methods:{addCount(){//在這里進行操作this.count++console.log("點擊了")}}}</script><style scoped></style>

事件傳參

事件參數可以獲取event對象和通過事件傳遞數據

獲取event

<template><h3>方法事件處理器</h3><button @click="addCount"> Add</button><p>{{count}}</p>
</template><script>export default{data(){return{count: 0}},methods:{addCount(e){e.target.innerHTML = "aadd" + this.countthis.count++}}}</script><style scoped></style>

傳遞參數

<template><h3>事件傳參</h3><p @click= "getNameHandler(item)" v-for="(item, index) of names" :key="index">{{item}}</p>
</template><script>export default {data() {return {names: ["bob", "jack", "marry"]}},methods: {getNameHandler(name){console.log(name)}}}</script><style scoped></style>

傳參的過程中獲取事件對象

<template><h3>事件傳參</h3><p @click= "getNameHandler(item, $event)" v-for="(item, index) of names" :key="index">{{item}}</p>
</template><script>export default {data() {return {names: ["bob", "jack", "marry"]}},methods: {getNameHandler(name, e){console.log(name)console.log(e)}}}</script><style scoped></style>

事件修飾符

在處理事件的時候，調用方法很常見，為了能夠更好的去處理事件的邏輯有了事件修飾符很多的可以在官網上查看

阻止事件描述符

<template><h3>事件描述符</h3>
<!--  //這里可以之間使用--><a @click.prevent="clickHandle" href="https://www.bilibili.com/video/BV1Rs4y127j8?p=13&spm_id_from=pageDriver&vd_source=2a222b50c15b9af66c7ffac6c7740bde">bilibili</a>
</template><script>
export default {data() {return {}},methods: {clickHandle(e) {// e.preventDefault()這里也就不需要了，阻止了事件的發生console.log("點擊了")}}
}
</script><style scoped></style>

阻止事件冒泡

<template><h3>事件描述符</h3><div @click="clickDiv"><p @click.stop="clickP">測試冒泡</p></div>
</template><script>
export default {data() {return {}},methods: {clickDiv(){console.log("div")},clickP(e){//在這里也可以寫，//     e.stopPropagation()console.log("p")}}
}
</script><style scoped></style>

數組變化偵測

變更方式

Vue能夠偵聽響應式數組的變更方法，并在他們被調用時觸發相關的更新

替換一個數組

不會改變原數組，而是創建一個新數組

下面是上面的兩種的代碼展示

<template><h3>數組變化偵聽</h3><button @click="addListHandle">添加數據</button><ul><li v-for="(item, index) of names" :key="index">{{ item}}</li></ul><button @click="concatHandler">合并數組</button><h3>數組1</h3><p v-for="(item, index) of arry1" :key="index">{{item}}</p><h3>數組2</h3><p v-for="(item, index) of arry2" :key="index">{{item}}</p>
</template>
<script>export default {data(){return{names: ["arry", "pop", "tom"],arry1: [1,2,3,4,5],arry2: [7,8,9,10,11,12],}},methods:{addListHandle(){//this.names.push("waiai")//ui自動引起更新this.names.concat(["123"])//ui不會變，console.log(this.names.concat(["123"]))// 可以變化為this.names =  this.names.concat(["123"])//體現了不是原數組了},concatHandler(){this.arry1 = this.arry1.concat(this.arry2)}}}</script><style scoped></style>

計算屬性

讓模版中不要寫太多的表達式

計算屬性只運行一次，而返回每次都會運行。

<template><h3>西游{{xiyou.tast}}</h3><p>{{xiyouContent}}</p><p>{{xiyouContents()}}</p>/
</template><script>export default{data(){return{xiyou:{tast:"qujing",names:["arru", "123", "321"]}}},//計算屬性computed:{xiyouContent(){return this.xiyou.names.length > 0 ? 'yes':"no"}},//放函數或者方法methods:{xiyouContents(){return this.xiyou.names.length > 0 ? 'yes':"no"}}}
</script><style scoped></style>

Class綁定

操縱元素的CSS class列表，因為class是attribute，那就可以使用v-bind將他們和動態的字符串綁定。在處理比較復雜的是時候，通過拼接生成字符串比較麻煩，因此有了特殊增強功能，除了字符串外，表達式的值可以是對象或者數組。

綁定對象

綁定數組

數組和對象一起使用

提示：數組和對象嵌套過程中，只能是數組嵌套對象。

下面是所有代碼的實現：

<template><p :class="{'active':isActive, 'text-danger':hasError}">Class樣式綁定</p><p :class="classObject">Class樣式綁定2</p><p :class="[arrActive, arrHasError]">Class樣式綁定3</p><p :class="[isActive? 'active':'']">Class樣式綁定4</p><p :class="[isActive? 'active':'',{'text-danger':hasError}]">Class樣式綁定5</p>
</template><script>
export default {data(){return {isActive:true,hasError:true,classObject:{"active":true,"text-danger":true,},arrActive:"active",arrHasError:"text-danger",}}
}</script><style scoped>.active{font-size:30px;}.text-danger{color:red;}</style>

Style綁定

這個和class綁定是一樣的

<template><p :style="{color:activeColor,fontSize:fontSize +'px'}">Style綁定1</p><p :style="styleObject">Style綁定2</p>
</template><script>
export default {data(){return{activeColor:"green",fontSize:50,styleObject:{color:"red",fontSize:"50px"}}}
}</script><style scoped></style>

偵聽器

偵聽數據的變化，使用watch選項在每次響應式屬性發生變化時觸發一個函數

<template><h3>偵聽器</h3><p>{{message}}</p><button @click="MidMessage">修改數據</button>
</template><script>export default {data(){return{message:"hello",}},methods:{MidMessage(){this.message = "123"}},watch:{//注意這個名字要和偵聽的數據對象是一樣的message(newValue,oldValue){console.log(newValue, oldValue)}}}</script><style scoped></style>

表單輸入綁定

使用v-model指令簡化手動連接值綁定和更改時間監聽器

修飾符

提供了修飾符：.lazy,.number,.trim

<template>
<h3> 表單輸入綁定</h3><form><input type="text" v-model = "message"><input type="text" v-model.lazy="message"><p>{{message}}</p><input type="checkbox" id="checkbox" v-model="checked"/><label for="checkbox">{{ checked}}</label></form>
</template>
<script>export default {data(){return{message:"",checked:false}}}
</script><style scoped></style>