小实训认为的重点

神的少女光芒万丈

于 2021-08-06 20:43:33 发布

阅读量236

点赞数 1

本文链接：https://blog.csdn.net/qq_45656036/article/details/119461957

版权

1.vuex的使用

官方说明：

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

个人理解：

vuex就是一个状态管理的工具，如果我们没有用vuex，那么每个组件之间的传值就只能通过存储的方式来存储。这样一旦项目大了过后就不利于数据状态的管理。所以如果我们用到了vuex那么就会方便管理很多。

怎么使用？

下载vuex后在文件夹中会生成一个store文件，里面有一个index.js文件，也会在mian.js中自动引入这个index.js文件。store里面的state就相当于data，getters相当于computed，mutations存放同步的方法，actions存放异步的方法。

commit 和dispatch的区别在于commit是提交mutatious的同步操作，dispatch是分发actions的异步操作

1）dispatch：含有异步操作，例如向后台提交数据，写法this.$store.dispatch(‘action方法名’,值)

2）commit：同步操作，写法：this.$store.commit(‘mutations方法名’,值)

什么是Vue生命周期？

vue生命周期是指vue是对象从创建到销毁的过程。
简单来说就是vue实例从创建到销毁的过程

Vue生命周期的作用是什么？

在vue生命周期的不同阶段通过对应的钩子函数来实现组件数据管理和DOM渲染两大重要功能。

创建阶段：
beforecreate：实例已经初始化，但不能获取DOM节点。(没有data，没有el)
created:实例已经创建，仍然不能获取DOM节点。(有data，没有el)
载入阶段：
beforemount：模板编译完成，但还没挂载到界面上。(有data，有el)
mounted：编译好的模板已挂载到页面中(数据和DOM都已经渲染出来)。
更新阶段：
beforeupdate：数据发生变化立即调用，此时data中数据是最新的，但页面上数据仍然是旧的(检测到数据更新时，但DOM更新前执行)。
updated：更新结束后执行，此时data中的值和页面上的值都是最新的。
销毁阶段：
beforedestroy：当要销毁vue实例时，在销毁之前执行。
destroy：在销毁vue实例时执行。

五个核心？

1.state 存放的是数据状态，不可以直接修改里面的数据。
2.getters类似vue的计算属性，主要用来过滤一些数据。
3.mutations:存放的是动态修改Vuex的state中保存的数据状态的方法。
4.actions:保存的触发mutations中方法的方法，可以理解为通过将mutations里面处里数据的方法变成可异步的处理数据的方法，简单的说就是异步操作数据。
5.modules:模块化vuex，当代码量过多的时候可以让每个模块拥有自己的state getters mutations

一般什么样的数据会放在 State 中呢？

目前主要有两种数据会使用 vuex 进行管理：
1、组件之间全局共享的数据
2、通过后端异步请求的数据，比如做加入购物车、登录状态等都可以使用Vuex来管理数据状态

created和mounted的区别？

created:实例已经创建，但不能获取DOM节点。
mounted：模板已经挂载到页面上，可以操作DOM元素。

watch computed methods之间的区别

methods在重新渲染的时候每次都会被重新的调用；
computed 是自动监听依赖值的变化，从而动态返回内容，主要目的是简化模板内的复杂运算。所以区别来源于用法，只是需要动态值，那就用 computed
；需要知道值的改变后执行业务逻辑，才用 watch。
watch也可以影响数据的变化，当绑定的数据方法变化时触发响应的函数，需要在数据变化时执行异步或开销较大的操作时使用watch。

使用场景有

单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车

说说你对vue的理解

Vue 是什么？

主流的渐进式 JavaScript 框架

是一套用于构建用户界面的渐进式 javascript 框架(渐进式:想用什么就用什么不必全都用) 在传统的前端开发中,是基于 jQuery+
模板引擎来构建界面的搭建用户页面的渐进式框架

什么是渐进式？

可以和传统的网站开发架构融合在一起，例如可以简单的把它当作一个类似 JQuery 库来使用。
也可以使用Vue全家桶框架来开发大型的单页面应用程序。

