模板语法：
以下写法是正确的写法
<span>{{ msg }}</span>
<div>
//一元运算符
<p>hello {{`world + '!'`}} </p>
//模板字符串
<p>{{`hello${world}!`}} </p>
//三元运算符
<p>{{ true ? 'yes' : 'no' }}</p>
//字符串操作
<p>{{ message.split('').reverse().join('') }}</p>
</div>指令：
v-text
<span v-text="msg"></span>
//和下面一样
<span>{{msg}}</span>v-html
为了输出真正的HTML，你需要使用v-html指令，可以类比js的innerHtml属性：
<div v-html="rawHtml"></div>这个div的内容将会被替换成属性值rawHtml，直接作为html进行渲染。
值得注意的是，在网站上动态渲染任意HTML是非常危险的，因为容易导致XSS攻击。
v-pre
v-pre主要用来跳过这个元素和它的子元素编译过程，可以用来显示原始的标签。
<div>
<span v-pre>{{message}}</span>
<span>{{message}}</span>
</div>第一个span里的内容不会被编译显示为{{message}}，第二个span里面的内容会被编译，显示为hello world。
v-cloak:
使用 vuejs 做了一个简单的功能页面，逻辑是，页面加载后获取当前的经纬度，然后通过 ajax 从后台拉取附近的小区列表。但是 bug 出现了，在显示小区列表之前，会闪现小区名对应的 vuejs 变量名。
案发现场的 HTML 代码
<ul v-for="item in items">
<li>{{ item.name }}</li>
</ul>页面加载时，会闪现
{{ item.name }}v-cloak 可以解决这个问题，非常简单
HTML 修改成
<ul v-cloak v-for="item in items">
<li>{{ item.name }}</li>
</ul>CSS 中添加
[v-cloak] {
display: none;
}v-once：
v-once在日常开发中用的很多，只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当作静态内容并跳过，这可以用于优化更新性能。
<section id="content">
插值:
<p id="Mustache">{{msg}}</p>
<p>v-once:当数据改变时，插值处的内容不会更新</p>
<span v-once>{{msg}}</span>
</section>v-if
<template v-if="ok">
<h1>title</h1>
<p>title</p>
</template>
//v-else
<a v-if="ok">yes</a>
<a v-else>no</a>
//v-else-if
<div id="app5">
<div v-if="status == 'loading'">
<div style="background-color:blue">loading</div>
</div>
<div v-else-if="status === 'success'">
<div style="background-color:green">success</div>
</div>
<div v-else="status == 'fail'">
<div style='background-color:red'>fail</div>
</div>
</div>
v-show
<p v-show="ok">v-show</p>v-for
<ul>
<li v-for="tab in tabs">
{{ tab.text }}
</li>
</ul>v-for也可以用在template中
对象遍历属性
<ul id="vfor">
<template v-for="item in object">
<li v-bind:key="item.id">{{item}}</li>
<li v-bind:key="item.id">-------</li>
</template>
</ul>
为了提高vue更新DOM的性能，你需要为每一项提供一个唯一的key属性，有了相同父元素的子元素必须有独特的key， 重复的key会造成渲染错误。