Vue学习之从入门到神经(万字长文 建议收藏)，2024金九银十面试季

用户名:

您输入的用户名是: {{name}}

二、Vue基本语法

=====================================================================

1.钩子函数

---

**概述：**钩子函数, 其实就是Vue提前定义好的事件, 其作用类似于Servlet的init方法和distory方法

语法：

补充：Vue声明周期和钩子函数

（1）什么是vue生命周期?

Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。

（2）vue生命周期的作用是什么?

Vue生命周期中有多个事件钩子，让我们在控制整个Vue实例过程时更容易形成好的逻辑。

（3）vue生命周期总共有几个阶段?

可以总共分为8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/后。

（4）第一次页面加载会触发哪几个钩子?

第一次页面加载时会触发 beforeCreate, created, beforeMount, mounted 这几个钩子

（5）DOM 渲染在 哪个周期中就已经完成?

DOM 渲染在 mounted 中就已经完成了。

（6）简单描述每个周期具体适合哪些场景?

生命周期钩子的一些使用方法：

beforecreate : 可以在此阶段加loading事件，在加载实例时触发；

created : 初始化完成时的事件写在这里，如在这结束loading事件，异步请求也适宜在这里调用；

mounted : 挂载元素，获取到DOM节点；

updated : 如果对数据统一处理，在这里写上相应函数；

beforeDestroy : 可以做一个确认停止事件的确认框；

nextTick : 更新数据后立即操作dom；

2. 插值表达式

---

**概述：**插值表达式用户把vue中所定义的数据,显示在页面上. 插值表达式允许用户输入"JS代码片段"

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

案例：

欢迎来到-->{{ name }}

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

---

概述：

​ v-text和v-html专门用来展示数据, 其作用和插值表达式类似。v-text和v-html可以避免插值闪烁问题.

​ 当网速比较慢时, 使用{{}}来展示数据, 有可能会产生插值闪烁问题。

​ 插值闪烁: 在数据未加载完成时，页面会显示出原始的{{}}, 过一会才会展示正常数据.

语法：

v-text：

v-html：

区别：

v-text：把数据当作纯文本显示.

v-html：遇到html标签,会正常解析

4.数据双向绑定数据(v-model)

---

概述：

​ Vue的双向绑定可以实现: 数据变化的时候, 页面会自动刷新, 页面变化的时候，数据也会自动变化.

注意：

1. 双向绑定, 只能绑定**“文本框,单选按钮,复选框,文本域,下拉列表”**等

2. 文本框/单选按钮/textarea, 绑定的数据是字符串类型

3. 单个复选框, 绑定的是boolean类型

4. 多个复选框, 绑定的是数组

5. select单选对应字符串，多选对应也是数组

4.1.绑定文本框

代码:

用户名:

效果:

4.2.绑定单个复选框

代码:

同意

效果:

4.3.绑定多个复选框

代码:

Java

Python

Swift

效果:

4.4.form表单数据提交

例子:传json格式跟formData格式的两种情况

<span class=“but” @click=“onSubmit()”>提交

5.事件处理(v-on)

---

5.1.事件绑定(v-on)

概述：

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

语法：

<button v-on:事件名=“函数名/vue表达式”>点我

<button @事件名=“函数名/vue表达式”>点我

注意：

​ Vue支持html中所有已知事件. 如: @click, @submit等, 只不过事件的名字不带on

案例：

<button @click=“show”>点我

5.2.事件修饰符

**概述：**事件修饰符主要对事件的发生范围进行限定

语法：

<button @事件名.事件修饰符=“函数名/vue表达式”>点我

分类：

.stop ：阻止事件冒泡, 也就是当前元素发生事件,但当前元素的父元素不发生该事件

.prevent ：阻止默认事件发生

.capture ：使用事件捕获模式, 主动获取子元素发生事件, 把获取到的事件当自己的事件执行

.self ：只有元素自身触发事件才执行。（冒泡或捕获的都不执行）

.once ：只执行一次

案例：

<button @click=“show”>点我

6.循环遍历(v-for)

---

6.1.遍历数组

语法：

v-for=“item in items”

v-for=“(item,index) in items”

items：要迭代的数组

item：存储数组元素的变量名

index：迭代到的当前元素索引，从0开始。

代码：

• {{index}}–{{user.name}}–{{user.age}}–{{user.gender}}

  6.2.遍历对象

  语法：

  v-for=“value in object”

  v-for=“(value,key) in object”

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

  value，对象的值

  key， 对象的键

  index, 索引，从0开始

  代码：

