一、Vue.js安装教程
方法一：去 Vue.js 的官网上直接下载 vue.min.js 放到你的项目目录下， 并用<script>标签引入。
链接地址：https://cn.vuejs.org/v2/guide/installation.html。
方法二：使用CDN，在HTML文件头部引入
<script src="https://unpkg.com/vue/dist/vue.js"></script>二、Vue常用语法
更多详细教程见官网api，链接：https://cn.vuejs.org/v2/api
Vue主要由2大块组成：指令、组件，今天先了解指令（组件以后再详细介绍），首先了解一下文本插值，{{…}}（双大括号）将会是以后学习过程中最常用到的符号，{{ }}内可以用来绑定属性、绑定JS的表达式，举个例子：
<div id="test1">
<span>{{"你好，我今年"+(message+2)+"岁了"}}</span>
</div>
<script type="text/javascript">
new Vue({
el: '#test1',
data: {
message: 1
}
})
</script>打印结果：你好，我今年3岁了。
括号里的内容可以是简单的数学表达式，也可以是字符串拼接，官方给的标准是支持所有JavaScript 表达式，但只能操作文本。要操作节点就需要使用指令，指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM（之前介绍过Vue与响应式），Vue的指令都是以属性的方式添加的。
注意使用Vue时，HTML代码部分，必须要有一个大的容器来包裹你要操作的内容，并且给这个容器加一个id，以便js操作。Js部分，知道面向对象的都应该比较熟悉这种操作方式，new出来一个Vue函数实例，然后传参。具体套路就是
HTML部分：
<div id=”test”>
<span></span>
<div></div>
</div>JS部分：
new Vue（{
el:”#test”，
data：{
message:””
}
}）；一定要注意的细节就是id名前面一定要有#号，还有Vue的第一个字母一定要大写，因为传入的数据是{}json格式，所以一定要用逗号隔开。
1、v-html
这个指令是用来插入标签的。原生JS插入一个dom节点是很麻烦的，但是Vue帮我们简化了这个步骤。
<div id="test3">
<div v-html="msg"></div>
</div>
<script type="text/javascript">
new Vue({
el:"#test3",
data:{
msg:'<span>你好，我是通过v-html插入进来的</span>'
}
});
</script>打开控制台会发现多了一个标签。
2、v-model
这个指令仅用于表单控件，<input>、<select>、<textarea>，可以很轻松的实现表单控件和数据的双向绑定。
<div id="test6">
<textarea type="" name="" v-model="msg"></textarea>
<br>
<span>{{msg}}</span>
</div>
<script type="text/javascript">
new Vue({
el:"#test6",
data:{
msg:"我输出什么，它就跟着我输出什么"
}
});
</script>3、v-show
切换元素的 display CSS 属性来显示隐藏目标。
<div id="test4">
<p v-show="msg">我可以隐藏</p>
</div>
<script type="text/javascript">
new Vue({
el:"#test4",
data:{
msg:true
}
});
</script>将msg的值改为false
4、v-if
好玩儿的来了。下面我会配合几个指令做一个点击显示隐藏的效果
<div id="test5">
<button v-on:click="eventByZM">点我</button>
<div v-if="switchByZM" class="show1"></div>
<div v-else class="show2"></div>
</div>
<script type="text/javascript">
new Vue({
el:'#test5',
data:{
switchByZM:true
},
methods:{
eventByZM(){
this.switchByZM = !this.switchByZM
}
}
});
</script>顺便可以感受一下jQuery写的点击切换
<button id="btn">点我</button>
<div class="show1"></div>
<div class="show2"></div>
<script type="text/javascript">
var ready = true;
$('.show2').css("display","none")
$('#btn').on('click',function(){
if(ready){
$('.show1').css("display","none")
$('.show2').css("display","block")
ready = false;
}else{
$('.show2').css("display","none")
$('.show1').css("display","block")
ready = true;
}
});
</script>之前有说过jQuery会频繁操作dom节点，造成浏览器性能问题，这里就可以看出来了。
这里用了三个指令：v-on:click，v-if，v-else。
v-on : click 可以简写为@click，它是用来绑定事件的，Vue最新版本支持的事件有
.stop - 调用 event.stopPropagation()。
.prevent - 调用 event.preventDefault()。
.capture - 添加事件侦听器时使用 capture 模式。
.self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。
.{keyCode | keyAlias} - 只当事件是从特定键触发时才触发回调。
.native - 监听组件根元素的原生事件。
.once - 只触发一次回调。
.left - (2.2.0) 只当点击鼠标左键时触发。
.right - (2.2.0) 只当点击鼠标右键时触发。
.middle - (2.2.0) 只当点击鼠标中键时触发。
.passive - (2.3.0) 以 { passive: true } 模式添加侦听器
v-if和v-else一般成对出现，注意一点，v-if和v-show的区别在于，v-if在切换时元素及它的数据绑定 / 组件会被销毁并重建，而v-show是切换它的display css样式，两者是不同的。
5、V-bind
V-bind可以直接简写为：，这个属性常用于<a>标签的href属性，<img>标签的src属性
<div id="test7">
<a :href="taobao">淘宝</a>
</div>
<script type="text/javascript">
new Vue({
el:"#test7",
data:{
taobao:"https://www.taobao.com/"
}
});
</script>以后会经常用到。
6、v-text
v-text这个指令，我的理解就是它是用来复制指定文本用的
<div id="test2">
<span v-text="msg"></span>
<!-- 和下面的一样 -->
<p>{{msg}}</p>
<p>{{msg}}</p>
<p>{{msg}}</p>
<p>{{msg}}</p>
</div>
<script type="text/javascript">
new Vue({
el:"#test2",
data:{
msg:"你好，我是指令v-text"
}
});
</script>打印结果：
你好，我是指令v-text
你好，我是指令v-text
你好，我是指令v-text
你好，我是指令v-text
你好，我是指令v-text
常用的指令大概就是这几个。官网的教程比较详细，为了方便理解，我都把简化版的练习代码放在文章里面了，有空的话还是建议自己敲一遍加深理解。