Vue.js模板语法

1.v-if指令将根据表达式的seen的值得真假来插入/移除<p>元素

<p v-if="seen">look</p>

2.v-bind指令用于响应式地更新HTML特性，以下将href和url绑定在了一起

<a v-bind:href = "url">...</a>
<a :href = "url">...</a>            //v-bind的特定缩写形式

3.v-on指令，它用于监听事件

<a v-on:click = "dosomething">...</a>
<a  @click = "dosomething">...</a>       //v-on的特定缩写形式

4.缓存：我们可以将同一个函数定义为一个方法，而不是一个计算属性，两种方式的最终结果是完全相同的。然而，不同的是计算机属性是基于他们的依赖进行缓存的。意味着下面的不是响应式依赖：

computed:{
    now:function(){
        return Date.now()
    }
}

5.对象语法

我们可以v-bind:class = Obj一个对象，以动态地切换class。我们可以在这儿绑定一个返回对象的计算属性，这是一个强大且常用的属性。

<div v-bind:class ='object'></div>

data:{
    isActive : true,
    error : null
},
computed:{
    object:function(){
        return {
            active:this.isActive && !this.error,
            'text-danger':this.error && this.error.type ==='fatal'
        }
    }
}

6.数组语法

把一个数组传给v-bind:class，以应用一个class列表。

同时也可以在数组语法中使用对象语法

<div v-bind:class='[{active:isActive},errorClass]'></div>

7.绑定内联样式，包括对象语法、数组语法，使用对象语法的时候，尽量直接绑定到一个样式模板上，这会让模板更清晰。

使用数组语法时，会将多个样式对象应用到同一个元素上。

<div v-bind:style='[baseStyles,overrideStyle]'>

8.条件渲染

<h1 v-if='ok'>Yes</h1>
<h1 v-else>No</h1>

当想把v-if作用的多个元素上时，可以使用<template>标签，将它作为一个不可见的包裹元素，并在上使用v-if，最终渲染结果将不包含<template>。

<template v-if='ok'>
    <p>nice</p>
    <h1>cool</h1>
</template>

用key管理可复用的元素。

9.v-if和v-show的区别

v-if是真正的条件渲染，因为它会确保在切换过程中，条件块内的事件监听器和子组件适当地被销毁和重建。v-if是惰性的，只有在条件第一次变为真时，才会开始条件块的渲染。

相比之下，v-show就简单的多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于CSS进行切换。总结，切换少用v-if，切换多用v-show。

10.当v-if和v-for一起使用时，v-for具有比v-if更高的优先级。

11.列表渲染

在v-for块中，我们拥有对父作用域属性的完全访问权限。v-for还支持一个可选的第二个参数为当前项的索引。

<li v-for="(item,index) in items">
{{parentMessage}}-{{index}}-{{item.message}}
</li>

也可以通过v-for来对一个对象的属性进行迭代，也可以提供第二个参数为键名，第三个参数为索引。

<div v-for="(value,key) in object">
    {{key}}={{value}}
</div>

12.数组更新检测

Vue包含一组观察数组的变异方法，它们将会触发视图的更新。这些方法主要有push，pop，shift，unshift，splice，sort，reverse。

13.更改对象

在Vue中可以使用vue.set(object,key,value)方法向嵌套对象添加响应式属性。

14.事件处理

v-on除了绑定一个事件外，还可以接收一个需要调用的方法名称。

除了直接绑定到一个方法上外，还可以在内联JavaScript语句中调用方法。

<div id ='example'>
<button v-on:click=say(hi)>Hi</button>
</div>

new Vue({
    el:'#example',
    methods:{
      say:function(message){
                alert(message);
            }  
    }
});