Vue模板语法（二）

v-bind
v-modle底层既用了v-bind:value绑定了数据, 又用v-on:input添加了一个事件监听实现双向数据响应, input 有个 oninput 事件，值一变就触发了func方法

<input type="text" v:bind:value="msg" v-on:input="func()" />
func方法里面改变msg的值

v-bind 指令被用来响应地更新 HTML 属性
v-bind:href 可以缩写为 :href;

<img v-bind:src="imageSrc">
<!-- 缩写 --> <img :src="imageSrc">

我们可以给v-bind:class 一个对象，以动态地切换class。
注意：v-bind:class指令可以与普通的class特性共存

绑定对象和绑定数组 的区别
绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
绑定数组的时候数组里面存的是data 中的数据

绑定style
v-bind:style=“styleObject” 绑定样式对象

styleObject: { color: ‘green’, fontSize: ‘30px’, background:‘red’ }，

分支结构 v-if 使用场景
1- 多个元素 通过条件判断展示或者隐藏某个元素。或者多个元素
2- 进行两个视图之间的切换

<div id="app">
 <!-- 判断是否加载，如果为真，就加载，否则不加载--> 
 <span v-if="flag"> 如果flag为true则显示,false不显示!</span> </div> 

<script> var vm = new Vue({ el:"#app", data:{flag:true } }) </script> 
<div v-if="type === 'A'"> A </div> 
<!-- v-else-if紧跟在v-if或v-else-if之后 表示v-if条件不成立时执行-->
 <div v-else-if="type === 'B'"> B </div> 
 <div v-else-if="type === 'C'"> C </div>
  <!-- v-else紧跟在v-if或v-else-if之后--> 
  <div v-else> Not A/B/C </div>

 <script> new Vue({ el: '#app', data: { type: 'C' } }) </script>

v-show 和 v-if的区别
v-show本质就是标签display设置为none，控制隐藏
v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
v-if是动态的向DOM树内添加或者删除DOM元素
v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

循环结构
v-for
用于循环的数组里面的值可以是对象，也可以是普通元素
对象为键值对形式，数组为数组.属性方式

<ul id="example-1">

 <!-- 循环结构-遍历数组 item 是我们自己定义的一个名字 代表数组里面的每一项 items对应的是 data中的数组--> 
 <li v-for="item in items"> {{ item.message }} </li> </ul> 

<script> new Vue({
 el: '#example-1', 
 data: { items: [ { message: 'Foo' }, { message: 'Bar' } ]， } })</script>
 
不推荐同时使用 v-if 和 v-for 当 v-if 与 v-for 一起使用时， v-for 具有比 v-if 更高的优先级。

<!-- 循环结构-遍历对象 v 代表对象的value， k 代表对象的 键items ，i 代表索引 从0开始递增---> 
<div v-if='v==13' v-for='(v,k,i) in obj'>{{v + '---' + k + '---' + i}}</div> 

<script> new Vue({ 
el: '#example-1', 
data: { items: [ { message: 'Foo' }, { message: 'Bar' } ]，
obj: {uname: 'zhangsan', age: 13, gender: 'female' } } })</script> 

key 的作用
key来给每个节点做一个唯一标识

key的作用主要是为了高效的更新虚拟DOM
<ul><li v-for="item in items" :key="item.id">...</li> </ul>