vue的核心？

数据驱动视图
组件化开发

什么是数据驱动试图？

数据的变化会自动更新到对应的元素中，不用手动操作DOM,是基于MVVM模式来解放DOM操作的

什么是MVVM?

MVVM是一种软件开发思想，M-model代表了数据，V-view代表了试图模板 VM-viewmodel代表了业务逻辑处理的代码

使用它的原因？（优点）

vue.js 体积小，
编码简洁优雅，
运行效率高，
用户体验好.无Dom操作，
它能提高网站应用程序的开发效率

vue的缺点

1.双向绑定时，BUG调试难度增大
2.大型项目中，V和M过多，维护成本过高

什么场景下使用它？

一般是需要开发单页面应用程序（Single Page Application, 简称:SPA）的时候去用单页面应用程序，如：网易云音乐
https://music.163.com/ 因为Vue 是渐进式的，Vue 其实可以融入到不同的项目中，即插即用

组件是什么?

组件就是可复用的VUE实例，且带有一个名字，具有一定功能

组件化开发是什么?

组件化开发，允许我们将网页中的功能样式标签封装成可复用得模块，每个模块之间是彼此独立但互相联系的。

vue中的指令及区别

说一下你知道的指令有哪些？
v-for v-if v-model v-bind v-show
区别？

v-text与v-html？

相同点：都能为标签渲染文本
不同点：text 元素内容整体替换为纯文本数据 html 整体会替换为指定的html 文本 text 不会解析标签 html 会解析标签

v-bind与v-model？

相同点：用来绑定数据到标签中，符合数据驱动试图
不同点：bind ：数据影响视图，视图不会影响数据，是单向的
model:数据影响视图，视图影响数据是双向的

v-if与v-show?

相同点：都是处理标签的显示与隐藏
不同点：if通过DOM来创建和销毁 show通过css的display
使用场景不同：if用于需要整体删除一个标签时(不频繁切换显示状态) show用于通过一个数据来处理标签的显示（频繁切换显示状态）

如何自定义指令？

https://blog.csdn.net/weixin_43638968/article/details/103603393?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162830107316780357230758%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=162830107316780357230758&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allsobaiduend~default-1-103603393.pc_search_download_positive&utm_term=vue%E4%B8%AD%E5%A6%82%E4%BD%95%E8%87%AA%E5%AE%9A%E4%B9%89%E6%8C%87%E4%BB%A4&spm=1018.2226.3001.4187

v-for为什么要绑定key？不绑定会怎样？

因为vue组件高度复用，增加key可以标识组件的唯一性，为了更好的区分各个组件，key的作用主要是为了高效的更新虚拟DOM，保持数据唯一

如果不绑定的话，会导致所有列表的DOM重新渲染，性能无法最大化。

什么时NPM？

简单来说就是包含在Node里面的包管理工具，NPM会随着Nodel.js一起安装，NPM为开发者提供了一个模块共享的大平台，当我们项目需要使用某个模块的时候，可以直接使用NPM包管理工具来下载对于的模块包并安装，我们也可以把自己写的代码发布到平台上供他人使用。

vue-router

2.导入模块的几种方式

详情：https://blog.csdn.net/qq_45656036/article/details/119357679?spm=1001.2014.3001.5501

3.vue路由 hash 模式和 history 模式实现原理分别是什么，他们的区别是什么？

hash 模式：

#后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面

通过监听 hashchange 事件可以知道 hash 发生了哪些变化，然后根据 hash 变化来实现更新页面部分内容的操作。

history 模式：

history 模式的实现，主要是 HTML5 标准发布的两个 API，pushState 和 replaceState，这两个 API
可以在改变 url，但是不会发送请求。这样就可以监听 url 变化来实现更新页面部分内容的操作

区别

url 展示上，hash 模式有“#”，history 模式没有

刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 没有处理的话，会返回404，一般需要后端将所有页面都配置重定向到首页路由

