1.vue的核心是什么

vue的核心是 数据驱动和组件化
vue是现今最为主流的MVVM
vue是 渐进式 的 自低向上增量开发 的MVVM框架
渐进式：渐进式的框架 就是一种可以更好的方便的与其他框架整合的模式（只会做职责之内的事情）
自低向上增量开发： 从简单到复杂的一个过程 vue在编写的时候 先把基本页面写好 在逐渐完成逻辑

2.请简述你对vue的理解

定义 :vue是构建用户界面的渐进式自底向上增量开发的MVVM框架,vue的核心库只关注视图层,不仅易于上手,还便于与第三方库和既有项目的整合,通过尽可能简单的API实现响应数据的绑定和组合的视图组件

  • 优点 轻量级,易上手,高效率,简单易学,文档全面而整洁
  • 目的 解决数据绑定问题,vue.js主要目的是为了开发大型单页应用,支持组件化,也就是也可以把页面封装成为若干个组件,把组件进行拼接,这样是让页面的复用性达到最高
  • 核心思想: 数据驱动和组件化
  • 优势: 简介HTML模板+vue实例+json数据; 轻量:17kb,性能好,设计思想:视图和数据分离,无需DOM操作

    3.请简述vue的单向数据流

    可能很多人都以为vue的双向绑定其实是错误的，vue真正的是单向数据流，vue的双向绑定只不过是语法糖
    我的理解是
    model层:data对象中的数据,或后台传过来的数据
    view层:在html或模板(template)中{{}} 中的值
    双向绑定:model的更新会触发view的更新,view的更新会触发mode的更新
    单向数据流:model的更新会触发view的更新,view的更新会复发model的更新没关系

vue中当你把一个普通的JavaScript对象传给vue实例的data选项,vue将遍历此对象所有的属性,big使用Object.defineProperty把这些属性全部转为getter/setter,通过虚拟Dom把值传递到view上面去(单向数据流)

  1. <body>
  2.     <div id="app">{{value}}</div>
  3.     <script src="node_modules/vue/dist/vue.js"></script>
  4.     <script>
  5.        var app = new Vue({
  6.             el:'#app',
  7.             data() {
  8.                 return {
  9.                     value : 'zqx'
  10.                 }
  11.             },
  12.         })
  14.     </script>
  15. </body>

4. vue常用修饰符

  1. 事件修饰符

vue为v-on提供了事件修饰符,可以通过(.)表示的指令后缀来调用修饰符

  • stop:阻止冒泡行为.等同e.stopPropagation()
  • .prevent:阻止默认行为.等同于e.preventDefault()
  • self:只有点击自身的范围内才会触发,不包括子元素
  • .once 只执行一次
  • capture 当元素发生冒泡时,先触发带有该修饰符的元素.若有多个该修饰符,则有外而内触发.就是谁有该事件修饰符,就先触发谁
  • passive:主要用在移动端的scroll事件,来提高浏览响应速度,提升用户体验,保证了监听器不会调用preventDefault().浏览器解放了,不用等待js运行结果,就会立刻响应滚动,就确保了流畅的滚动体验
  1. 键盘修饰符
  • .enter ;回车键
  • .tab:制表符
  • .delete:删除键
  • .space:空格键
  • .up:向上键
  • .down:向下键
  • .left:向左键
  • .right:向右键
  1. 系统修饰建

可以用如下修饰符来实现仅在按下相应按键才触发鼠标或键盘事件的监听器

  • .Ctrl
  • .alt
  • .shift
  • .meta
  • .exact修饰符:允许你控制有精确的系统修饰符组合触发事件
  1. 鼠标按钮修饰符

鼠标修饰符用来限制处理程序监听特定的滑鼠按键,常见的有

  • .left
  • .right
  • .middle

