7.Vue常用属性 _生活百科

1. data:数据属性在之前的学习中我们已经了解到了data，属性中存放的就是js变量
<script>new Vue({el: '#app',// datadata: {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 7<script src="https://www.huyubaike.com/biancheng/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>202122 </div>23 </body>24 <script>25new Vue({26// vue管理的区域,所有的vue语法仅在该区域内生效27el: '#app',28data: {29content:'',30info:[31'中',32'中国',33'中国人',34'中国心',35'中国的',36'我是中国人'37],38},39computed:{40filter_info(){41return this.info.filter((item)=>{42return item.indexOf(this.content) > -143})44}45}4647})48 </script>49 </html>4.watch:监听属性用于监听某一个变量属性，当变量发生改变，则执行对应的函数，在分组筛选中使用较多
方法的参数为变化之后的属性值

文章插图

文章插图
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4<meta charset="UTF-8"> 5<title>Title</title> 6 7<script src="https://www.huyubaike.com/biancheng/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>1718 </div>19 </body>20 <script>21new Vue({22// vue管理的区域,所有的vue语法仅在该区域内生效23el: '#app',24data: {25gender: ''26},27// 监听属性28watch:{29// 参数为监听属性变化之后的值30gender: function (val){31alert(val)32}33}343536})37 </script>38 </html>5.components:组件属性用于定义该组件的局部组件

文章插图

文章插图
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4<meta charset="UTF-8"> 5<title>Title</title> 6 7<script src="https://www.huyubaike.com/biancheng/js/vue.js"></script> 8 </head> 9 <body>10 <div id="app">1112<navbar></navbar>1314 </div>15 </body>16 <script>17new Vue({18// vue管理的区域,所有的vue语法仅在该区域内生效19el: '#app',20data: {},21// 定义局部组件22components: {23navbar: {24template: `25<div>我是一个局部组件{{ name }}26<button @click="handler">点我</button>27</div>`,2829data() {30return {31name: 'kunmzhao'32}33},34methods: {35handler() {36alert('hello')37}38}39}40}41})42 </script>43 </html>【7.Vue常用属性】