7.Vue常用属性

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

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>

props的限定类型

  props:{
    msg:String // 接收的msg必须是String类型，否则报错
  }

props指定默认值

  props:{
    msg:{
      type:String, // 限制类型
      required:true, // msg参数的必要性，父组件必须传递
      default:'kunmzhao' // 默认值
    }
  }

7.setup属性

setup属性是vue3中才有属性,在创建组件实例时，在初始 prop 解析之后立即调用 setup。在生命周期方面，它是在 beforeCreate 钩子之前调用的。如果 setup 返回一个对象，则该对象的属性将合并到组件模板的渲染上下文中：

<template>
  <div>{{ count }} {{ object.foo }}</div>
</template>

<script>
  import { ref, reactive } from 'vue'

  export default {
    setup() {
      const count = ref(0)
      const object = reactive({ foo: 'bar' })

      // 暴露到template中
      return {
        count,
        object
      }
    }
  }
</script>

setup 还可以返回一个渲染函数，该函数可以直接使用在同一作用域中声明的响应式状态：

import { h, ref, reactive } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const object = reactive({ foo: 'bar' })

    return () => h('div', [count.value, object.foo])
  }
}

ref：接受一个内部值并返回一个响应式且可变的 ref 对象。ref 对象具有指向内部值的单个 property .value。

示例：
```
const count = ref(0)
console.log(count.value) // 0

count.value++
console.log(count.value) // 1
```
reactive：返回对象的响应式副本
```
const obj = reactive({ count: 0 })
```

posted on 2022-11-05 20:15 阿明明阅读(340) 评论(0) 编辑收藏举报