Vue学习之从入门到神经(万字长文 建议收藏)(1)

​ 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”>

  五、axios异步请求

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

  5.1 axios概述

  ---

  概述：

  axios是一个基于 promise 的 HTTP 库, 主要用于：发送异步请求获取数据。

  常见的方法：

  ​ axios(config)

  ​ axios.get(url, [config])

  ​ axios.post(url, [data])

  发送数据config常用参数：

  {

  url: ‘请求的服务器’,

  method: ‘请求方式’, // 默认是 get

  // GET请求参数

  params: {

  参数名: 参数值

  },

  // POST请求参数, 如果使用axios.post,则参数在url之后直接书写,不需要该位置传递参数

  data: {

  参数名: 参数值

  },

  // 响应数据格式,默认json

  responseType: ‘json’

  }

  响应数据常用参数：

  {

  data: {}, //真正的响应数据(响应体)

  status: 200, //响应状态码

  statusText: ‘OK’, //响应状态描述

  headers: {}, //响应头

  config: {} //其他配置信息

  }

  5.2.Get请求

  ---

  var app = new Vue({

  el: “#app”,

  data: {

  user: {}

  },

  //当页面加载完毕后

  created() {

  //发送GET请求axios.get(“请求路径”,{ config });

  axios.get(“请求路径”,{

  //get请求参数

  params: {

  name:“zhangsan”,

  age:23

  },

  //响应数据格式为"json"

  responseType: ‘json’

  }).then(res => {

  //打印响应数据

  console.log(res);

  //把响应数据赋值给Vue中的user属性

  app.user = res.data;

  }).catch(err => {

  //打印响应数据(错误信息)

  console.log(err);

  });

  }

  });

  5.3.Post请求

  ---

  var app = new Vue({

  el: “#app”,

  data: {

  user: {}

  },

  //当页面加载完毕后

  created() {

  //发送POST请求axios.post(“请求路径”,{ 参数 });

  axios.post(“请求路径”,{

  name:“zhangsan”,

  age:23

  }).then(res => {

  console.log(res);

  app.user = res.data;

  }).catch(err => {

  console.log(err);

  });

  }

  });

  判断

  回到题目，如果你真想检验一个人的水平。第一步先考察一下基本的编程基础，问几个基本的编程问题，可以和前端相关也可以无关。比如垃圾收集大致是怎么做的，setTimeout 大致做了什么（说会在另一个线程里执行回调的直接毙掉）。

  第二步考察一下知识面，问问http、tcp的基本知识，dns是怎么工作的，或者常用框架的实现原理，看看候选人是不是除了自己的一亩三分地什么都不关心。

  第三步考察hold业务逻辑的能力，从一个简单的注册页，或者查询页开始，先让说下代码的基本架构，然后需求、性能、可靠性、安全层层加码，看看能不能很快的反馈出解决方案。能对答如流的要么做过，要么对他来说这种复杂度的东西是小case。

  前三步都没问题，基本上说明候选人已经还行了，但是行到什么程度，不知道。如果想找比较厉害的，就增加个第四步，亮点项目考察。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了，我整理一套前端面试题分享给大家，希望对即将去面试的小伙伴们有帮助！

  

  

  {

  data: {}, //真正的响应数据(响应体)

  status: 200, //响应状态码

  statusText: ‘OK’, //响应状态描述

  headers: {}, //响应头

  config: {} //其他配置信息

  }

  5.2.Get请求

  ---

  var app = new Vue({

  el: “#app”,

  data: {

  user: {}

  },

  //当页面加载完毕后

  created() {

  //发送GET请求axios.get(“请求路径”,{ config });

  axios.get(“请求路径”,{

  //get请求参数

  params: {

  name:“zhangsan”,

  age:23

  },

  //响应数据格式为"json"

  responseType: ‘json’

  }).then(res => {

  //打印响应数据

  console.log(res);

  //把响应数据赋值给Vue中的user属性

  app.user = res.data;

  }).catch(err => {

  //打印响应数据(错误信息)

  console.log(err);

  });

  }

  });

  5.3.Post请求

  ---

  var app = new Vue({

  el: “#app”,

  data: {

  user: {}

  },

  //当页面加载完毕后

  created() {

  //发送POST请求axios.post(“请求路径”,{ 参数 });

  axios.post(“请求路径”,{

  name:“zhangsan”,

  age:23

  }).then(res => {

  console.log(res);

  app.user = res.data;

  }).catch(err => {

  console.log(err);

  });

  }

  });

  判断

  回到题目，如果你真想检验一个人的水平。第一步先考察一下基本的编程基础，问几个基本的编程问题，可以和前端相关也可以无关。比如垃圾收集大致是怎么做的，setTimeout 大致做了什么（说会在另一个线程里执行回调的直接毙掉）。

  第二步考察一下知识面，问问http、tcp的基本知识，dns是怎么工作的，或者常用框架的实现原理，看看候选人是不是除了自己的一亩三分地什么都不关心。

  第三步考察hold业务逻辑的能力，从一个简单的注册页，或者查询页开始，先让说下代码的基本架构，然后需求、性能、可靠性、安全层层加码，看看能不能很快的反馈出解决方案。能对答如流的要么做过，要么对他来说这种复杂度的东西是小case。

  前三步都没问题，基本上说明候选人已经还行了，但是行到什么程度，不知道。如果想找比较厉害的，就增加个第四步，亮点项目考察。

  开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

  总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了，我整理一套前端面试题分享给大家，希望对即将去面试的小伙伴们有帮助！

  [外链图片转存中…(img-tEBP71nT-1714370170557)]

  [外链图片转存中…(img-zYiuCJvh-1714370170558)]