技術文章 » 7.Vue常用屬性

7.Vue常用屬性

2022-11-05 21:01:24

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('https://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