兼容性，hash 可以支持低版本浏览器和 IE。

4.jQuery与vue的区别？

jquery介绍：想必大家都用过jquery吧，这个曾经也是现在依然最流行的web前端js库，可是现在无论是国内还是国外他的使用率正在渐渐被其他的js库所代替，随着浏览器厂商对HTML5规范统一遵循以及ECMA6在浏览器端的实现，jquery的使用率将会越来越低

vue介绍：vue是一个兴起的前端js库，是一个精简的MVVM。从技术角度讲，Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model
层连接了起来，通过对数据的操作就可以完成对页面视图的渲染。当然还有很多其他的mvmm框架如Angular，React都是大同小异，本质上都是基于MVVM的理念。
然而vue以他独特的优势简单，快速，组合，紧凑，强大而迅速崛起

vue和jquey对比 jQuery是使用选择器（）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：(“lable”).val();,它还是依赖DOM元素的值。
Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

jQuery首先要获取到dom对象，然后对dom对象进行进行值的修改等操作
Vue是首先把值和js对象进行绑定，然后修改js对象的值，Vue框架就会自动把dom的值就行更新。
可以简单的理解为Vue帮我们做了dom操作，我们以后用Vue就需要修改对象的值和做好元素和对象的绑定，Vue这个框架就会自动帮我们做好dom的相关操作
这种dom元素跟随JS对象值的变化而变化叫做单向数据绑定，如果JS对象的值也跟随着dom

5.原生JS跨域

什么是跨域

如果两个网站之间的访问不在同源规定内就属于跨域

什么是跨域呢？简单来说就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或者c.a.com域名下的对象。

什么是同源策略？

协议域名端口号相同就是同源，同源策略是浏览器最核心最基本的安全功能

怎样解决跨域？

1.设置同域名代理服务器，在配置文件下设置
2.JSONP JSONP可用于解决主流浏览器的跨域数据访问的问题。但是有个缺陷，只能解决get请求，不能解决post请求。主要方法是：动态创建script标签并让src指向后端，后端返回脚本内容，触发浏览器立即加载并执行相应js代码，从而实现前后端无刷新数据交互。
就是前端提供函数的定义和script，后端提供实参和调用语句。

请求方：创建script,src指向响应方，同时传一个查询参数?callback = xxx(xxx是请求方的一个函数)
响应方：根据查询参数callback获得xxx，传入数据，并返回一条调用xxx函数的js命令 xxx这个函数名由字符串+随机数组成

Json与jsonp的区别？

json是浏览器与服务期间传输数据的方法，是一种轻量级的数据交互格式，与js对象格式相似。
jsonp是自创的模拟json格式，是为了解决跨域问题，jsonp最大的特点就是不支持同步处理，只能用get方式来请求数据

ajax是什么？

ajax是一种数据请求技术，可以实现页面无刷新，可以请求到不同的数据，他是一种编程技术而非与语言。

原生AJAX的请求步骤

1.创建对象
2.设置请求方式和请求地址
3.发送请求
4.监听状态变化
5.返回数据

BOM对象有几种，分别是什么？

5种分别是：
1.window 窗口对象顶级对象
2.navigator 浏览器信息
3.location 地址栏信息
4.history 历史记录
5.screen 可视化对象

jsBOM–浏览器对象模型 Bower object model
jsDOM–文档对象模型 document object model

本地储存cookie

认识cookie

cookie类型为小型文本文件，是某些网站为了辨别用于身份，由用户端计算机暂时或用永久保存的信息。

cookie的特点：

1.cookie可以实先跨页面全局变量
2.cookie可以跨同域名下的多个网页，但是不能跨多个域名使用
3.同一个网站中所有页面共享一套cookie
4.可以设置有效期限
5.储存空间只有4kb左右

cookie的优点：

cookie机制将信息储存于用户硬盘，因此可以作为跨页面全局变量，这是他的最大一个优点。

cookie的缺点：

1.cookie可能被禁用
2.cookie与浏览器相关，不能互相访问
3.cookie可能被删除
4.cookie安全性不够高
5.cookie储存空间很小只有4kb左右

