7.Vue常用属性

时间：2022-11-05 21:08:39

在之前的学习中我们已经了解到了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

 

6. props:属性

用于接收父组件传递的数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 引入vue.js-->
    <script src="js/vue.js"></script>
</head>
<body>
<div id="app">
    <!--    全局组件的使用: 将父组件的name传递给子组件自定义的属性myname-->
    <navbar :myname="name"></navbar>

</div>
</body>
<script>
    // 定义一个全局组件
    Vue.component('navbar', {
        template: `
          <div>我是一个全局组件{{ myname }}</div>`,
        props: ['myname'] // 接收数据

    })
    new Vue({
        el: '#app',
        data: {
            name: 'Victor'
        },
    })
</script>
</html>

 

相关文章