Vue的快速入门、常用指令、生命周期

实现步骤：

1. 下载和引入vue.js文件

2. 创建div做为视图，id为div

3. 编写JS脚本，创建Vue对象，传入对象为构造方法参数

   1). 指定el属性值：为上面的#div，这是一个ID选择器，用于指定视图区域，此区域下的所有表达式、事件等内容都会受到vue的控制。

   2). 指定data属性：设置一个msg的键和值；用于保存当前 Vue 对象中的数据。这里设置的数据是初始化数据, 这里的数据改变,引用的地方也会改变

  3). methods 选项：用于定义方法。方法可以直接通过对象名调用，也可以在方法内部通过this来调用。

4. 在上面的div中使用{{msg}}引用数据，格式：{{变量名}}

常用指令

l 指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。例如 v-html ， v-if ， v-for 。

l 使用指令时，通常编写在标签的 属性上 ，值可以使用 JS 的 表达式 。

l 指令：是带有 v- 前缀的特殊属性，不同指令具有不同含义。

l 文本插值

        v-html：把文本解析为 HTML 代码。 v-text：纯文本原样输出

l 绑定属性

        v-bind：为 HTML 标签绑定属性值。

l 条件渲染

        v-if：条件性的渲染某元素，判定为真时渲染,否则不渲染。

        v-else：条件性的渲染。

        v-else-if：条件性的渲染。

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

l 列表渲染

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

l 事件绑定

        v-on：为 HTML 标签绑定事件。 简写：@事件名

l 表单双向绑定

        v-model：在表单元素上创建双向数据绑定。

生命周期

创建阶段

运行阶段

销毁阶段