cookie常用场合：

1.保存用户登录状态
2.跟踪用户行为等等

cookie可以用来干啥？

1.用于记录用户的登录信息
2.用于限制一些网站进入前的状态

本地储存：把数据储存在本地的浏览器上
1.cookie/session
2.storge 大容量
3.indexedDB 数据库
4.web sql 带sql命令的储存模式

本地存储 Storage

特点：
1.不会随着http请求发送给服务器
2.容易操作
3.移动端普及较高

localStorage为永久性保存数据，不会随着浏览器的关闭而消失，可以在同域名下使用。
设置：localStorage.setItem(‘下标’,‘值’)
读取：getItem
查看长度：.length()
查看建：key
删除：removeItem
清空：clear()

什么是面向对象？

oop编程技巧，通过构造函数的方式来实现。
类：对具有相同属性与功能事物的统称，是抽象的范围概念，
对象：由抽象的类实例化出来的个体，具备类中存在的属性与功能，是实实在在存在的

面向过程：
按照事件发展的规律，一步一步实现的方式就是面向过程
面向对象:
提前把程序可能出现的种种情况，全部写好，然后根据具体情况调用相应的方法。
面向对象的特点：封装继承多态
面向对象的核心要求就是把：把功能独立到方法中去
构造函数的特点：
1，构造函数需要用大驼峰来命名
2.需要用new的方式去实现实例化对象
3.以this的形式代表由类生成的对象

this指向问题：
1.在构造函数中，this代表了生成的对象
2.在事件中this代表了正在被出发的事件对象-标签
3.在forEach中this代表了顶层对象

js中的继承方法：
1.原型继承
2.构造继承
3.组合继承
4.拷贝继承
5.寄生继承
6.寄生组和继承

call与apply的区别？
相同点：都是重指向tihs
不同点：call的参数有多个，第一个参数是重新指向的对象，剩下的参数根据需要添加
apply参数只有两个，第一个为重新指向的对象，第二个为数组，需要的参数都放在数组中

1.闭包：
闭包是指：能够访问另一个函数作用域变量的函数

闭包的特点:
1.函数嵌套函数
2.内部函数可以访问外部函数的变量
3.参数和变量不会被回收
4.构造函数的闭包函数中this指向为window
没有计划的闭包就是浪费资源

回调函数：自己调用别的函数
递归函数：自己调用自己

基本数据类型都是深拷贝，引用数据类型都是浅拷贝
深拷贝：A赋值给B，B的改变不会影响A
浅拷贝：A赋值给B，B的改变会影响A

解决深浅拷贝问题：
设置空数组或对象

移动端布局规则：
1.固定布局
2.流式布局 @media百分比
3.Flex 弹性盒子
4.响应式布局 less/sass rem Media
5.BootStrap

移动端布局样式:
1.网格布局
2.百分比布局
3，圣杯布局
4.固定布局
5.输入布局
6.悬挂布局
7.九宫格布局

三个常用的viewport声明：
1.layout viewport 布局
2.visual viewport 浏览
3.ideal viewport 完整完美

flex中容器属性：
1.flex-direction:
2.flex-wrap:
3.flex-flow:
4.justift-content:
5.align-items:
6.align-contetn:

子属性：
1.order
2…flex-grow
3.flex0shrik
4.flex-basis
5.fex
6.align-self

BootStrap框架：
通俗来讲：bootstrap框架就是把搭建web所需要的所有样式，以类的方式写好，需要时在标签内引用就可以了
优点：
1.可以快速搭建web页面
2.页面具有响应式效果
缺点：
相对内容较大，服务器占用资源多，不适合制作简单的页面

6.es6重点

apply call bind 用法实例

1.apply执行函数对象冒充参数数组重指向this
2.call 执行函数对象冒充参数单个
3.bind 创建函数对象冒充参数默认

set特点是一个不重复数组，主要用于对数组去重

初始化 new Set

添加 add()

