Vue.js实战读书笔记--内置指令

5.1 基本指令

5.1.1 v-cloak

         v-cloak不需要表达式，会在Vue实例结束编译时从绑定的html标签上移除，经常和display:none配合使用。当网速较慢、Vue.js还没加载完时，页面会出现闪动的情况，通过该指令即可解决。在一般情况下，该指令是解决初始化慢的最佳实践。

<div id="app" v-cloak>
         {{massage}}
</div>
<script>
         var app = new Vue({
                   el:'#app',
                   data:{
                           message:"这是个文本"
                   }
         })
</script>

[v-cloak]{

         display:none;

}

 

5.1.2  v-once

         v-once是个不需要表达式的指令，作用是定义它的元素和组件只渲染一次，包括元素或组件的所有子节点。首次渲染后，不再随数据的变化而重新渲染，将视为静态内容。

 

5.2  条件渲染指令

5.2.1 v-if、v-else-if、v-else

         v-else-if要紧跟v-if、v-else要紧跟v-else-if或v-if，表达式为真时，当前元素或组件被渲染，为假时被移除。如果一次判断的是多个元素时，可以在Vue.js内置的<template>元素上使用指令，最终渲染的结果不会包含该元素。

         Vue在渲染元素时出于效率的考虑，可以将一些元素复用，但是往往会出现问题，当操作这些元素时，会出现值并没有初始化，这时可以使用Vue提供的key属性，他可以让你决定是否要服用元素，key值必须是唯一的。

 

5.2.2 v-show

 

         v-show和v-if的用法基本上一致，只不过v-show改变的是元素css的display属性值，当v-show为false时，元素会隐藏，但是页面上可以看出元素上是添加了内联样式display：none。V-if为false时，可以观察到对应元素节点都不会加载到页面，这是两者的区别。

         注意：v-show不能够在<template>上使用。

 

5.2.3   v-if与v-show的选择

        

         v-if与v-show有相似的功能，v-if是真正的条件渲染，会根据表达式决定是否绑定事件或者元素。如果初始值为false时，则该元素一开始就不会渲染，只有当条件为真的才会编译。v-show操作的是元素的内联样式的display属性，不管表达式是否为真，该标签都会编译。V-if适用于条件不经常改变的场景，v-show适用频繁切换条件。

 

5.3 列表渲染指令v-for

5.3.1   基本用法

 

   当需要将一个数组或者对象遍历时，可以使用v-for，表达式可以结合in使用。列表渲染时也支持of代替in作为分隔符使用。分隔符in前的语句使用括号，第二项就是books当前项的索引。

<div id="app">
         <ul>
                   <li v-for="book in books">{{book.name}}</li>
         </ul>
</div>

         与v-if一样，也可以在<template>上将多个元素渲染。除了数组外，对象属性也是可以遍历的，例如：

<div id="app">
         <span v-for="value in user">{{value}}</span>
</div>
<script>
         var app = new Vue({
                   el:'#app',
                   data:{
                           user{
                                     name:'liu',
                                     gender:'女',
                                     age:18
                            }
                   }
         })
</script>

渲染后结果为：

<span>liu</span><span>女</span><span>18</span>

遍历对象属性时，有两个可选属性，分别是键名和索引。

<div id="app">
         <ul>
                   <li v-for="(value ,key ,index) in user">
                            {{index}} - {{key}}:{{value}}
                   </li>
         </ul>
</div>

 

5.3.2   数据更新

Vue包含了一组观察数组变异的方法，使用这些改变数组视图也会随之改变。

         Push()

         Pop()

         Shift()

         Unshift()

         Splice()

         Sort()

         Reverse()

以上方法会改变原始数组，有些方法则不会改变原数组。例如： Filter()、Concat()、Slice()

         需要注意的是，以下变动的数组中，Vue是不会检测到的，不会触发视图更新。

1. 通过索引直接设置项，比如app.books[3]={…};
2. 修改数组长度，比如app.books.length = 1.  