• {{index}}–{{key}}–{{value}}

  6.3.key

  概述：

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

  案例:

  <button @click=“add”>添加

• {{name}}

  效果:

  

  解决方案:

  <button @click=“add”>添加

• {{name}}

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

  ---

  概述：

  v-if与v-show可以根据条件的结果,来决定是否显示指定内容.

  ​ v-if: 条件不满足时, 元素不会存在.

  ​ v-show: 条件不满足时, 元素不会显示(但仍然存在).

  案例：

  <button @click=“show = !show”>点我

  Hello v-if.

  Hello v-show.

  8.显示数据(v-bind)

  ---

  概述：

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

  语法：

  <标签名 v-bind:标签属性名=“vue实例中的数据属性名”/>

  <标签名 :标签属性名=“vue实例中的数据属性名”/>

  案例：

  9.Vue页面跳转(两种方法)

  ---

  9.1.方法一(标签实现)

  <router-link :to=“{name: ‘bookshelf’, params: { entityId: this.entityId } }”

  :class=“{‘flex-item-1’:‘flex-item-1’,cur:tabs[0].isShow}” href=“javascript:”>

  书 架

  9.1.方法二(this.$router.push()实现)

  当this.$router.push()只有一个参数时 默认为跳转地址 最多可传两个参数 第二个参数为地址参数

  <a @click=“toIndex” :class=“{‘flex-item-1’:‘flex-item-1’,cur:tabs[2].isShow}” href=“javascript:”>

  首 页

  toIndex: function(){

  this.$router.push(“/?entityId=”+ localStorage.getItem(“entityId”));

  }

  三、Vue其他语法

  =====================================================================

  3.1.计算属性

  ---

  概述：计算属性就是一个提前定义好的方法, 该方法可以看作是一个特殊的值, 可以在插值表达式中使用.

  语法：

  var app = new Vue({

  el:“#app”,

  //计算属性必须放在Vue的computed中

  computed:{

  //定义计算属性

  属性名(){

  return “返回值”;

  }

  }

  });

  案例：

  {{birth}}

  3.2.watch监控

  ---

  概述：

  ​ watch可以监听简单属性值及其对象中属性值的变化.

  ​ watch类似于onchange事件,可以在属性值修改的时候,执行某些操作.

  语法：

  var app = new Vue({

  el:“#app”,

  data:{

  message:“白大锅”,

  person:{“name”:“heima”, “age”:13}

  },

  //watch监听

  watch:{

  //监听message属性值,newValue代表新值,oldValue代表旧值

  message(newValue, oldValue){

  console.log(“新值：” + newValue + “；旧值：” + oldValue);

  },

  //监控person对象的值,对象的监控只能获取新值

  person: {

  //开启深度监控；监控对象中的属性值变化

  deep: true,

  //获取到对象的最新属性数据(obj代表新对象)

  handler(obj){

  console.log("name = " + obj.name + “; age=” + obj.age);

  }

  }

  }

  });

  四、Vue组件

  ===================================================================

  4.1.基本使用

  ---

  概述：

  组件, 类似于模版, 模块. 在项目需要重用某个模块（头部、尾部、新闻。。。）的时候，可以将模块抽取成组件，其它页面中注册组件并引用。

  案例：

  注意:

  1. 组件的模版中, 只能书写一个跟标签

  2. 组件的定义必须放在Vue创建对象之前, 否则报错

  4.2.父组件向子组件通信

  ---

  概述：

  子组件无法直接使用父组件中的数据, 如果需要使用, 则必须由父组件把数据传递给子组件才可以.

  本质: 让子组件中的属性与父组件中的属性进行关联绑定, 然后子组件使用该属性, 这样才能做到数据传递

  意义：

  可以把父组件中的数据, 更新传递到子组件

  示例：

  4.3.子组件向父组件通信

  ---

  概述：

  子组件无法直接给父组件传递数据. 也无法操作父组件中的数据, 更无法调用父组件中的方法.

  所以, 所谓的子组件向父组件通讯, 其实就是想办法让子组件调用父组件的方法. 进而响应到父组件中的数据.

  意义：

  子组件可以调用父组件中的方法

  示例：

  父组件中:app_num={{app_num}}

  <counter @aaa=“add” @bbb=“rem” :counter_num=“app_num”>