Vue（发音为 /vjuː/，类似于 view）是一个用于构建用户界面的渐进式框架。

,Vue实例对象

每个 Vue 应用程序都首先使用 Vue 函数创建一个新的 Vue 实例：

图 1.Vue 实例化

实例对象vue的属性中，以$开头的为公共属性，以_开头的为私有属性。

图 2.Vue 的属性

其中el为公有属性，data为私有属性。 由于需要外部使用data中的数据，所以Vue直接将data中的属性和属性值挂载到Vue实例中。 也就是说data中的数据是可以直接使用app的。 直接打电话。

图 3. 调用数据属性

, 模板语法插值

您可以使用 {{ }} 从 html 中获取实例对象中的 data 属性值。 这种方法就是插值或者插值表达式。

1.文字

<span>Message: {{ msg }}</span>

{{ }} 中的 html 标签不会被解析，只会按原样输出。

2. 使用表达式

对于所有数据绑定，Vue.js 提供完整的表达式支持，但不能使用 JS 语句； （表达式是运算，有结果；语句是代码，可能没有结果。

3. 模板语法指令

指令是以 v- 为前缀的特殊功能，相当于自定义 html 属性。

1>v-文本

替换元素的整个文本内容。 如果里面有html代码，则不会被解析。 如果要更新部分文本内容，则需要使用插值表达式。

2>v-html

如果替换元素的（全部内容）包含 HTML 代码，则将对其进行解析。

3>视频秀

根据表达式的 true 或 false 值切换元素的属性显示和隐藏。

使用v-if进行显示和隐藏时，与v-show的区别在于，当v-if为true时，则显示，当v-if为false时，删除整个标签来隐藏。

4>v-如果

根据表达式的 true 或 false 值呈现元素。

5>v-其他

不需要表达式，前一个兄弟元素必须有 v-if 或 v-else-if，为 v-if 或 v-else-if 添加 else 块。

6>v-else-if

前一个兄弟必须有v-if或v-else-if，表示v-if的else if块。可以链式调用

7>v-为

根据源数据多次渲染元素或模板块（循环遍历）

与 v-if 一起使用时，v-for 的优先级高于 v-if

8>V-开

事件监听器用于绑定事件。 事件类型由参数指定。绑定事件时，编写事件方法。 可以不写在vue的data属性中，而是写在和data同级的属性中。

参数：事件

缩写：@

修改器：

​ 1).stop：调用event.()方法

2).:调用event.()方法

3).：使用添加事件监听时的模式，将默认事件触发从冒泡阶段修改为捕获阶段。

​ 4).self：只有当监听器所绑定的元素本身触发事件时，才会触发回调函数。

5）。 （键盘代码）：键盘事件绑定指定触发键盘的哪个键。

常用按键代码别名：.enter,.tab,.,.esc,.space,.up,.down,.left,.right

​ 6).once：只触发一次回调。

7).left：仅当鼠标左键点击时触发

​ 8).right：仅在点击鼠标右键时触发

​ 9).：仅在点击鼠标中键时触发。

9> v 绑定

（单向绑定）

用于绑定 DOM 属性()

缩写：：

10>v型模型

（双向绑定）

绑定的是用户可操作的元素的值；

可用元素：输入，，

修改器：

​ v-model.trim：输入前导和尾随空格进行过滤

​ v-model.：将输入字符串转换为数值

​ v-model.lazy：替换input事件监听事件

11>v-预

不编译插值表达式，并且按原样输出插值表达式。

12>V型斗篷

不需要表达。 当vue脚本未加载时，v-cloak配合css样式隐藏插值表达式。 当vue脚本加载时，立即删除v-cloak指令并编译插值表达式。

13>v-一次

不需要表达式，元素和组件仅渲染一次

， 成分

组件是一个可重用的 Vue 实例，其名称可用作自定义元素。

1> 组件的作用：编写一次可以重复使用任意多次。

2> 组件分为全局（公共）组件和本地（私有）组件

3>声明方式：全局组件和局部组件

4> 使用方法：直接使用组件的名称作为html中标签的名称

防范措施：

A。 如果组件名称为驼峰式命名，则在使用该组件时，将大写字母改为小写，并在大写字母前面添加 - 。

b. 组件中属性的值必须有唯一的根元素，否则会报错

C。 如果一次调用多个组件，请使用第一种方法。 第二种方法只能解析其中一个，后面的所有组件遇到后都不会解析。

5> 组件中的数据和方法

组件是一个具有名称的可重用 Vue 实例。 实例对象就是组件，组件就是实例对象，new Vue() 是一种特殊的实例对象。

相似之处：组件和新建的Vue实例对象接收相同的参数选项data、watch等，使用方法也相同。

区别：

A。 组件没有el属性，但是new Vue有el属性。 是定义组件中Vue控制范围的属性，new Vue有el属性。

b. 组件的data属性值必须是一个函数。 每个组件都可以维护一个返回的对象，new Vue的data属性返回一个对象。

6> Vue实例也是组件

新的Vue实例对象也是一个特殊的组件，因此它也有属性，也可以作为组件使用。

、Vue生命周期

每个Vue实例在创建时都会经历一系列的初始化过程。 比如需要设置数据监控、编译模板、挂载实例到DOM、数据变化时更新DOM等，同时这个过程中也会运行一些被称为生命周期钩子的函数，这使用户有机会在不同阶段添加自己的代码。

还有一些其他钩子在实例生命周期的不同阶段调用，例如 、 和 。 生命周期钩子的 this 上下文指向调用它的 Vue 实例。

生命周期内的钩子函数：

():

():

():

()

()

()

()

()