推荐教程 :
Vue.js官网
 Vue.js视频教程

1.Vue.js 介绍

Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

2.Vue.js 引入(安装)

1.直接用 script 引入(新手推荐)

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

2.npm

# 最新稳定版
$ npm install vue

3.Vue开发工具(强烈推荐)

HBuilderx

4. Hello Vue

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>title</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
		  {{ message }} 
		</div>
		
		<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello Vue!'
			}
		});
		</script>
		
	</body>
</html>

5. 数据与方法

当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello Vue</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{a}}
		</div>
		
		<script type="text/javascript">
		var data = { a : 1 };
		var vm = new Vue({
			el   : "#app",
			data : data
		});
		
		// 监听事件-监听变量 'a' 值的变化
		vm.$watch('a', function(newVal, oldVal){
			console.log(newVal, oldVal);
		})
		
		vm.$data.a = "old data"
		
		</script>
		
	</body>
</html>

6. 实例生命周期钩子

在不同生命周期执行(插入)自定义的操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello Vue</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{msg}}
		</div>
		<script type="text/javascript">
		var vm = new Vue({
			el : "#app",
			data : {
				msg : "hi vue",
			},
			//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
			beforeCreate:function(){
				console.log('beforeCreate');
			},
			/* 在实例创建完成后被立即调用。
			在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。
			然而，挂载阶段还没开始，$el 属性目前不可见。 */
			created	:function(){
				console.log('created');
			},
			//在挂载开始之前被调用：相关的渲染函数首次被调用
			beforeMount : function(){
				console.log('beforeMount');
		
			},
			//el 被新创建的 vm.$el 替换, 挂在成功	
			mounted : function(){
				console.log('mounted');
			
			},
			//数据更新时调用
			beforeUpdate : function(){
				console.log('beforeUpdate');
					
			},
			//组件 DOM 已经更新, 组件更新完毕 
			updated : function(){
				console.log('updated');
					
			}
		});
		setTimeout(function(){
			vm.msg = "change ......";
		}, 3000);
		</script>
		
	</body>
</html>

传送门: 生命周期钩子API

7.模板语法

Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

<1>.模板语法-插值

[1].插入文本

<div id="app">
	 Message: {{ message }}
</div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello Vue</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
		  Message: {{ message }}
		</div>
		
		<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				message: 'Hello Vue!'
			}
		});
		</script>
		
	</body>
</html>

一次性地插值

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定

<span v-once>这个将不会改变: {{ msg }}</span>

[2].插入原始 HTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html

<div id="app">
	文本: {{ message }}
	<br />
	原始 HTML: <span v-html="message"></span>
</div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello Vue</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
		  文本: {{ message }}
		  <br />
		  原始 HTML: <span v-html="message"></span>
		</div>
		
		<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				message : '<span style="color:red">Hello Vue</span>',
			}
		});
		</script>
		
	</body>
</html>

[3].插入属性(Attribute)

属性(Attribute)：是HTML标签上的某个属性，如id、class、value等以及自定义属性，它的值只能是字符串，关于这个属性一共有三个相关的方法，setAttribute、getAttribute、removeAttribute；

传送门: HTML中的attribute属性和JavaScript中的property属性的详解以及区别

Mustache 语法不能作用在 HTML 属性上，遇到这种情况应该使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello Vue</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<style type="text/css">
			.red{color:red;}
		</style>
		
		<div id='app' v-bind:class="color">Hello Vue</div>
		
		<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				color : 'red',
			}
		});
		</script>
		
	</body>
</html>

对于布尔 attribute (它们只要存在就意味着值为 true)，v-bind 工作起来略有不同，在这个例子中：

<button v-bind:disabled="isButtonDisabled">Button</button>

如果 isButtonDisabled 的值是 null、undefined 或 false，则 disabled attribute 甚至不会被包含在渲染出来的元素中。

[4].使用 JavaScript 表达式

Vue.js 提供了完全的 JavaScript 表达式支持。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

<div v-bind:id="'list-' + id"></div>

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

<2>.模板语法-指令

指令 (Directives) 是带有 v- 前缀的特殊属性( attribute)。指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)

指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。

<p v-if="seen">现在你看到我了</p>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello Vue</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		
		<p v-if="seen">现在你看到我了</p>
		
		<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				seen: true,
			}
		});
		</script>
		
	</body>
</html>

控制台执行 app.$data.seed = false

[1].参数

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML attribute,在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello Vue</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id='app'>
			<a v-bind:href="url">一个平凡de人的博客</a>
		</div>
		
		<script type="text/javascript">
		var app = new Vue({
			el: '#app',
			data: {
				url : "https://blog.csdn.net/weixin_46703850?spm=1000.2115.3001.5343",
			}
		});
		</script>
	</body>
</html>

另一个例子是 v-on 指令，它用于监听 DOM 事件：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello Vue</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<div id='app'>
			<button @click="click1">一个平凡de人的博客</button>
		</div>


		<script type="text/javascript">
			var app = new Vue({
				el: '#app',
				data: {
					url: "https://blog.csdn.net/weixin_46703850?spm=1000.2115.3001.5343",
				},
				methods: {
					click1: function() {
						console.log('click 一个平凡de人的博客');
					}
				}
			});
		</script>
	</body>
</html>

点击按钮

[2].动态参数

动态参数: 也就是可变的参数如

 <p v-bind:id="mydata"></p>

可变为

 <p v-bind:class="mydata"></p>

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<!--注意，参数表达式的写法存在一些约束-->
<a v-bind:[attributeName]="url"> ... </a>

其中[attributeName]可动态变化
同样地，你可以使用动态参数为一个动态的事件名绑定处理函数：

<a v-on:[eventName]="doSomething"> ... </a>

[3].修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<form v-on:submit.prevent="onSubmit">...</form>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello Vue</title>
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
	</head>
	<body>
		<body>
		        <div id='app'>
		            <div @click="click1">
		            	<div @click="click2">
		            		click me
		            	</div>
		            </div>
		        </div>
		    </body>
		    <script>
		        var vm = new Vue({
		            el:"#app",
		            data:{
		                msg:100
		             },
		            methods:{
		            	click1 : function () {
		            		console.log('click1......');
		            	},
		            	click2 : function () {
		            		console.log('click2......');
		            	}
		            }
		        })
		    </script>
	</body>
</html>

<div id='app'>
	<div @click="click1">
		<div @click.stop="click2">
			click me
		</div>
	</div>
 </div>

<3>. 缩写

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>

v-on 缩写

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>