这些修饰符会限制处理函数仅响应特定的鼠标按钮

  1. input修饰符(例如:v-model.xxx使用)
  • .lazy 在改变后才出发(也就是只要input不聚焦的时候才会执行)
  • .number: 将输入的字符串转换为Number类型(但是如果输入字符串,输出的还是string,控制台会警告)
  • .trim:自动过滤用户输入的首尾空格

    5.v-text{{}} 与v-html区别

  1. v-html

    v-html用于输出html,他与v-text区别在于v-text输出的是纯文本,浏览器不会对其在进行html解析,但v-html会将其当html标签解析后输出

  2. v-text

    v-text是用于操作纯文本,他会替代显示对应的数据对象上的值,当绑定的数据对象上的值发生改变,插值处的内容也随之更新.注意:此处为单向绑定,数据对象上的值改变,插值会发生变化,但是当插值发生变化并不影响数据对象的值.其中:v-text可以简写为{{}},并且支持逻辑运算

  3. v-mode

    v-model通常用于表单组件的绑定,例如input,select等.他与v-text的区别在于它实现的表单组件的双向绑定(数据对象上的值改变,插值会发生变化,当插值发生变化时,数据对象的值也会改变),如果用于表单控件以外标签是没有用的.

    6.v-on可以绑定多个方法吗?

    vue中v-on是可以绑定多个方法的

  4. v-on绑定多个方法(采用的是对象形式)

    1. <button v-on="{click:clickMethds,mousemove:mouseMethods}">按钮</button>

  5. 一个事件绑定多个方法

    1. <button @click="click1,click2"></button>

    7.vue循环的key作用

  • 官网回答
  1. key属性主要在vue的虚拟dom算法,在新旧nodes对比时,辨识VNodes
  2. 如果不使用key,vue会使用一种最大限度减少动态元素并且尽可能的尝试就地修改.复用,相同类型元素的算法
  3. 而是用key它会基于key的变化,重新排列元素顺序,并且会移除/销毁key不存在的元素
  4. key 最好是一个唯一的值，项目开发中，一般都是用 id，如果你用 index 其实和没加没啥区别，就是 不让他警告了而已

    8.什么是计算属性

    首先它是一种属性,其次他有计算这个特殊的性质,每次取得他的值的时候,它不像普通属性那样直接返回结果,而是经过计算后再返回结果,同时只要在它的当中引用data中的摸个属性,当这个属性发送改变时,计算属性会自动计算重新执行
    如果我们在视图层中写了太多了逻辑 导致代码的可维护性降低

计算属性的语法

  1. 计算（数据处理）属性（vue实例中的一个属性） 就是可以对data中的数据进行一些数据处理 一条数据在不同位置展示出不同形态的时候
  3. 语法 ：
  5. 写在与el data methods watch等同级的位置
  7. computed:{
  8.   处理完的数据变量(){
  9.     return 你的操纵数据的逻辑
  10.  }
  12. }