删除 delete()

获取长度 size

遍历 for of

转换为数组 Array.from()[…]

map类似于对象，但与对象又有区别主要区别在于:

map键名可以是任意对象，而对象的键名只能是字符串或者symbol符号
map是有序的按默认排序

let const var的区别

var声明的为函数级作用域，const和let为块级作用域
var有变量提升，而const和let没有
var可以重复声明，在同一作用域内，let不能重复声明 const不能修改
var不存在暂时性死区，而let const存在暂时性死区：
ps:暂时性死区：TDZ 会使原有的功能失效，比如你使用了let 那么它上面的一段代码就是失效

箭头函数与普通函数的区别：

箭头函数：不能当做构造函数来使用，相当于匿名函数，不能使用new命令，this永远指向上下文，任何方法都不能修改。箭头函数中不含有arguments
普通函数：可以使用构造函数，有匿名函数也有具名函数，可以使用new命令，谁调用它this就指向谁

构造函数是什么：
用new来定义的函数就是构造函数，构造函数的首字母一般

解构赋值是什么？

es6中允许按照一定的规则从数组和对象中取值对变量进行赋值

let [a, b] = [1, 2]                // 左右都是数组，可以解构赋值
let {a, b} = {a:1, b:2}            // 左右都是对象，可以解构赋值
let [obj, arr] = [{a:1}, [1, 2]]   // 左右都是对象，可以解构赋值

解构赋值的作用：

1.快速交换两个变量的值
2.可以接收函数返回的多个值

模板字符串 ``

扩展运算符三个点（…），它可以组装对象或者数组

class类使用详解

通过class定义类/实现类的继承
在类中通过constructor定义构造方法
通过new来创建类的实例
通过extends来实现类的继承
通过super调用父类的构造方法
重写从父类中继承的一般方法

async await

概念：真正意义上去解决异步回调的问题，同步流程表达异步操作
本质： Generator的语法糖

特点

不需要像Generator去调用next方法，遇到await等待，当前的异步操作完成就往下执行
返回的总是Promise对象，可以用then方法进行下一步操作
async取代Generator函数的星号*，await取代Generator的yield
语意上更为明确，使用简单，经临床验证，暂时没有任何副作用

keep-alive

以Vue提供了一个内置组件keep-alive来缓存组件内部状态，避免重新渲染。（在开发Vue项目的时候，有一部分部分组件是没必要多次渲染的）

keep-alive属性：

include - 字符串或正则表达式。只有匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何匹配的组件都不会被缓存。

用法：

缓存动态组件：
包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们（此种方式并无太大的实用意义）。

<!-- 基本 -->
<keep-alive>
  <component :is="view"></component>
</keep-alive>
 
<!-- 多个条件判断的子组件 -->
<keep-alive>
  <comp-a v-if="a > 1"></comp-a>
  <comp-b v-else></comp-b>
</keep-alive>

缓存路由组件：

使用keep-alive可以将所有路径匹配到的路由组件都缓存起来，包括路由组件里面的组件，keep-alive大多数使用场景就是这种。

方式一：vue文件中
<keep-alive>
    <router-view></router-view>
</keep-alive>

方式二：router.js中

{
        path: '/as',
        icon: 'earth',
        title: '赠品管理',
        name: 'as',
        component: Main,
        children: [{
            path: 'a',
            title: '赠品管理',
            name: 'a',
            component: () =>
                import ('@/views/a/index.vue'),
            meta:{
                keepAlive:true
            }
        }]
    }

缓存你想要缓存的：

使用v-if通过路由元信息判断缓存哪些路由

//router配置 new Router({ routes: [ { path: '/', name: 'home', component: Home, meta: { keepAlive: true // 需要被缓存 } }, { path: '/edit', name: 'edit', component: Edit, meta: { keepAlive: false // 不需要被缓存 } } ] });

生命周期钩子：

在被keep-alive包含的组件/路由中，会多出两个生命周期的钩子:activated 与 deactivated

