vue补充

之前对vue只是有了一个大概的了解，项目中好多东西也没用上，所以，有空就对vue进行知识补充，记录一下零零碎碎

1:v-for

v-for用来做循环渲染，最简单的就是

但是我们有时候也要用到当前值的索引值或者键

可以提供第二个参数为键名，如下

<ul>
    <li v-for="(value, key) in object">  //切记，第一个参数是值，第二个参数是键名
    {{ key }} : {{ value }}
    </li>
</ul>

可以提供第三个参数为索引

<ul>
    <li v-for="(value, key, index) in object">  //切记。第一个参宿是值。第二个参数是键，第三个参数是索引
     {{ index }}. {{ key }} : {{ value }}
    </li>
</ul>

2 计算属性

计算属性在处理一些复杂逻辑时是很有用的。

例如：要反转一个字符串，我们可以这么写

<div id="app">
  {{ message.split('').reverse().join('') }}
</div>

虽然这样写也可以实现目的，但是这样使代码看起来让人难以理解，但是使用computed计算属性就轻松多了

 1 <div id="app">
 2   <p>原始字符串: {{ message }}</p>
 3   <p>计算后反转字符串: {{ reversedMessage }}</p>
 4 </div>
 6 <script>
 7 var vm = new Vue({
 8   el: '#app',
 9   data: {
10     message: 'Runoob!'
11   },
12   computed: {
14     reversedMessage: function () {
16       return this.message.split('').reverse().join('')
17     }
18   }
19 })

computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值

3.监听属性

监听属性在项目中经常用到，但是用的也不全面，这里只补充自己没用到过

 watch : {
    count:function(newValue,oldValue){   //第一个参数是count的新值，第二个参数是旧值
　　　　document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue;
   }
}

4.class的绑定

自己经常忘了动态绑定是怎么写，然后又在网上找，很麻烦，在这里一并记录下来

1 <div id="app">
2   <div v-bind:class="{ active: isActive }"></div>   //如果isActive为真，就绑定active类名。否则，就不绑定

　　 <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> //多个之间用逗号隔开

3 </div>

5 v-bind和v-model

1:v-bind动态绑定指令，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind:你要动态变化的值="表达式"

2:v-bind用于绑定属性和数据，其缩写为“ : ” 也就是v-bind:id === :id

3:v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。

1:v-for

2 计算属性

3.监听属性

4.class的绑定

5 v-bind和v-model

猜你喜欢