9.vue单页面的优缺点(SPA)

  1. 优点
  • 用户体验好,快,内容的改变不需要重现加载整个页面,对服务器的压力小,前后端分离,比如vue项目
  • 完全前端组件化,前端开发不再以页面为单位,更好的采用组件化的思想,代码结构和组织更加规范化,便于修改和调整
  1. 缺点
  • 不支持低版本的浏览器
  • 首次加载页面的时候需要加载大量的静态资源,这个加载时间相对较长,不利于SEO(搜索引擎)优化,单页页面,数据在前端渲染,就意味着没有SEO

  • 页面导航不可用,如果一定要导航需要自行实现前进,后退(由于是单页面不能用浏览器的前进和后退功能,所以需要自检建立堆栈管理)

    10. vuex是什么?怎么使用?那种场景下使用

    介绍

    官方话:vuex是一个专为vue.js应用程序开发的状态管理模式.它采用几种式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.vuex也集成到vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调制.状态快照导入导出等高级调试功能
    简单来说: vuex是vue框架中状态管理

    使用过程

  • state用于存放状态

  • mutations用来修改当前state的状态
  • actions通过里面的commit,让mutations里的方法触发
  • getters用来返回当前的状态值
  • modules将状态划分成不同的模块,每一个模块都是一个完整的vuex对象
  • 引入vuex的mapGetters和mapActions来触发
  • mapActions通过里面的方法,;利用…运算符吧方法直接actions中去出来,让我们使用

  • mapGetters帮助我们把getters方法取出来放到计算属性中,让我们直接使用

    什么场景使用

  • 单页应用中,组件之间的数据状态

  • 应用实例:
  1. 购物车功能;
  2. 下单页面有选择优惠按钮,点击进入优惠券页面,选择后返回到下单页,数据会绑定回来,显示已选择的优惠券;

  3. 登录状态等等

    11.vue中路由跳转方式

  4. router-link

  5. this.$router.push() (函数里面调用)
  6. this.$router.replace() (用法同push)
  7. this.$router.go(n)
    区别
    this.$router.push 跳转到指定url路径,并想history栈中添加一个记录点击后退会返回到上一个页面
    this,$route.,repalace 跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面(计时直接替换了当前页面)
    this.$router.go(n),向前或者向后跳转n个页面,n可为正整数或负整数

    12.vue的生命周期请简述

    vue2 生命周期
  • beforeCreate() 未初始化
  • created() 初始化
  • beforeMount() 未编译
  • mounted() 已编译
  • beforeUpdate() 未更新
  • updated() 已更新
  • beforeDestroy() 未删除

  • destroyed() 已删除

    vue3 生命周期

  • setup

  • onBeforeMount
  • onMounted
  • onBeforeUpdate
  • onUpdated
  • onBeforeUnmount
  • onUnmouted

  • onErrorCaptured

    13.vue跨域的解决方式

    1. proxyTableproxyTable是解决开发环境中的跨域问题，正式环境的跨域需要使用nginx反向代理或者是后端解决
      2. Nginx做个代理转发
      3. 后台写接口的使用cros 解决一下跨域问题

      14.vue生命周期的作用

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

      15.dom渲染在哪个生命周期阶段内完成

      mounted
      created和mounted的区别
      created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
      mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

      16.vue路由的实现

      可以通过query，param两种方式
      区别：query通过url传参，刷新页面还在；params属性页面不在
      params的类型：

  • 配置路由格式: /router/:id

  • 传递的方式：在 path 后面跟上对应的值
  • 传递后形成的路径：/router/123
  • 通过 $route.params.id 获取传递的值

query 的类类型

  • 配置路由格式 :/router 也就是普通配置
  • 传递的方式:对象中使用 query 的 key 作为传递方式
  • 传递后形成的路径 :/route?id=123

  • 通过 $route.query 获取传递的值

    17.vue路由模式hash和history,简述

    hash

    vue-router默认为hash模式，使用URL的hash来模拟一个完整的URL，当URL改变时，页面不会重新加载。#就是hash符号，中文名为哈希符或者锚点，在hash符号后的值称为hash值。
    路由的hash模式是利用了window 可以监听onhashchange事件来实现的，也就是说hash值是用来指导浏览器动作的，对服务器没有影响，HTTP请求中也不会包括hash值，同时每一次改变hash值，都会在浏览器的访问历史中增加一个记录，使用“后退”按钮，就可以回到上一个位置。所以，hash模式是根据hash值来发生改变，根据不同的值，渲染指定DOM位置的不同数据

    history

    hash模式的URL中会自带#号，影响URL的美观，而history模式不会出现#号，这种模式充分利用了history.pushState()来完成URL的跳转，而且无须重新加载页面。使用history模式时，需要在路由规则配置中增加mode:’history’，

    1. // main.js 文件
    2. const router = new VueRouter ({
    3.   mode:'history',
    4.   routes: [...]
    5. })

    18.vue路由传参的两种方式,params和query方式

  • 路由传参分为 params 传参与 query 传参

  • params 传参类似于网络请求中的 post 请求，params 传过去的参数不会显示在地址栏中（但是不能刷新）。params 只能配合 name 使用，如果提供了 path，params 会失效。

  • query 传参类似于网络请求中的 get 请求，query 传过去的参数会拼接在地址栏中（?name=xx）。query 较为灵活既可以配合 path 使用，也能配合 name 使用

    19.vue数据绑定的几种方法

  • 使用 {{}} 把数据传给页面

  • 使用vue指令 v-model
  • 标签属性前加 : 绑定 :title:’’
  • 数据前拼接字符串用${}

    20.vue注册一个全局组件

    vue2
    在main.js中
    1. import Vue from 'vue'
    2. import header from "@/components/header.vue"
    3. Vue.component("header", header)
    vue3
    ```javascript import { createApp } from ‘vue’ import App from ‘./App.vue’ import header from “@/components/header.vue”

const app = createApp(App) app.component(‘header’, header )

  1. 渲染之后就可以在组建中直接使用了
  2. ```javascript
  3. <template>
  4.     <header></header>
  5. </template>

