5.内置指令

5.1 基本指令

• v-cloak

作用：解决网速较慢时，Vue.js文件还没加载完，在页面上会显示 未加载数据的状态(如{{message}})
使用：
    (css)style -> [v-cloak]{display:none} // none !important
    <div id="app" v-cloak>  ...  </div>
----
简单的项目可以使用 v-cloak ，工程化项目使用 webpack 和 vue-router

• v-once

作用：定义它的元素或组件只渲染一次（包括子节点)。首次渲染后，不再随数据的变化重新渲染，将视为静态内容。

5.2 条件渲染指令

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

v-if
v-else-if
v-else
--------
当有多个节点时 使用标签 template 
    template[v-if=""]>p{some words}*3
--------
Vue 会尽可能地复用已有的元素而非重新渲染，使用属性 key 使标签唯一，避免复用(文中 v-if ： input 的例子)

5.2.2 v-show

v-show 为flase元素会隐藏(通过改变元素的CSS属性display:none)

5.2.3 v-if 与 v-show 选择

• 区别

v-if:初始值为false时不渲染，值改变时会销毁或重建元素及绑定的事件或子组件；能在template上使用
v-show:渲染，通过改变display显示or隐藏；不能在template使用

• 选择

v-if:切换开销较大，更适合条件不经常改变的场景
v-show:适用于频繁切换条件场景

5.3 列表渲染指令

5.3.1 基本用法

v-for="book in books"
v-for="(book index) in books"
v-for="(value,key,index) in user"
-----------------
v-for: value
v-for: value,index ===> array
v-for: value,key,index ===> dict
-------
in 或者 of 都可以

5.3.2 数组更新方法

(会改变原有数组）
push()   增加
pop()    删除
shift()  
unshift()
splice()    拼接
sort()      排序
reverse()   逆序
----------
(不会改变原有数组,而是返回一个新数组)
filter()
    app.books=app.books.filter(function(item)){
        return item.name.match(/JavaScript/);
    });
concat()
slice()

Vue在检测到数组变化时，不会直接重新渲染整个列表，而是最大化的复用DOM元素。
但在以下情况，Vue不能检测到，也不会触发视图更新：

• 通过索引直接设置项(例：app.books[3]={...})
  • 使用Vue内置的set方法设置项(webpack>$set`)

    Vue.set(app.books,3,{
        name:'《CSS揭秘》',
        author:'[希]Lea Verou'
    });
    --------------------
    this.$set(app.books,3,{
        name:'《CSS揭秘》',
        autohor:'[希] Lea Verou'
    })
    这里的this指向当前组件实例，即app
    在非webpack模式下也可以使用$set方法，例如app.$set(...)
    

  • 使用splice

    app.books.splice(3,1,{
        name:'《CSS揭秘》',
        author:'[希] Lea Verou'
    });
    

• 修改数组长度(例：app.books.length=1 )
  • 使用splice

    app.books.splice(1);
    

5.3.3 过滤与排序

使用计算属性返回过滤或排序后的数组

data:{
    books:[]
}
computed:{
    filterBooks:function(){
        return this.books.filter(function(book){
            return book.name.match(/JavaScript/);
        })
    },
    sortedBooks:function(){
        return this.books.sort(function(book1,book2){
            return book1.name.length<book2.name.length;
        })
    }
    /*----------------
    !!sorttedBooks有个错误：sort 函数的返回值不能是 ture 或者 false，而是依据返回值的正负零来判断
    所以：
        return book2.name.length-book1.name.length;
    这样，当 book2.name.length > book1.name.length时 ，交换位置
    即，书名长度从长到短
    */
}
filter 不改变原有数组，sort 改变了原有数组。

5.4 事件与方法

5.4.1 用法

@click:"method_name()"
-------
1. 如果方法没有参数，可以不写括号
2. 如果方法有参数，默认会将原生事件event传入
3. 特殊变量 $event , 用于访问原生DOM事件
4. 根据2、3 , @click="method_name" => @click="method_name()" =>  @click="method_name("$event") 

5.4.2 修饰符

• 事件修饰符
  • .stop
  • prevent
  • .capture
  • .self
  • .once

  //阻止单击事件冒泡
  a[@click.stop="handle"]
  //提交事件不再重载页面
  form[@submit.prevent="handle"]
  //添加事件侦听器使用事件捕获模式
  div[@click.capture="handle"]{...}
  //只当事件在改元素本身(而不是子元素)触发时触发回调
  div[@click.self="handle"]{...}
  //只触发一次，组件同样适用
  div[@click.once="handle"]
  
  //修饰符可以组合使用
  a[@click.stop.prevent="handle"]
  //只有修饰符
  form[@submit.prevent]
  

• 按键修饰符
  • 键盘按键
    • keyCode (一个数字)
    • 快捷
      • .enter
      • .tab
      • .delete (删除 和 退格 键)
      • .esc
      • .space
      • .up
      • .down
      • .left
      • .right
  • 鼠标快捷
    • .ctrl
    • .alt
    • .shift
    • .meta (Mac->Command,Windows->窗口)

    //shift + S
    input[@keyup.shift.83="handleSave"]
    // Ctrl + Click
    div[@click.ctrl="doSomething"]{Do something}
    

5.5 实战：计算属性、指令等知识开发购物车