1. 首頁 > 生活百科 > >

7.Vue常用屬性

生活百科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發生改變，就會重新計算
7.Vue常用屬性

文章插圖
7.Vue常用屬性

文章插圖
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4<meta charset="UTF-8"> 5<title>Title</title> 6<!-- 引入vue.js--> 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:監聽屬性用于監聽某一個變量屬性，當變量發生改變，則執行對應的函數，在分組篩選中使用較多
方法的參數為變化之后的屬性值
7.Vue常用屬性

文章插圖
7.Vue常用屬性

文章插圖
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4<meta charset="UTF-8"> 5<title>Title</title> 6<!-- 引入vue.js--> 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:組件屬性用于定義該組件的局部組件
7.Vue常用屬性

文章插圖
7.Vue常用屬性

文章插圖
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4<meta charset="UTF-8"> 5<title>Title</title> 6<!-- 引入vue.js--> 7<script src="https://www.huyubaike.com/biancheng/js/vue.js"></script> 8 </head> 9 <body>10 <div id="app">11<!--局部組件只能在定義的當前文件中使用-->12<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常用屬性】

    推薦閱讀