21.vue的路由钩子函数/路由守卫有那些

全局前置守卫

  • vue-router提供的router,beforeEach((to,from,next)=>{})
  • to:即将要进入的目标路由对象
  • from:当前导航正要离开的路由
  • nex:下一步执行

全局后置钩子

  • vue-roter 提供的router.afterEach((to,from)=>{})
  • to: 即将要进入的目标路由对象
  • from:当前导航正要离开的路由

组件内的守卫

  • beforeRouterEnter在进入组件前调用(不常用)

—- 在组件中使用beforeRouter(to,from ,next){}

  • beforeRouterLeave 离开路由之前 (常用)

—- 在组件中使用beforeRouterleave(to ,from ,next){}来进行离开组件的钩子

22.vue中如何进行动态路由设置?有那些方式?怎么获取传递够来的数据?

  • 可以通过query,param两种方式
  • 区别:query通过url传参,刷新页面还在params刷新页面不在了
  1. params的类型

配置路由格式:/router/:id
传递的方式:在path后面跟上对应的值
传递后形成的路径:/router/123

  1. <!-- 动态路由-params -->
  3. //在APP.vue中
  4.     <router-link :to="'/user/'+userId" replace>用户</router-link>    
  6. //在index.js
  7.      {
  8.     path: '/user/:userid',
  9.     component: User,
  10.     },

跳转方法:

  1. // 方法1：
  2. <router-link :to="{ name: 'users', params: { uname: wade }}">按钮</router-link>
  3. // 方法2：
  4. this.$router.push({name:'users',params:{uname:wade}})
  5. // 方法3：
  6. this.$router.push('/user/' + wade)
  • 可以通过$route.params.userid 获取你说传递的值
  1. query的类型
  • 配置路由格式:/router,也就是普通配置
  • 传递的方式:对象中使用query的key作为传递方式

  • 传递后形成的路径:/router?id=123 ```javascript

    //01-直接在router-link 标签上以对象的形式 档案 / 02-或者写成按钮以点击事件形式 /

    //点击事件 profileClick(){ this.$router.push({

    1.   path: "/profile",
    2.   query: {
    3.     name: "kobi",
    4.     age: "28",
    5.     height: 198
    6.   }
    7. });

    }

  2. - 跳转方式:
  3. ```javascript
  4. // 方法1：
  5. <router-link :to="{ name: 'users', query: { uname: james }}">按钮</router-link>
  6. // 方法2：
  7. this.$router.push({ name: 'users', query:{ uname:james }})
  8. // 方法3：
  9. <router-link :to="{ path: '/user', query: { uname:james }}">按钮</router-link>
  10. // 方法4：
  11. this.$router.push({ path: '/user', query:{ uname:james }})
  12. // 方法5：
  13. this.$router.push('/user?uname=' + jsmes)
  • 可以通过$router.query获取你说传递的值

23.Element-ui中的常用组件有那些?请简述你经常使用的并且他们的属性有那些

  1. Container 布局容器
  • ：外层容器。当子元素中包含 或 时，全部子元素会垂直上下排列，否则会水平左右排列
  • ：顶栏容器
  • ：侧边栏容器
  • ：主要区域容器
  • ：底栏容器
  1. Dropdown 下拉菜单
  • :下拉按钮
  • 下拉菜单
  • 下拉项
  • divided 分隔
  1. NavMenu 导航菜单
  • :导航菜单
  • :导航按钮