指令

• v-for
• v-if
• v-show
• v-model 在表单<input><textarea><select>元素上创建双向数据绑定
• v-bind 等同于 :
• v-on 等同于 @ 修饰符
  注：

v-if与v-show的区别

v-if是真正的条件渲染，有更高的切换开销,运行条件很少改变则用v-if
v-show不管条件是什么都会被渲染，只是基于CSS进行切换，有更高的初始渲染开销，频繁切换用v-show

vv-if与v-for

不推荐同时使用v-if和v-for
当两者一同使用的时候v-for比v-if更高的优先级，意味着v-if将分别重复运行在每个v-for循环中

v-for注意事项

1.变异方法：观察数组的变异，会触发视图的更新
push(),pop(),shift(),unshift(),splice(),sort(),reverse()
2.非变异方法：不会改变原始数组，总返回一个新的数组,可以用新数组替代旧数组
filter(),concat(),slice()
example1.items = example1.items.filter(function(item){
return item.message.match(/Foo/)
})

vue不能检测以下数组的变动

1.利用索引直接设置一个值
2.修改数组的长度
3.vue不能检测对象属性的添加或删除
可使用set，如下方案例

v-if的使用

<p v-if="seen">现在你看到我了</p>

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

// 如果想切换多个元素，把<template>元素作为一个不可见的包裹元素
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

// v-if v-else-if v-else
<div v-if="type === 'A'">A</div>
<div v-else-if="type === 'B'">  B</div>
<div v-else-if="type === 'C'">  C</div>
<div v-else>  Not A/B/C</div>

v-show的使用

<h1 v-show="ok">hello</h1>

v-bind的使用（class,style,各属性）

<a v-bind:href="url">...</a>
<a :href="url">...</a>


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

<div class="static"
     :class="{ active: isActive, 'text-danger': hasError }">
</div>
export default{
    data: {
        isActive: true,
        hasError: false
    }
}

<div v-bind:class="classObject"></div>
export default{
    data: {
        classObject: {
            active: true,
            'text-danger': false
        }
    }
}

<div v-bind:class="classObject"></div>
export default{
    data: {
        isActive: true,
        error: null
    },
    computed: {
        classObject: function () {
            return {
                active: this.isActive && !this.error,
                'text-danger': this.error && this.error.type === 'fatal'
            }
        }
    }
}


<!--  :style  -->
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
export default{
    data: {
        activeColor: 'red',
        fontSize: 30
    }
}

<div v-bind:style="styleObject"></div>
export default{
    data: {
        styleObject: {
            color: 'red',
            fontSize: '13px'
        }
    }
}

<div :style="[baseStyles, overridingStyles]"></div>                        // 数组写法
<div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"></div>   // 多重值



<!--用在组件上，最后渲染结果 <p class="foo bar baz boo">Hi</p>-->
Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})
<my-component class="baz boo"></my-component>

v-on的使用

<a v-on:click="doSomething">...</a>
<a @click="doSomething">...</a>

<button @click="counter += 1">Add 1</button>
<form @submit.prevent="onSubmit">...</form>                         // .prevent是修饰符，对于触发的事件调用event.preventDefault()
<button @click="warn('Form cannot be submitted yet.', $event)">     <!-- $event访问原始DOM事件 -->
  Submit
</button>

v-for的使用

// 需要为每项提供一个唯一的key属性，代表每项的唯一性，不是必须的
<ul id="example-1">
    <li v-for="item in items" :key="item">
        {{ item.message }}
    </li>
</ul>

// v-for块中，拥有对父作用域属性的完全访问权限
<ul id="example-2">
    <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
    </li>
</ul>

// 可以使用of代替in作为分隔符，他是最接近js迭代的语法
<div v-for="item of items"></div>

// 一个对象的v-for,输出为:索引值，属性名，属性值
<div v-for="(value, key, index) in object">
    {{ index }}. {{ key }}: {{ value }}
</div>

// 对象属性的添加或删除
var vm = new Vue({
    data: {
        a: 1,                        // 响应的数据
        userProfile: {
            name: 'Anika'
        }
    }
})
vm.b = 2                              // 不响应的数据
Vue.set(vm.userProfile, 'age', 27)
vm.$set(vm.userProfile, 'age', 27)

// 对已有对象赋予多个属性，使用Object.assign()或_.extend()
Object.assign(vm.userProfile, {                                // 这样不对
  age: 27,
  favoriteColor: 'Vue Green'
})

vm.userProfile = Object.assign({}, vm.userProfile, {            // 这样是对的
  age: 27,
  favoriteColor: 'Vue Green'
})

v-model的使用

<input v-model="message" placeholder="edit me">
<textarea v-model="message" placeholder="add multiple lines"></textarea>

<!-- 单复选框 -->
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>

<!-- 多复选框 -->
<div id='example-3'>
  <input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
  <label for="jack">Jack</label>
  <input type="checkbox" id="john" value="John" v-model="checkedNames">
  <label for="john">John</label>
  <input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
  <label for="mike">Mike</label>
  <br>
  <span>Checked names: {{ checkedNames }}</span>
</div>
new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

<!-- 单选按钮 -->
<div id="example-4">
  <input type="radio" id="one" value="One" v-model="picked">
  <label for="one">One</label>
  <br>
  <input type="radio" id="two" value="Two" v-model="picked">
  <label for="two">Two</label>
  <br>
  <span>Picked: {{ picked }}</span>
</div>
new Vue({
  el: '#example-4',
  data: {
    picked: ''
  }
})

<!-- 下拉选择框单选 -->
<div id="example-5">
  <select v-model="selected">
    <option disabled value="">请选择</option>
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <span>Selected: {{ selected }}</span>
</div>
new Vue({
  el: '...',
  data: {
    selected: ''
  }
})

<!-- 下拉选择框多选 -->
<div id="example-6">
  <select v-model="selected" multiple style="width: 50px;">
    <option>A</option>
    <option>B</option>
    <option>C</option>
  </select>
  <br>
  <span>Selected: {{ selected }}</span>
</div>
new Vue({
  el: '#example-6',
  data: {
    selected: []
  }
})