Vue语法template是模板，这里面是XML语言，其标签必须是闭合的。原因：因为XML更加严谨，降低编译器的编写复杂

组成部分

<script>
  export default{
      data(){
      m:0
      }
  }
</script>

1，内容展示语法：插值、v-text、v-html、v-pre

注意：如果值为null、undefined,则vue不会将它们渲染到视图中

<div v-html="<strong>hi</strong>"></div> 插入一段strong标签

<div v-pre>{{ n }}</div>就是简单的 {{n}} 字符串。

<div v-text="n+2"></div>=<div>{{n+1}}</div>

2，绑定属性：v-bind:

语法：v-bind:参数='值'
绑定属性：<img v-bind:src='x'/>，冒号后面的值默认是JS表达式，所以这里的x是JS表达式，会先求x的变量然后赋值给src。
v-bind简写: ,<img v-bind:src='x'/>=<img :src='x'/>
绑定一个对象：<div :style="{border:1px solid red , height:100}"></div>vue中的CSS样式单独单位默认是px

3,绑定事件：v-on:

语法：v-on:事件类型='处理函数'，处理函数有3种类型，函数名、JS表达式、函数调用态
处理函数名：<button v-on:click='add'>按钮</button>点击后触发add函数。
处理js表达式：<button v-on:click='n+=1'>按钮</button>
处理函数调用态：<button v-on:click='add(1)'>按钮</button>这里add(1)并不是直接调用，点击之后才会调用add(1) 。注意如果返回的如果是一个函数，而使用者希望把这个返回的函数作为处理函数的话，Vue并不能实现这个功能。
简写：v-on简写为@,<button v-on:click='add'>按钮</button>=<button @click='add'>按钮</button>

4,条件判断：v-if、v-else-if、v-else

根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是 <template> ，将提出它的内容作为条件块。

注意v-else-if、v-else的使用前提的是：前一兄弟元素必须有 v-if 或 v-else-if。

5，循环：v-for(value,key) in object/array

value就是每一项的值；key意为关键字：在对象中是每一项的属性名，而在array中则是索引注意：使用循环时一定要在后面绑定一个 key属性，这个key和上面所说的key不是一个意思，这个绑定的key属性可以是数组的索引，也可以是唯一的id（key属性的值必须是唯一的），如：:key='u.id'，最好别用数组的索引作为为key的值，某些情况有bug。

v-show：通过改变元素css样式中的display来切换显示与隐藏。

v-if：通过是否渲染元素到html结构中来实现显示与隐藏。

如果在实际使用上显示与隐藏的切换比较频繁，使用v-show可以节省性能；反之是用v-if比较合适。

注意这个指令对DOM元素的渲染是通过改变display为none或其他来实现的。注意不是所有看得见的元素都是 display:block；table的display是table；li的display是list-item。

1，v-on

.{keyCode|keyAlias} 指定按键（可以用keyCode指定，也可以通过Vue提供的按键别称指定）被按下时触发事件
.stop禁止事件传播（冒泡或者捕获）
.prevent禁止默认事件

示例：

<a @click.prevent>click</a> <!--禁止a标签的默认行为-->
<div @click.stop=add><div> <!--阻止事件传播\冒泡-->
<a @click.stop.prevent=add><a> <!--阻止事件传播\冒泡及默认行为-->