1.导入vue的库
<script src="https://unpkg.com/vue"></script>
2.程序员万年不变的helloworld
下面贴一下代码（这里贴关键代码，源码见博客最后）
<div id="app">{{ msg }}</div>
var vm=new Vue({
el:"#app" , //id选择器
data:{
msg:"helloworld"
}
});
这样一个简单的helloword就实现了，当然我们并不会仅仅满足这些
3.指令的使用
- v-if
- v-else
- v-show
- v-for
- v-model
- v-on '@'
- v-bind ':'
- v-text
- v-html
- v-cloak
- v-ref
v-if
<div v-if="!flag">用来显示的内容</div>
要注意的问题是v-if指令在做渲染的时候会有元素的卸载和装载的过程，也就是会添加和删除元素的操作，与之类似的有v-show指令下面会介绍到。（通过浏览器控制台查看元素）
v-else
<div v-if="flag">用来显示的内容</div>
<div v-else>else</div>
与v-if配合使用
v-show
<div v-show="!flag">用来显示show的内容</div>
用法和v-if基本一致 但实现原理有区别，v-show只是改变元素css的display属性，v-if则存在删除和添加元素的操作，根据实际情况，若判断的（如上述的flag）真假值会有很多频率的变化选择v-show为宜。
v-for
<ul>
<li v-for="(item,index) in items">
{{ index }}{{ item }}
</li>
</ul>
这里的items是一个数组类型，item是遍历时的别名，index是当前元素的下标
v-model
<div> {{ msg }}</div>
<input type="text" v-model="msg">
v-model用于数据的双向绑定
Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。（摘自vue官网）
v-model的高级用法
<input type="checkbox"
v-model="msg" value="helloworld" name="msgcheck">
<input type="checkbox"
v-model="msg" value="hellovue" name="msgcheck">
注：此时的msg的类型需要时数组类型
v-on
<div v-on:click="fn" >用来测试v-on</div>
用来绑定事件，调用methods中的函数，其简写形式是'@'
v-bind
<div class="div" v-bind:class="{div:!flag}">
用于绑定标签的属性
- v-text
- v-html
v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
[v-cloak] {
display: none;
}
<div v-cloak>
{{ message }}
</div>
不会显示，直到编译结束。