写在前面

今天上午偶然间又接触到了这个名词，就也想去看一下，大致看完便写下了这篇笔记。

什么是Vue？

Vue是一套前端框架，免除了JavaScript中的DOM操作，简化了书写，而且是基于MVVM的思想，实现了数据的双向绑定，将编程的关注点放在数据上。 一幅图解释其三者关系（实现数据双向绑定）：

可以用一个很简单的例子来理解：

新建HTML页面，引用Vue.js文件：

<script src="js/vue.js"></script>

在JS代码区域，创建Vue的核心对象，定义数据模型：

<script> new Vue({ el:"#app", data:{ message:"Hello Vue!" } }) </script>

编写视图：

<div id="app"> <input type="text" v-model="message">{{message}}</div>

视图中的message也被称为插值表达式。插值表达式中内容可以是变量、三元运算符、函数调用或者算术运算。

那么在页面上改变输入框中的值，后面展示的数据也会变化，它们两者改变的其实是同一个数据模型，也就是双向数据绑定。

Vue常用指令

指令：HTML标签上带有v-前缀的特殊属性，不同指令具有不同含义。

常用指令： v-bind 为HTML标签绑定属性值，如设置href，css样式等；

v-model为表单元素上创建双向数据绑定；

v-on为HTML标签绑定事件；

v-if，v-else-if，v-else条件性的渲染某元素，判定为true时渲染否则不渲染；

v-show根据条件展示某元素，区别在于切换的是display属性的值；

v-for列表渲染，遍历容器的元素或者对象属性。

Vue生命周期

生命周期：指从一个对象创建到销毁的整个过程。共有八个阶段，每触发一个生命周期事件，会自动执行一个生命周期方法（也称为钩子）。 下面是官方文档中的一幅图，很好的说明了生命周期的完整阶段过程：