activated在组件第一次渲染时会被调用，之后在每次缓存组件被激活时调用

deactivated：组件被停用(离开路由)时调用

注意：使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了。

我不想把查询条件和查询结果被缓存，那么我可以这样写：

mounted: function() {
     this.loaddata(1)
},
activated: function () {
     this.productclass.name=""//查询条件
     this.loaddata(1) //查询结果的方法
}

新增属性：

include：匹配的路由/组件会被缓存
exclude：匹配的路由/组件不会被缓存
include和exclude支持三种方式来有条件的缓存路由：采用逗号分隔的字符串形式，正则形式，数组形式。
正则和数组形式，必须采用v-bind形式来使用。

缓存组件的使用方式：

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

但更多场景中，我们会使用keep-alive来缓存路由：

<keep-alive include='a'>
    <router-view></router-view>
</keep-alive>

注：当组件被exclude匹配，该组件将不会被缓存，不会调用activated 和 deactivated。

nextTick

https://blog.csdn.net/qq_24147051/article/details/105774852?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162841345216780255276735%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=162841345216780255276735&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_alltop_click~default-2-105774852.pc_search_download_positive&utm_term=nexttick&spm=1018.2226.3001.4187

mixins

https://blog.csdn.net/qq_38128179/article/details/107817436?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162841359816780265465196%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=162841359816780265465196&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_alltop_positive~default-1-107817436.pc_search_download_positive&utm_term=mixins&spm=1018.2226.3001.4187

params与query的区别？

1.params类似于post，query更加类似于我们ajax中get传参，params在地址栏不显示参数。
2.params传值一刷新就没了，query传值刷新还存在。
3.query只能对应path，params只能对应name，否则传值就会失败

导航解析流程

1.导航被触发。
2.在失活的组件里调用离开守卫。
3.调用全局的 beforeEach 守卫。
4.在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
5.在路由配置里调用 beforeEnter。
6.解析异步路由组件。
7.在被激活的组件里调用 beforeRouteEnter。
8.调用全局的 beforeResolve 守卫 (2.5+)。
9.导航被确认。
10.调用全局的 afterEach 钩子。
11.触发 DOM 更新。
12.用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。

1、全局守卫： router.beforeEach
2、全局解析守卫： router.beforeResolve
3、全局后置钩子： router.afterEach
4、路由独享的守卫： beforeEnter
5、组件内的守卫： beforeRouteEnter、beforeRouteUpdate (2.2 新增)、beforeRouteLeave

MVVM

M:model 数据
V:view 视图
VM：view-model 相当于监听器通过视图监听绑定到视图上，实现了对DOM的监听，把数据给DOM，

v-model的实现原理：

双向数据绑定，原理就是，相当于一个语法糖，是value与input的语法糖，v-mode根据不同的标签生成不同的事件和事件
text 和 textarea 元素使用 value 属性和 input 事件

checkbox 和 radio 使用 checked 属性和 change 事件

select 字段将 value 作为 prop 并将 change 作为事件

可以将v-model进行如下改写：

<input v-model="sth" />
//  等同于
<input :value="sth" @input="sth = $event.target.value" />
//这个语法糖必须是固定的，也就是说属性必须为value，方法名必须为：input。

导航守卫：

1.params和query的区别

1）引入方式不同： query要使用path来引入，params要使用name来引入，接受参数格式类似，引用分别是this. $r o u t e . q u e r y . n a m e 和 t h i s .$ route.params.name
2）形成的路径不同（或者url地址显示不同）：
使用query传参的话，会在浏览器的url栏看到传的参数类似于get请求，使用params传参的话则不会，类似于post请求。
params传递后形成的路径：/router/123,/router/zhangsan
query传递后形成的路径：/router?id=666&name=zhangsan
3）是否受动态路径参数影响
Query传递的参数不会受路径参数的影响，会全部展示到路径上，刷新不会丢失query里面的数据；
params传递的参数会受路径参数的影响，只会展示含有动态路径参数的部分，刷新会丢失没有设置动态路径参数的params的数据。