Vue 内部指令

1、{{message}} 插值表达式    取出Vue中的data（别忘了引入Vue.js）

<script type="text/javascript">
   var app = new Vue({
      el:'#app',
      data:{
        message:'Hello World!'
      }
   })
</script>

2、v-if 、v-else  一对，用来判断是否进行加载（二者加载其一）

<div v-if="isLogin">欢迎您，Leah!</div>
<div v-else="isLogin">请登录！</div>

     v-show 一直都加载  根据内部的判断条件，判断是否要将css样式置为不显示

<div v-show="isLogin">v-show，Leah!</div>

3、v-for 循环  可以使用computed：{} 对其在输出前进行排序

<ul>
    <li v-for="item in Items">
        {{item}}
    </li>
</ul>

4、v-text 直接显示内容

<span v-text="message"></span>

      v-html 可以解析html语言（但不建议使用）

<span v-html="message"></span>

5、v-on button功能监听

<button v-on:click="add">add</button>
<!-或-->
<button @click="add">add</button>

原生写法为：

<button onclick="add()">add</button>

6、v-model 绑定数据 （保证同时修改的为同一数据）

v-model.lazy    鼠标离开文本框的时候出现渲染
v-model.number  如果一开始在文本框中输入的是数字，则只能输数字
v-model.trim    去除空格

7、v-bind 处理html中的标签属性（可以为src进行动态赋值）

<img v-bind:src="imgSrc"/>
<!-或可简写为：-->
<img :src="imgSrc"/>

8、v-pre     原样输出，不渲染

     v-cloak  渲染完成后才显示

     v-once   只第一次渲染