7.Vue常用屬性
- 2022 年 11 月 5 日
- 筆記
- python全棧開發-vue3學習
1. data:數據屬性
在之前的學習中我們已經了解到了data，屬性中存放的就是js變數
<script>
new Vue({
el: '#app',
// data
data: {
username:'',
},
})
</script>
2. methods:方法屬性
存放組件中的自定義方法
<script>
new Vue({
el: '#app',
data: {
username:'',
},
// 方法
methods: {
handler() {
axios.get('//m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=10&type=2&k=8222481').then(res=>{
console.log(res.data);
this.username = res.data().username
})
}
}
})
</script>
3.computed:計算屬性
計算屬性中存放的也是函數，但是可以當做屬性值使用，也就是當做普通變數使用，但是注意一定要將數據return出去
特點：
- 當做屬性使用
- 有快取，當關聯的數據發生變化才會重新執行該方法
舉例：將前面搜索的案例重構如下
將filter_info變為計算屬性，當關聯的content發生改變，就會重新計算
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!-- 引入vue.js--> 7 <script src="js/vue.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <p> 12 <label><input type="text" v-model="content"></label> 13 </p> 14 <ul v-if="!content"> 15 <li v-for="item in info">{{item}}</li> 16 </ul> 17 <ul v-else> 18 <li v-for="item in filter_info">{{item}}</li> 19 </ul> 20 21 22 </div> 23 </body> 24 <script> 25 new Vue({ 26 // vue管理的區域,所有的vue語法僅在該區域內生效 27 el: '#app', 28 data: { 29 content:'', 30 info:[ 31 '中', 32 '中國', 33 '中國人', 34 '中國心', 35 '中國的', 36 '我是中國人' 37 ], 38 }, 39 computed:{ 40 filter_info(){ 41 return this.info.filter((item)=>{ 42 return item.indexOf(this.content) > -1 43 }) 44 } 45 } 46 47 }) 48 </script> 49 </html>
View Code
4.watch:監聽屬性
用於監聽某一個變數屬性，當變數發生改變，則執行對應的函數，在分組篩選中使用較多
方法的參數為變化之後的屬性值
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!-- 引入vue.js--> 7 <script src="js/vue.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <div> 12 <p>性別篩選: 13 <button @click="gender=0">男</button> 14 <button @click="gender=1">女</button> 15 </p> 16 </div> 17 18 </div> 19 </body> 20 <script> 21 new Vue({ 22 // vue管理的區域,所有的vue語法僅在該區域內生效 23 el: '#app', 24 data: { 25 gender: '' 26 }, 27 // 監聽屬性 28 watch:{ 29 // 參數為監聽屬性變化之後的值 30 gender: function (val){ 31 alert(val) 32 } 33 } 34 35 36 }) 37 </script> 38 </html>
View Code
5.components:組件屬性
用於定義該組件的局部組件
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <!-- 引入vue.js--> 7 <script src="js/vue.js"></script> 8 </head> 9 <body> 10 <div id="app"> 11 <!-- 局部組件只能在定義的當前文件中使用--> 12 <navbar></navbar> 13 14 </div> 15 </body> 16 <script> 17 new Vue({ 18 // vue管理的區域,所有的vue語法僅在該區域內生效 19 el: '#app', 20 data: {}, 21 // 定義局部組件 22 components: { 23 navbar: { 24 template: ` 25 <div>我是一個局部組件{{ name }} 26 <button @click="handler">點我</button> 27 </div>`, 28 29 data() { 30 return { 31 name: 'kunmzhao' 32 } 33 }, 34 methods: { 35 handler() { 36 alert('hello') 37 } 38 } 39 } 40 } 41 }) 42 </script> 43 </html>
View Code
