1 Vue介绍
1.1 官方介绍
vue是一个简单小巧的渐进式的技术栈，它提供了Web开发中常用的高级功能：视图和数据的解耦、组件的服用、路由、状态管理、虚拟DOM
说明：简单小巧 -> 压缩后只有几十KB。 渐进式 -> 在利用vue进行前端项目开发时不必要一开始就使用所有vue提供的东西，而是根据开发需求循序渐进的添加vue提供的功能，这一点和angular恰恰相反（利用angular开发前端时需要将其核心模块的所有东西都先添加到项目中去）。
1.2 开发模式
vue采用MVVM模式进行开发（和angular采用的开发模式相同），View和ViewModel通过双向绑定建立联系；开发者再利用vue进行前端项目开发时只需要关注数据部分即可，DOM相关的事情vue会帮我们搞定
2 如何使用vue
2.1 引入Vue.js文件
利用script标签直接加载vue.js的CDN文件
<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
技巧01：上面的语句会自动识别最新且稳定的Vue.js；也可义在vue后面添加版本来加载指定版本的vue.js，例如
<script src="https://unpkg.com/vue@2.1.6/dist/vue.min.js"></script>
2.2 创建Vue实例
<script>
new Vue({
el: '#book',
data: {
books: [
{name: '《Angular2揭秘》'},
{name: '《Angular2开发实战》'},
{name: '《Angular2从0到1》'},
{name: '《Vue.js实战》'}
]
}
});
</script>
技巧01：创建Vue实例的JS代码必须写在body中，加载vue.js的JS代码写在head或者body中都可以
2.3 编写HTML代码
<div id="book">
<ul>
<li v-for="book in books">{{ book.name }}</li>
</ul>
</div>
2.4 代码汇总
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Vue01</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="https://unpkg.com/vue@2.1.6/dist/vue.min.js"></script>
</head>
<body>
<div id="book">
<ul>
<li v-for="book in books">{{ book.name }}</li>
</ul>
</div> <script>
new Vue({
el: '#book',
data: {
books: [
{name: '《Angular2揭秘》'},
{name: '《Angular2开发实战》'},
{name: '《Angular2从0到1》'},
{name: '《Vue.js实战》'}
]
}
});
</script>
</body>
</html>
HTML
2.5 效果展示
3 创建Vue
利用Vue构造函数就可以创建一个Vue的根实例并启动Vue应用，例如
var dataBinding = new Vue({
el: '#dataBinding',
data: {
name: ''
}
});
代码解释：
Vue类提供了很多属性和方法，这里的el和data都是属性；所以在创建Vue实例的时候可以同时初始化这些属性和方法
技巧01：创建Vue实例时el是必填的属性，因为一个Vue实例必须和页面中某个DOM元素对应起来，el就是实现DOM元素和Vue实例的挂载的
4 数据绑定
在元素中使用v-model可以将元素和Vue实例提供的数据进行双向绑定，例如
<input type="text" id="name" v-model="name" placeholder="请输入你的姓名" >
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Vue01</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="https://unpkg.com/vue@2.1.6/dist/vue.min.js"></script>
</head>
<body>
<div id="dataBinding">
<label for="name">姓名：</label>
<input type="text" id="name" v-model="name" placeholder="请输入你的姓名" >
<br />
<h3>Hello, {{ name }}.</h3>
</div> <script>
var dataBinding = new Vue({
el: '#dataBinding',
data: {
name: 'warrior'
},
create: function() { },
mounted: function() {
console.log("=====start=====");
console.log(this.name);
console.log(this.$el);
console.log("=====end=====");
},
beforeDestroy() { }
});
</script>
</body>
</html>
5 Vue对象的生命周期
生命周期就是指在Vue实例从开始被创建到最后被消亡的的过程中需要经历的几个阶段，常用的生命周期钩子有：
5.1 create
Vue实例完成后调用，此阶段完成的数据的观测，但是并未完成DOM元素与Vue实例之间的挂载，常常用于数据初始化
5.2 mounted
el将Vue实例挂载到DOM元素后调用，常常用于处理第一个业务逻辑
5.3 beforeDestroy
Vue实例被销毁之前调用，常常用于解绑一些addEventListener监听的事件
5.4 实例代码
var dataBinding = new Vue({
el: '#dataBinding',
data: {
name: 'warrior'
},
create: function() {
},
mounted: function() {
console.log("=====start=====");
console.log(this.name);
console.log(this.$el);
console.log("=====end=====");
},
beforeDestroy() {
}
});
5.5 效果展示
6 插值与表达式
插值就是： {{ }}
表达式就是：跟angular的模板表达式类似，详情参见P160《Angular2揭秘》
技巧01：插值和表达式通常一起使用，{{ 表达式 }}
6.1 插值、表达式、生命周期的综合应用
需求：每间隔一秒就进行刷新的时间显示
<div id="time">
<h3>{{date}}</h3>
</div> <script>
var app = new Vue({
el: '#time',
data: {
date: new Date()
},
mounted: function() {
var _this = this;
this.timer = setInterval(function() {
_this.date = new Date();
}, 1000);
},
beforeDestroy: function() {
if (this.timer) {
clearInterval(this.timer);
}
}
});
</script>
代码说明：
var _this = this; -> this指向的是Vue实例，由于JS中存在作用域的问题，所以在方法中需要定义一个变量来指向Vue实例；如果在某个方法中直接使用this，那么这个this可能不是指向的Vue实例而是指向的该方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Vue01</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="https://unpkg.com/vue@2.1.6/dist/vue.min.js"></script>
</head>
<body>
<div id="time">
<h3>{{date}}</h3>
</div> <script>
var app = new Vue({
el: '#time',
data: {
date: new Date()
},
mounted: function() {
var _this = this;
this.timer = setInterval(function() {
_this.date = new Date();
}, 1000);
},
beforeDestroy: function() {
if (this.timer) {
clearInterval(this.timer);
}
}
});
</script> </body>
</html>
6.2 输出特例
6.2.1 输出HTML
在元素中利用 v-html 指令就可以将 Vue实例中的数据按照 HTML格式进行输出，这样就会将表达式的值作为用了v-html指令元素的子元素
6.2.2 原样输出
直接将 {{ 表达式 }} 进行原样输出只需要在对应元素上添加 v-html 指令即可
不添加 v-html 的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Vue01</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="https://unpkg.com/vue@2.1.6/dist/vue.min.js"></script>
</head>
<body>
<span id="app">{{ link }}</span> <script>
var app = new Vue({
el: '#app',
data: {
link: '<a href="http://www.baidu.com">百度链接</a>'
}
});
</script> </body>
</html>
添加 v-html 的效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Vue01</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="https://unpkg.com/vue@2.1.6/dist/vue.min.js"></script>
</head>
<body>
<span v-pre id="app">{{ link }}</span> <script>
var app = new Vue({
el: '#app',
data: {
link: '<a href="http://www.baidu.com">百度链接</a>'
}
});
</script> </body>
</html>
7 指令与事件
7.1 指令
指令的作用就是扩展元素的功能
7.2 事件绑定
就是DOM元素的某一事件被触发后执行一些操作，利用 v-on 去绑定事件
7.3 指令和事件的综合运用
需求：点击显示和隐藏按钮分别可以实现时间的显示和隐藏功能
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Vue01</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<script src="https://unpkg.com/vue@2.1.6/dist/vue.min.js"></script>
</head>
<body>
<div id="time">
<div v-if="showDate">
<label for="currentDate">当前时间：</label>
<span id="currentDate">{{date}}</span>
</div>
<div>
<button v-on:click="onAppear" >显示</button>
<button v-on:click="onDisappear">隐藏</button>
</div>
</div> <script>
var app = new Vue({
el: '#time',
data: {
date: new Date(),
showDate: true
},
mounted: function() {
var _this = this;
this.timer = setInterval(function() {
_this.date = new Date();
}, 1000);
},
beforeDestroy: function() {
if (this.timer) {
clearInterval(this.timer);
}
},
methods: {
onAppear: function() {
this.showDate = true;
},
onDisappear: function() {
this.showDate = false;
}
}
});
</script> </body>
</html>
7.4 语法糖
v-bind： 和 v-on： 可以用 ： 和 @ 来代替，例如
<div>
<a v-bind:href="url">百度01</a>
<br />
<a :href="url">百度02</a>
<br />
<button v-on:click="onClick">测试01</button>
<button @click="onClick">测试02</button>
</div>
