Web前端最全Vue学习之从入门到神经(万字长文 建议收藏)，前端工程师面试题目和答案

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

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

<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);

  });

  }

  });

  5.4.跨域请求

  ---

  跨域请求：在前端js中如果发送异步请求的话，请求的地址与当前服务器的ip或者端口号不同都是跨域请求.

  跨域请求需要在服务提供方, 开启允许跨域请求

  

  六、VueJs Ajax

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

  6.1.vue-resource

  ---

  vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。 当vue更新

  到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，在这里大家了解一下vue-resource就可以。

  vue-resource的github: https://github.com/pagekit/vue-resource

  6.2.axios

  ---

  Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

  axios的github:https://github.com/axios/axios

  6.2.1.引入axios

  首先就是引入axios,如果你使用es6，只需要安装axios模块之后

  import axios from ‘axios’;

  //安装方法

  npm install axios

  //或

  bower install axios

  当然也可以用script引入

  6.2.2.get请求

  //通过给定的ID来发送请求

  axios.get(‘/user?ID=12345’)

  .then(function(response){

  console.log(response);

  }).catch(function(err){

  console.log(err);

  });

  //以上请求也可以通过这种方式来发送

  axios.get(‘/user’,{

  params:{

  ID:12345

  }

  }).then(function(response){

  console.log(response);

  }).catch(function(err){

  console.log(err);

  });

  6.2.3.post请求

  axios.post(‘/user’,{

  firstName:‘Fred’,

  lastName:‘Flintstone’

  })

  .then(function(res){

  console.log(res);

  })

  .catch(function(err){

  console.log(err);

  });

  为方便起见，为所有支持的请求方法提供了别名

  axios.request(config)

  axios.get(url[, config])

  axios.delete(url[, config])

  axios.head(url[, config])

  axios.post(url[, data[, config]])

  axios.put(url[, data[, config]])

  axios.patch(url[, data[, config]])

  七、综合案例

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

  7.1.需求

  ---

  完成用户的查询与修改操作

  7.2. 数据库设计与表结构

  ---

  CREATE DATABASE vuejsdemo;

  USE vuejsdemo;

  CREATE TABLE USER(

  id INT PRIMARY KEY AUTO_INCREMENT,

  age INT,

  username VARCHAR(20),

  PASSWORD VARCHAR(50),

  email VARCHAR(50),

  sex VARCHAR(20)

  )

  Vue 编码基础

  2.1.1. 组件规范

  2.1.2. 模板中使用简单的表达式

  2.1.3 指令都使用缩写形式

  2.1.4 标签顺序保持一致

  2.1.5 必须为 v-for 设置键值 key

  2.1.6 v-show 与 v-if 选择

  2.1.7 script 标签内部结构顺序

  2.1.8 Vue Router 规范

  Vue 项目目录规范

  2.2.1 基础

  2.2.2 使用 Vue-cli 脚手架

  2.2.3 目录说明

  2.2.4注释说明

  2.2.5 其他

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

  

  送请求

  axios.get(‘/user?ID=12345’)

  .then(function(response){

  console.log(response);

  }).catch(function(err){

  console.log(err);

  });

  //以上请求也可以通过这种方式来发送

  axios.get(‘/user’,{

  params:{

  ID:12345

  }

  }).then(function(response){

  console.log(response);

  }).catch(function(err){

  console.log(err);

  });

  6.2.3.post请求

  axios.post(‘/user’,{

  firstName:‘Fred’,

  lastName:‘Flintstone’

  })

  .then(function(res){

  console.log(res);

  })

  .catch(function(err){

  console.log(err);

  });

  为方便起见，为所有支持的请求方法提供了别名

  axios.request(config)

  axios.get(url[, config])

  axios.delete(url[, config])

  axios.head(url[, config])

  axios.post(url[, data[, config]])

  axios.put(url[, data[, config]])

  axios.patch(url[, data[, config]])

  七、综合案例

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

  7.1.需求

  ---

  完成用户的查询与修改操作

  7.2. 数据库设计与表结构

  ---

  CREATE DATABASE vuejsdemo;

  USE vuejsdemo;

  CREATE TABLE USER(

  id INT PRIMARY KEY AUTO_INCREMENT,

  age INT,

  username VARCHAR(20),

  PASSWORD VARCHAR(50),

  email VARCHAR(50),

  sex VARCHAR(20)

  )

  Vue 编码基础

  2.1.1. 组件规范

  2.1.2. 模板中使用简单的表达式

  2.1.3 指令都使用缩写形式

  2.1.4 标签顺序保持一致

  2.1.5 必须为 v-for 设置键值 key

  2.1.6 v-show 与 v-if 选择

  2.1.7 script 标签内部结构顺序

  2.1.8 Vue Router 规范

  Vue 项目目录规范

  2.2.1 基础

  2.2.2 使用 Vue-cli 脚手架

  2.2.3 目录说明

  2.2.4注释说明

  2.2.5 其他

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