Vue实例与数据绑定

学习之路，长路漫漫，写学习笔记的过程就是把知识讲给自己听的过程。这个过程中，我们去记录思考的过程，便于日后复习，梳理自己的思路。学习之乐，独乐乐，不如众乐乐，把知识讲给更多的人听，何乐而不为呢?

• 项目中解决的问题

Vue实例是Vue框架的入口，也是前端的ViewModel，它包含了页面中的业务逻辑处理、数据模型等，当然也有自身的一系列选项。

• 做题思路

当创建一个Vue实例时，需要传入一个选项对象。下面介绍一下选项对象中的配置项。

el：提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。可以是CSS选择器，也可以是一个HTMLElement实例。示例2中是把示例挂载到id为app的元素中。

router：这里是省略写法，正常应该是router: router，因为属性名和属性值一样，所以省略为router，代表传入路由的实例对象，把配置的路由功能运用到整个项目中。

components：包含Vue实例可用组件的哈希表。

template：一个字符串模板，作为Vue 实例的标识使用。模板将会替换挂载的元素，挂载元素的内容都将被忽略，除非模板的内容有分发插槽。

关于Vue实例介绍完之后，接下来看一下数据（data）的内容。在单文件组件中，data必须是一个函数，它返回一个对象，这个返回的对象的数据供组件实现。

使用Vue-cli新建一个项目，打开项目模板自带的单文件组件HelloWorld.vue

<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<style scoped>
</style>

使用命令提示符窗口切换到项目目录下，运行“npm run dev”命令，启动项目，浏览器运行效果

可以发现返回的对象的数据msg，通过HTML部分的h1标签中的{{ msg }}获得了msg变量的值并进行了显示。那么这里的双层大括号嵌套为什么可以取得变量的值呢，官方称这种双层大括号嵌套为插值表达式。

插值表达式{{… }}可以理解为使用双大括号来包裹JS代码，作用是将双大括号中的数据替换成对应属性值进行展示。

双大括号语法也叫模板语法（Mustache 语法）。Mustache 是一款经典的前端模板引擎，在前后端分离的技术架构下面，前端模板引擎是一种可以被考虑的技术选型。随着前端框架（AngularJS、ReactJS、Vue）的流行，前端的模板技术已经成为某种形式上的标配，Mustache的价值在于其稳定和经典。

经验

关于更多的Mustache方面的技能，请参考Mustache主页。

下面来看插值表达式中可以写入哪些内容。

JSON数据

数字

字符串

插值表达式

<template>
<div class="hello">
<!--json 数据(变量)-->
<h1>{{ msg }}</h1>
<!-- 数字 -->
<p>{{ 10 }}</p>
<!-- 字符串 -->
<h1>{{ "string" }}</h1>
<!-- 表达式 -->
<h1>{{ 1+1 }}</h1>
<h1>{{ 'hello'+name}}</h1>
<h1>{{ 2>3?'true':'false' }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
name:'张三'
}
}
}
</script>
<style scoped>
</style>

在浏览器中运行，显示效果

在插值表达式中需要注意区分变量和字符串，使用引号包裹的为字符串，没有使用引号包裹的，都会被系统解析成变量名或方法名。

在示例4中，使用到了三目运算符（也称三元运算符，即问号冒号表达式，能够代替if else使用），说明可在插值表达式中写入JS代码。但是不推荐在这里写复杂的代码，原因是 MVVM 的设计就是为了使页面和数据进行很好的分离，如果在表达式中写入过多的逻辑代码，那么就违背了最初的设计思想，也会使代码看起来很复杂，难以维护。

Vue框架自带模板引擎，因此在使用Vue框架的过程中不需要再去搭配其他模板引擎，这个自带的模板引擎就是指插值表达式。

生命周期

生命周期的概念可以类比人的成长，人从出生到死亡，要经历很多时期，如童年、少年、青年、中年、老年等，同理Vue实例也有类似的周期。

设定生命周期钩子函数的用途是什么呢？在实例对象从创建到被回收的整个过程中，不同的时期会有不同的钩子函数，可以利用不同时期的钩子函数去完成不同的操作。例如需要在某个时期去获取后台数据、在某个时期去更新数据等。利用生命周期钩子函数可以精准定位到某个时期去完成一些特定的事情。

生命周期函数分类可以参考官方网站的生命周期图示，这个图示比较清晰地展示了Vue实例的整个生命周期的情况。

通过生命周期函数表，对于生命周期函数有了一定的了解，再结合实际的企业开发经验，来介绍几个常用的生命周期函数，以及在这些函数中可以完成的事情。

beforeCreate生命周期函数在组件实例刚被创建的时候增加一些loading事件。

created生命周期函数可以结束 loading事件，完成一些初始化，实现函数自执行等。

mounted是比较重要的生命周期函数，可以发起后端请求，取回数据，接收页面之间传递的参数、由子组件向父组件传递参数等。

下面通过代码来看一下生命周期函数的使用

<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
msg: "Welcome to Your Vue.js App",
name: "张三"
};
},
beforeMount:function(){
console.group("---beforeMount挂载前状态---");
console.log("el:"+this.$el);//已被初始化
console.log("data:"+this.$data);//已被初始化
console.log("msg:"+this.msg);//已被初始化
// 到这个时期,data 和 el 都已经初始化
},
mounted:function(){
console.group("---mounted 挂载后状态---");
console.log("el:"+this.$el);//已被赋值
console.log("data:"+this.$data);//已被初始化
console.log("msg:"+this.msg);//已被初始化
}
};
</script>
<style scoped>
</style>