解决第一个问题可以用两种方法实现，第一种是用Vue的set方法：

Vue.set(app.books,3,{
         name:'《css》',
         author:'lea'
});

如果是在webpack中使用组件化的方式，默认是没有导入Vue的，这时可以使用$set，例如：

this.$set(app.books,3,{
         name:'《css》',
         author:'lea'
});

//this指向的是当前的组件实例，即，app.在非webpack模式下也可以用$set方法，例如，app.$set(...)

另一种方法：

app.books.splice(3,1,{
         name:'《css》',
         author:'lea'
});

第二个问题也可以用splice解决:

app.books.splice(1);

5.3.3   过滤与排序

         当不想改变原数组数据时，可以通过该数组的副本进行过滤或排序处理，使用计算属性可以返回处理后的数据。

<div id="app">
         <ul>
                   <template v-for="book in filterBooks">
                            <li>书名：{{book.name}}</li>
                            <li>作者：{{book.author}}</li>
                   </template>
         </ul>
</div>
<script>
         var app = new Vue({
                   el:'#app',
                   data:{
                            books :[
                                     {
                                               name:'《Vue》',
                                               author:'刘',
                                     },
                                     {
                                               name:'《Java》',
                                               author:'戴',
                                     },
                                     {
                                               name:'《DataBase》',
                                               author:'李',
                                     },
                            ]
                   },
                   computed:{
                            filterBooks:function(){
                                     return this.books.filter(function(book){
                                               return book.name.match(/Java/);
                                     })
                            }
                   }
        })
</script>

上述做了过滤处理，计算属性filterBooks依赖books，但不会修改books。排序功能也是一样。

computed:{
         sortedBooks:function(){
         return this.books.sort(function(a,b){
                            return a.name.length<b.name.length;
                   })
         }
}

注意：vue.js 2.X中废弃了1.X中内置的limitBy，filterBy和orderBy过滤器，统一用计算属性实现。

 

5.4  方法与事件

5.4.1   基本用法

         @click等同于v-on:click，是一个语法糖。在method中定义方法可以供@click调用，@click后面的方法可以不跟括号（）。如果该方法有参数，默认会将原生事件对象event传入。Vue提供了一个特殊变量$event，用于访问原生Dom事件，例如可以阻止链接打开。

<div id="app">
         <a href="www.baidu.com" @click="handleClick('禁止打开',$event)"></a>
</div>
<script>
         var app = new Vue({
                   el:'#app',
                   methods:{
                            handleClick:function(message,event){
                                     event.preventDefaulit();
                                    window.alert(message);
                            }
                   }
         })
</script>

5.4.2   修饰符

         上述中的event.preventDefaulit()可以使用修饰符实现，在@绑定的事件后加小圆点“.”，再跟一个后缀使用修饰符。Vue支持以下修饰符：

.stop .prevent .capture .self .once

具体用法：

<!--阻止单击事件冒泡-->
<a @click.stop="handle"></a>
<!--提交时间不再重载页面-->
<form @submit.prevent="handle"></form>
<!--修饰符串联-->
<a @click.stop.prevent="handle"></a>
<!--只有修饰符-->
<form @submit.prevent></form>
<!--添加事件监听器-->
<div @click.capture="handle">...</div>
<!--只当事件在该元素本身（而不是子元素）触发时触发回调-->
<div @click.self="handle">...</div>
<!--只触发一次-->
<div @click.once="handle">...</div>
<!--监听键盘-->
<input @keyup.13="submit">

也可以自定义按键

Vue.config.keyCodes.f1 = 112;//全局定义后，就可以使用@keyCodes.f1

除了具体的某个keyCode外，Vue还提供了快捷名称，以下是全部别名：

.enter、.tab、.delete、.esc、.space、.up、.down、.left、.right

这些按键可以组合使用。

<!--shift+S-->

<input @keyup.shift.83="handleSave">