Vue快速入门(二)《快乐Vue》
基础特性
实例及选项
使用 Vue 前必须先实例化，即 new Vue({})
一个 Vue 实例相当于MVVM模式中的ViewModel
在实例化的时候我们可以传入选项对象，该对象可以包含挂载元素（el）、数据（data）、模板（template）、方法（methods）、生命周期钩子等选项，下面一一介绍。
模板
作用：将 HTML 从 js 中分离出来
el：字符串类型，为实例提供挂载的元素
template：字符串类型，默认会将template的值替换到挂载的元素，并合并挂载元素和模板节点的属性（如果属性具有唯一性，则以模板节点的为准）。
Vue.js 2.0 中废除了 replace 这个参数，并且强制要求每一个 Vue.js 实例需要有一个根元素。
实例代码 template.html：
<!DOCTYPE html>
<html>
<head>
<title>template</title>
<meta charset="utf-8">
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>我是将要被template替换的内容</p>
</div>
<!--定义模板（template）-->
<script id="tp" type="x-template">
<div id="tpDiv">
<h2>我是template替换后的内容</h2>
</div>
</script>
<script type="text/javascript">
new Vue({
el: "#app",
template: "#tp"
})
</script>
</body>
</html>
运行结果如下：
运行结果.png
运行后的 HTML 结构为：
运行后的HTML结构.png
可见原内容已经被template替换掉了，试想一下如果用原生js应该怎么实现。
数据
Vue.js 实例中可以通过 data 属性定义数据，这些数据可以在实例对应的模板中进行绑定并使用。
Vue 实例会代理起 data 对象里的所有属性，而不会对传入的对象进行深拷贝。另外，我们也可以引用 Vue 实例 vm 中的 $data 来获取声明的数据.
示例：
<!DOCTYPE html>
<html>
<head>
<title>template</title>
<meta charset="utf-8">
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<script type="text/javascript">
var data = {name: "zhangsan"} //定义数据对象data
//创建一个Vue实例
var vm = new Vue({
data: data
})
alert(vm.$data === data) //true
console.log(vm.$data === data) //true
vm.name === "zhangsan" //true
vm.name = "lisi"
alert(data.name) //lisi
data.name = "wangwu"
alert(vm.name) //wangwu
</script>
</body>
</html>
在模板文件中使用插值符号{{name}}可以在页面输出相应的值，而且在修改了name的值后，页面上的值也会随之改变。
示例：
<!DOCTYPE html>
<html>
<head>
<title>template</title>
<meta charset="utf-8">
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{name}}</h1>
</div>
<script type="text/javascript">
var data = {name: "zhangsan"} //定义数据对象data
//创建一个Vue实例
var vm = new Vue({
el: "#app", //通过id绑定模板
data: data
})
vm.name = "lisi"
alert(data.name) //lisi
data.name = "wangwu"
alert(vm.name) //wangwu
</script>
</body>
</html>
方法
通过 Vue 实例的methods属性来定义方法，并通过v-on或@来监听DOM事件（绑定事件）
示例：
<!DOCTYPE html>
<html>
<head>
<title>template</title>
<meta charset="utf-8">
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" style="text-align:center">
<h1>点击了{{count}}次</h1>
<!-- v-on:click 绑定点击事件 -->
<input type="button" name="" v-on:click="clickHandle" value="click me （v-on:click）">
<!-- @click 绑定点击事件 -->
<input type="button" name="" @click="clickHandle" value="click me （@click）">
</div>
<script type="text/javascript">
var data = {count: 0} //定义数据对象data
//创建一个Vue实例
var vm = new Vue({
el: "#app",
data: data,
methods: {
//定义点击处理事件clickHandle
clickHandle: function(){
return this.count += 1
}
}
})
</script>
</body>
</html>
生命周期
引用下官网的图
生命周期.png
Vue.js 实例在创建时有一系列的初始化步骤，例如建立数据观察，编译模板，创建数据绑定等。在此过程中，我们可以通过一些定义好的生命周期钩子函数（vue自生定义好的一些方法，并且在vue的生命周期中会自动执行）来运行业务逻辑。例如：
<!DOCTYPE html>
<html>
<head>
<title>template</title>
<meta charset="utf-8">
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<div id="app" style="text-align:center">
<h1>created===========>{{message}}</h1>
</div>
<script type="text/javascript">
var data = {message: ""} //定义数据对象data
//创建一个Vue实例
var vm = new Vue({
el: "#app",
data: data,
created: function(){
this.message = "调用了生命周期钩子created"
}
})
</script>
</body>
</html>
浏览器打开该页面可以看见，页面显示 created===========>调用了生命周期钩子created
说明vue自动执行了created,下面看看都有哪些钩子以及对应的作用吧。
init：vue实例初始化时开始调用，此时的数据、事件等都还没有初始化，2.0 中改名为beforeCreate。
created：实例创建之后调用。当前已经完成数据绑定、和事件方法。但是还没有挂载到DOM中。
beforeCompile: 在 DOM 编译前调用。2.0 废弃了该方法，推荐使用 created。
beforeMount: 2.0 新增的生命周期钩子，在 mounted 之前运行。
compiled: 在编译结束时调用。此时所有指令已生效，数据变化已能触发 DOM 更新，但不保证 $el 已插入文档。2.0 中更名为 mounted
ready ：在编译结束和 el首次插入文档后的钩子函数。
beforeDestroy: 在开始销毁实例时调用，此刻实例仍然有效。
destroyed: 在实例被销毁之后调用。此时所有绑定和实例指令都已经解绑，子实例也被销毁。
beforeUpdate: 2.0 新增的生命周期钩子，在实例挂载之后，再次更新实例（例如更新data）时会调用该方法，此时尚未更新 DOM 结构
updated:2.0 新增的生命周期钩子，在实例挂载之后，再次更新实例并更新完 DOM 结构后调用
activated ：2.0 新增的生命周期钩子，需要配合动态组件 keep-live 属性使用。在动态组件初始化渲染的过程中调用该方法。
deactivated ：2.0 新增的生命周期钩子，需要配合动态组件 keep-live 属性使用。在动态组件移出的过程中调用该方法。
举个例子，看下各自执行的顺序
<!DOCTYPE html>
<html>
<head>
<title>vue生命周期</title>
<meta charset="utf-8">
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<div id="app" style="text-align: center;">
<h2>{{count}}</h2>
<input type="button" name="" value="update count" @click="clickHandle">
</div>
<body>
<script type="text/javascript">
var data = {count : 0};
//创建一个Vue实例
var vm = new Vue({
el: "#app",
data: data,
methods:{
clickHandle: function(){
if(this.count == 2){
vm.$destroy()
alert("Vue destroyed")
}
return this.count += 1
}
},
beforeDestroy: () => console.log("执行了====>beforeDestroy"),
created: () => console.log("执行了====>created"),
beforeCreate: () => console.log("执行了====>beforeCreate"),
mounted: () => {
console.log("执行了====>mounted")
//this.$destroy()
},
destroyed: () => console.log("执行了====>destroyed"),
beforeUpdate: () => console.log("执行了====>beforeUpdate"),
updated: () => console.log("执行了====>updated"),
activated: () => console.log("执行了====>activated"),
deactivated: () => console.log("执行了====>deactivated")
})
</script>
</body>
</html>
点击按钮三次控制台打印出如下结果：
生命周期实例运行结果.png
