Vue入门学习笔记-Vue基本语法（插值表达式、生命周期和钩子函数）

---

1.插值表达式

（插值表达式用户把vue中所定义的数据,显示在页面上.

插值表达式允许用户输入"JS代码片段")

语法：{{变量名/对象.属性名}}

2.生命周期和生命周期函数

生命周期指一个组件从创建到被销毁的全过程（可细分为创建期、挂载期、更新期、销毁期）。
生命周期函数指在一个组件从创建到被销毁的阶段中特定时间自动调用的函数，又称钩子函数。

Vue有四个阶段 八个生命周期函数（钩子函数）。[^1]

组件创建期间的四个钩子函数

beforCreate （在组件实例创建前调用-同一组件实例只会调用一次）：

实例或者组件完全创建之前，会执行这个函数
el，data和methods中的数据都还没有被初始化，无法访问。

created（在组件实例创建后调用-同一组件实例只会调用一次）：

data和methods已经初始化好，可以访问。
不能操作dom

beforMount （在组件被挂载前调用-同一组件实例只会调用一次）：

模板已经在内存中编译完成，但是还没用渲染到页面中，把data放到编译完成的HTML中
页面中的元素并没有替换，只是之前写的模板字符串。

mounted在组件被挂载前调用-同一组件实例只会调用一次）：

将模板的HTML挂载（渲染）到页面中，只会执行一次
用户可以看到真实的页面。
组件运行期间的两个钩子函数

组件运行期间的两个钩子函数

beforeUpdate（在组件更新前调用-同一组件实例可多次调用）：

界面还没有被更新，但是数据已经被更新了

updated（在组件完成更新后调用-同一组件实例可多次调用）

由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，组件DOM已经更新，数据与页面已经同步

组件结束期间的两个钩子函数

beforeUnmount（在组件销毁前调用-同一组件实例只会调用一次）

在vue2中为beforeDestory

mounted（在组件被销毁后调用-同一组件实例只会调用一次）

在vue2中为destoryed

​3.显示数据（v-text和v-html)

v-text和v-html专门用来展示数据, 其作用和插值表达式类似。

（v-text和v-html可以避免插值闪烁问题）
当网速比较慢时，使用{{}}来展示数据，有可能会产生插值闪烁问题。

语法

v-text：<span v-text="msg"></span>	<!-- 相当于<span>{{msg}}</span> -->
v-html：<span v-html="msg"></span>	<!-- 相当于<span>{{msg}}</span> -->

区别

v-text:数据就是纯文本显示
v-html：会正常解析html标签

​4.双向绑定数据（v-model）

常用于表单input标签，将标签的vule与变量进行双向绑定，一个发生变化另一个也会随之变化。

注意：
1.双向绑定，只绑定“文本框、单选按钮、复选框、文本框、下拉列表”等。
2.单选框绑定的时boolean类型。on
3.文本框、单选按钮、textarea，绑定的数据是字符串类型。
4.多个复选框，绑定的是数组。
5.select单选对应字符串，多选对应也是数组。

​5.事件处理（v-on）

事件绑定（v-on)

Vue中也可以给页面元素绑定事件。

语法：

<!--完整写法-->
<button v-on:事件名="函数名/vue表达式">点我</button>
<!--简化写法-->
<button @事件名="函数名/vue表达式">点我</button>

6.事件循环（v-for)

6.1遍历数组

语法：

v-for="item in items"
v-for="(item,index) in items"

标注：

item：存储数组元素的变量名
items：要迭代的数组
index：迭代到的当前元素索引，从0开始。

6.2遍历对象

语法：

v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"

标注：

value，对象的值
key， 对象的键
index, 索引，从0开始

6.2key

注意：

:key 一般配合v-for一起使用. 用来在特定情况下, 保证被遍历的数组中的元素的顺序.

7.判断语法（v-if和v-show)

注意：

v-if与v-show可以根据条件的结果，来决定是否显示指示内容。
v-if 条件不满足时，元素不会存在。
v-show 条件不满足时，元素不会显示，但依然存在。

8.显示数据（v-bind)

语法：

<!--完整写法-->
<标签名 v-bind:标签属性名="vue实例中的数据属性名"/>
<!--简化写法-->
<标签名 :标签属性名="vue实例中的数据属性名"/>

注意：

v-bind的作用和插值表达式差不多，而v-bind主要用于动态设置标签的属性值