模板语法

• v-html

将vue实例中的数据通过html格式渲染出来，可以解析一些内在样式

• v-if

根据真价值判断是否显示

• v-else-if

充当v-if块，可以连续使用

• v-else

v-if的补充

    <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

功能与v-if类似,如果切换频繁则可以使用show,如果运行时条件很少变动则使用v-if比较好

• v-bind/:特性

将bind后面的特性绑定至当前标签上

<!--初始版本将特性写死在了标签上-->
<a v-bind:href="url">...</a>
<div v-bind:id="dynamicId"></div>

<!--vue2.6.0之后可以动态绑定特性-->
<!--attribute为vue实例data里面的数据值-->
vue.data.attributeName = href;
<a v-bind:[attributeName]="url"> ... </a>

• v-on:click/@click

点击该元素触发相应事件

• v-for

通过循环渲染出数据

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'vue study',
      author: 'ksk',
      publishedAt: '2019-5-18'
    }
  }
})

<!--在这里,value为具体键值,name为健名,index为索引值-->
<div v-for="(value, name, index) in object" v-bind:key="index">
  {{ index }}. {{ name }}: {{ value }}
</div>
<!--显示为-->
0.title: vue study
1.author: ksk
2.publishedAt: 2019-5-18

当数组或者对象产生更新时，vue渲染出的视图往往不会随之更新，而需要我们去维护更新，在这里有以下几个函数可以对其进行更新维护

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

v-model

在类似于表单input,textarea,select元素上创建双向数据绑定

new Vue({
  el: '#v-for-object',
  data: {
    message: "刺激哦，小老弟！",
    checkdNames: [],
    picked: '',
    selected: ''/[]
  }
})

<!--输入框-->
<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

<!--单个复选框-->
<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>

<!--单选按钮-->
<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>

<!--选择按钮-->
<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>