首页  思维导图  详情

Vue知识总结

2024-02-21 18:06:48   0  举报





AI智能生成

为你推荐

查看更多



vue

Vue知识总结

vue

Vue.js

Vuex

vuejs

前端

作者其他创作

大纲/内容

插值表达式中支持表达式

如：{{name}}、{{ 1 + 5 }}

插值表达式

v-html：可以将html中的内容渲染出来

v-text：不能将html中的内容渲染出来(原样输出)，而是把html元素当成普通的字符串处理

区别

1. v-text 和 v-html

如：<div v-pre>{{name}} --- {{age}}</div>，编译输出{{name}} --- {{age}}

可以跳过编译过程，直接显示原始信息，即不会对内容进行变化，原样输出

2. v-pre

如：<div v-once>{{name}} --- {{age}}</div>

绑定数据，但是只绑定一次，当数据发生变化时，插值处的内容不会发生变化

3. v-once

如：<div v-on:click=\"xx\">同意我帅就点我</div>或者<div @click=\"xx\">点个赞</div>

格式：v-on:事件名或者 @事件名

v-on: 的执行函数要写在Vue 实例的methods：function{ alert(666) }方法中

4.v-on：为元素绑定事件

如：<div @click.stop=\"xx\">同意我帅就点我</div>

.stop: 阻止事件的扩散

如：<div @click.prevent=\"xx\">同意我帅就点我</div>

.prevent: 阻止默认动作

5. 事件修饰符

如：<a v-bind:helf=\"baidu\">百度</a>或者<a :helf=\"baidu\">百度</a>

用法：v-bind:属性名=\"属性值\"或者:属性名=\"属性值\"

v-bind中的属性值一般是vue实例的data中的数据。

注意v-bind: 一般绑定的是一个变量

6. v-bind: 绑定元素的属性

methods: {xxx: function(e){this.name = e.target.value; }}

如：<input type=\"text\" v-bind:value=\"name\" v-on:keyup=\"xxx\"> <div>{{name}}</div>

7. 可以使用v-on 和 v-bind 实现数据的双向绑定

如：<div v-bind:class=\"'red'\">点个赞</div>

操作字符串型的class属性

如：<div v-bind:class=\

使用对象格式处理class属性

data: {className: \"\

如：<div :class=\"[className]\">点个赞</div><button @click=\"changeBlue\">变蓝</button><button @click=\"cancel\">恢复</button>

使用数组形式操作class属性

data: {blueClass: \"\

如：<div :class=\

使用对象和数组混合的形式操作class属性

data: {x1: [\"borderStyle\

如：<div :class=\"x1\">点个赞</div> <button @click=\"changeBlue\">变蓝</button>

简化操作class属性(数组操作)

如：<div :class=\"x2\">点个赞</div><button @click=\"changeBlue\">变蓝</button><button @click=\"changeSmall\">变小</button><button @click=\"addBorder\">加个边框</button>

注意事项：对于addBorder属性，在这里由于在data中没有对他进行任何操作，所以他属于我们在methods中动态添加的属性，因为动态添加的数据在这里不会自动更新数据，所以我们可以在methods中添加this.$forceUpdate()进行手动更新数据。

简化操作class属性(对象操作)

如：<div class=\"abc\" v-bind:class=\"x3\">点个赞</div><button @click=\"changeBlue\">变蓝</button>

所谓默认的class是指在使用`:class`添加class的时候，元素已经有了class

默认class的处理

data: {x4: {// 键是css属性名，值是css属性值backgroundColor: \"\

如：<div style=\"height: 100px;\" :style=\"x4\">点个赞</div> <button @click=\"changeBlue\">变蓝</button> <button @click=\"changeWidth\">改变宽度</button>

操作style属性

8. 样式操作

常用的指令

let vm = new Vue({el: \"#app\

如：<div>{{name}}</div> <input type=\"text\" v-model=\"name\">

数据的双向绑定：v-model

如：<form action=\"\"> <textarea cols=\"30\" rows=\"10\" v-model=\"remark\"></textarea> </form>

行文本的绑定方式和单行文本的绑定方式完全一样

多行文本

如： <div> <input type=\"radio\" value=\"0\" v-model=\"shuai\">帅 <input type=\"radio\" value=\"1\" v-model=\"shuai\">丑 </div>

多个单选按钮可以绑定相同的变量，注意设置value

单选按钮

如：<div> <input type=\"checkbox\" value=\"1\" v-model=\"hobby\"> <input type=\"checkbox\" value=\"2\" v-model=\"hobby\"> </div>

为多个复选框绑定相同的变量即可，但是该变量的值为一个数组

复选框

如：<div> <select v-model=\"hobby\"> <option value=\"1\">学习Java从入门到放弃</option> <option value=\"1\">学习Vue从入门到大神</option> </select> </div>

单选下拉列表

如：<div> <select v-model=\"hobby\" multiple=\"true\"> <option value=\"1\">学习Java从入门到放弃</option> <option value=\"1\">学习Vue从入门到大神</option> </select> </div>

将select的multiple属性设置为true，即可将select变成多选下拉，按住ctrl或者command键可以进行多选操作。vue中，多选下拉绑定的值的类型应为数组。

多选下拉列表

如：<form action=\"\"> <div> <input type=\"text\" v-model=\"x1\"> {{x1}} </div> <div> <input type=\"text\" v-model.lazy=\"x2\"> {{x2}} </div> </form>

在默认情况下，v-model 在每次 input 有内容变化时将输入框的值与数据进行同步。如果添加 `lazy` 修饰符，则在元素失去焦点时才进行同步。

.lazy

如：<input v-model.number=\"age\" type=\"number\">

自动将用户的输入值转为数值类型

这通常很有用，因为即使在 type=\"number\" 时，HTML 输入元素的值也总会返回字符串。如果这个值无法被 parseFloat() 解析，则会返回原始的值。

.number

如：<input v-model.trim=\"msg\">

自动过滤用户输入的首尾空白字符

.trim

表单修饰符

常见指令(表单)

vue中提供的常见的分支结构指令有：v-if、v-else、v-else-if、v-show。

如：<div id=\"app\"> <div v-if=\"faceValue > 95\">你长得好漂亮</div> <div v-else-if=\"faceValue <= 94 && faceValue >= 85\">你长得漂亮</div> <div v-else-if=\"faceValue <= 84 && faceValue >= 75\">漂亮</div> <div v-else-if=\"faceValue <= 74\">你长得有点感人</div> </div>

v-if、v-else、v-else-if的用法

data: {show: true}

如：<div v-show=\"show\">显示</div>

v-show可以控制元素是否显示到页面中

v-show 的用法

data: {hobby: [\"游泳\

如：<ul> <li v-for=\"i in hobby\">{{i}}</li><li>********************************</li> <li v-for=\

在遍历的过程中，给每项元素设置一个唯一的key值，有助于提高vue的性能，对我们开发以及显示不会有任何影响。当然如果不设置key值也可以，但是性能会略慢，所以推荐设置key值。

如：<li :key=\"index\" v-for=\

注意：v-for 遍历中的key

如：<ul> <li v-if=\"value != '女'\" v-for=\

使用 v-for 遍历对象

v-if、v-else、v-else-if：用来确定元素是否被渲染，相当于DOM元素的添加和删除。

v-show：控制的元素已经渲染，但是可能不显示，且性能开销小

v-show和 v-if、v-else、v-else-if 的区别

使用 v-for 遍历数组

循环结构指令

常见指令(流程控制)

data: {girl: { name: \"小红\

如：<ul> <li v-for=\

从例子上可以看出，我们可以使用 this.$forceUpdate(); 把动态添加的数据渲染出来，这种用法虽然可以，但是比较耗费性能，那有没有其它的解决办法呢，往下看

data: { girl: { name: \"马冬梅\

如：<ul> <li v-for=\

从上面例子中我们可以看出和数组一样使用的是Vue的静态方法set() 和 vue实例的 $set() 方法，推荐使用这两种方式进行类似的操作

由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除，因此视图也无法自动的更新，但是怎么解决这种问题呢？来看例子

Vue中对对象的更新检测

push()、pop()、shift()、unshift()、solt()、splice()、reverse()

数组的变异方法会改变调用了这些方法的原始数组，简单来说就是调用以上这些方法会改变原数组。

数组调用以上这些方法会自动触发视图更新，所谓视图自动更新，就是指当数据发生变化时，页面中渲染的内容也会跟着一起马上发生变化。

数组的变异方法

filter()、concat()、slice()

所谓替换数组方法，就是指数组调用了该类方法的时候，并不会改变原始数组，而是会新创建一个新数组并返回

替换数组方法

方法一

方法二

如：<ul> <li v-for=\"i in hobby\">{{ i }}</li> </ul> <button @click=\"changeData\" type=\"button\">点击一下</button>

示例

解决方案

通过对数组的索引去操作数组，vue并不能检测的到，因此视图也不会发生变化。因为索引会直接更改数组的值

通过索引操作数组

Vue中对数组的更新检测

如：<input type=\"text\" v-model=\"xxx\">  <div>{{ yyy }}</div>

如：<input type=\"text\" v-model=\"xxx\">  <div>{{ yyy }}</div> <div>{{ yyy }}</div> <div>{{ yyy }}</div>

计算属性 yyy 的对应的函数已经被执行过，并且数据被缓存起来，当后面再调用的计算属性 yyy 的时候，不需要再次执行函数。因此，对于比较复杂的逻辑或者需要多次使用的逻辑可以写到计算属性中，从而达到提高效率的目的。当变量 xxx 的值发生变化的时候会重新执行。

methods：方法会被多次调用，因此我们可以认为，默认情况下，方法的逻辑是不会被缓存的

计算属性computed和方法methods的区别

计算属性的缓存

如：<input type=\"text\" v-model=\"xxx\"> <div>{{yyy}}</div>

侦听器主要用来侦听 data 中的数据的变化的，一旦侦听到数据的变化，就会触发侦听器中所定义的同名的方法，一般用在当数据变化的时候需要执行异步或者比较消耗资源的操作的时候。侦听器函数要写到 watch 中

侦听器

过滤器可以用在两个地方：插值表达式和 v-bind 表达式中

全局过滤器

如：<div>{{sex}}</div>  <div>{{sex | toEnglish}}</div>

将过滤器定义到一个vue实例中

局部过滤器

如：<div>{{time | formatDate('Y-M-D h:m:s')}}</div> <div>{{time | formatDate('Y-M-D')}}</div> <div>{{time | formatDate('Y-M-D h:m')}}</div> <div>{{time | formatDate('h:m:s Y-M-D')}}</div>

第一个参数表示要被处理的数据，给过滤器传递参数，则可以从第二个参数开始进行传递

带参数的过滤器

beforeCreate、created、beforeMount、mounted）

挂载阶段

（ beforeUodate、updated）

更新阶段

（ beforeDestroy、destroyed ）

销毁阶段

目前vue提供了11个生命周期函数，相对常见的有8个，分别是

如：<div id=\"test\"> {{x1}} </div>

https://blog.csdn.net/bigpatten/article/details/104989324

案例：ToDoList功能实现

基本用法

vue 实例从创建到销毁，也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程。在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会

生命周期函数

过滤器

计算属性

常见特性

Vue的模板语法

顾名思义，所谓全局组卷简单来说就是定义再一个Vue实例的外面，在任何地方都可以使用

局部组件就收一全局组件相反的组件，定义在Vue实例的里面

1. 组件可以多次重负使用

2. 多次使用的组件之间是相互独立的

3. 其实一个Vue实例也是一个组件

如：上面例子中的 <btn>点一下</btn> 或者 <btn />

4. 组件在使用时类似一一个自定义标签

5. 组件不能直接使用，需要放到Vue实例或其它自建中才能使用，而这样就构成了父子组件

如：{ template: '<button v-on:click=\"count++\">您点击了 {{ count }} 次. </button>' }

6. 组建的 template 的内容必须包含在一个根元素中(只能有一个跟标签)，且支持ES6的模板语法

7. 一个组件也可以在另一个组件中使用

8. 对于驼峰命名的组件，如果直接在跟标签中使用，则要按照横线链接的方式

关于组件的一些总结和注意点

Vue的全局组件和局部组件

所谓父子组件，其实就是上下级关系，就比如 <ul> 和 <li> 一样

父子组件的划分

子组件预留的位置：<slot>默认内容<slot>

父组件向子组件分发内容：<组件名称>要分发的内容</组件名称>

示例：<div id=\"app\"> <btn></btn> <btn>点个赞</btn> </div>

注：如果使用子组件的时候没有传递数据，则使用子组件插槽的默认内容，如：<btn></btn>是” 点我 “。如果使用子组件的时候传递的有数据，则使用父组件传递的内容，如：“ <btn>我好帅</btn> ”

基本使用

Vue.component(\"xxx\

如：<xxx> <div slot=\"first\">学习Java从入门到放弃</div> <div slot=\"second\">数据库从删库到跑路</div> <div slot=\"three\">学习前端从入门到大神</div> </xxx>

具名插槽：简单来说就是有名字的插槽，其父组件可以根据名字向子组件分发内容。

父组件分发内容时，是按照名字分发到对应的插槽中，如果分发的内容没有名字，就是分发到无名字的子组件插槽。

分发规则

<xxx> <template> <div slot=\"first\">学习Java从入门到放弃</div> <div slot=\"second\">数据库从删库到跑路</div> <div slot=\"three\">学习前端从入门到大神</div> </template></xxx> //这样同样可以达到上面代码的效果

使用 template 标签进行批量具名分发

作用域插槽一般用在子组件的内容需要在父组件中处理的时候。

template: `<ul><li v-for=\"i in kings\"><slot :king=\"i\">{{i.name}}</slot></li></ul>`

从例子中我们可以看出，在子组件中定义插槽的时候，可以绑定一个属性(名字自定)，该属性绑定的数据可以被父组件捕获到

<xxx>  <template slot-scope=\"sonData\">  <span v-if=\"sonData.king.camp =='蜀'\" style=\"color:red;\"> {{sonData.king.name}}</span> <span v-else>{{sonData.king.name}}</span> </template></xxx>

在父组件中，可以通过 slot-scope 属性捕获到子组件绑定的数据，然后我们就可以自由的修改数据，修改后的数据会再次分发到子组件中

如：<xxx> <template slot-scope=\"sonData\"> <div v-if=\"sonData.king.camp == '蜀'\" style=\"color: red;\"> {{sonData.king.name}} -- {{sonData.king.camp}}</div> <div v-else>{{sonData.king.name}} -- {{sonData.king.camp}} </div> </template> </xxx>

子主题

作用域插槽

所谓组件插槽，简单来说就是在子组件中预留一定的位置，父组件可以向该位置传递内容

组件插槽

如：<div id=\"app\">  <my-form :xxx='666'></my-form>  <my-form xxx=\"父级给的\"></my-form> </div>

父组件向子组件发送数据：通过属性值，将数据传递给子组件

子组件接收父组件传来的数据

父子组件向子组件传值：简单来说就是父子组件之间的通信

如：<div id=\"test\">   <son :xxx='\"妈妈给的\"' title='人民币'></son> <son xxx=\"爸爸给的\" :num='100'></son> </div>

由于html不区分大小写，父组件使用属性向子组件传值的时候，尽量不要用驼峰法，如果使用驼峰法，则子组件在接受的时候则要全按照小写处理。

如果父组件(标签中)使用属性向子组件传值的时候使用的是横线连接法，则子组件在接收数据的时候，要用驼峰法。

如果在组件的`template`中向其子组件传递数据，则属性命名规则不受驼峰法限制。

在使用props传递数据时，一般是遵守`单向数据流原则`：只允许父组件将数据传递给子组件，不允许子组件直接修改这些数据。

注意事项

props的数据验证

父子组件向子组件传值

template: `<button @click=\"$emit('change-blue')\" type=\"button\">变蓝</button>`

在这个例子中，我们可以看出其子组件是这样做的

<son @change-blue=\"cb\"></son>

父组件提前做好自定义组件的监听

子组件是通过自定义事件的形式向父组件传递信息，具体来说就是：在子组件需要向父组件传值的时候，触发一个自定义事件，而在父组件中提前监听着该事件。

<!-- @click=\

子组件如果想向父组件传值，可以通过`$emit`的第二个参数携带数据

<son @change-blue=\"cb($event)\"></son>

父组件这样接收数据

子组件向父组件传值

let eventCenter = new Vue( );

首先：我们要设置一个事件中心，就是一个Vue实例

eventCenter.$on('事件名称'，'出发后要执行的函数')；

监听事件

eventCenter.$emit('事件名称'，'携带的数据')；

触发事件

eventCenter.$off('事件名称')

销毁事件

然后是操作事件

在Vue中兄弟之间不能直接传值，我们可以通过设置一个事件中心的方式进行传值。简单来说就是事件中心就是一个媒介，由他实现兄弟之间的传值。

// 设置一个事件中心let eventCenter = new Vue();// 刘备组件Vue.component(\"liu-bei\

如：<liu-bei></liu-bei> <zhang-fei></zhang-fei>  <button @click=\"kill\" type=\"button\">销毁事件</button>

兄弟组件之间的传值

<component></component>

<component :is='xxx'></component>

简单来说，动态组件就是能够在多个组件之间进行切换的组件

如：<div id=\"test\"><div class=\"head\"><button @click=\"changeCity('meiguo')\" type=\"button\">美国</button><button @click=\"changeCity('faguo')\" type=\"button\">法国</button><button @click=\"changeCity('yindu')\" type=\"button\">印度</button></div><component :is=\"currentCity\"></component></div>

默认情况下，切换动态组件，会重新渲染，这不仅会带来性能问题，同时也不能保持组件的状态，于是，于是我们使用动态组建的缓存将将给我们极大的方便。

如上面例子中：<keep-alive><component :is=\"currentCity\"></component></keep-alive>

实现动态组件的缓存非常简单，就是用一个<eep-alive></keep-alive>标签作为父级包括着我们定义的组件即可。

如：<keep-alive exclude=\"zhengzhou\"><component :is=\"currentCity\"></component></keep-alive>

exclude ：名称匹配的组件不会被缓存，其值可以是字符串或者正则表达式

如：<keep-alive include=\"luoyang\"><component :is=\"currentCity\"></component></keep-alive>

include：只有名称匹配的组件会被缓存，其值可以是字符串或者正则表达式

如：<keep-alive max=\"2\"><component :is=\"currentCity\"></component></keep-alive>

max：最多可以缓存多少个组件，其值是数字

注：keep-alive 目前支持3个属性分别是

如：<keep-alive :include=\"/o/\"><component :is=\"currentCity\"></component></keep-alive>

值为正则表达式的时候，必须使用`v-bind`进行绑定

如：<keep-alive :include=\"/o/\" exclude=\"zhengzhou\"><component :is=\"currentCity\"></component></keep-alive>

exclude 比 include 的优先级高，不支持字符串和正则

如：<keep-alive include=\

需要匹配多个组件名称的时候，可以使用英文逗号，且中间不能有空格

注意事项

动态组建的缓存

动态组件

Vue的组件

1.引入依赖文件

<div id=\"app\"><p><router-link to=\"/foo\">Go to Foo</router-link><router-link to=\"/bar\">Go to Bar</router-link></p></div>

2.添加路由链接

3.添加路由出口

// 这里是路由组件，其实就是路由实例的子组件const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }

4.定义路由组件

5.定义路由规则

const router = new VueRouter({// 这里是上一步创建的路由规则routes // (缩写) 相当于 routes: routes})；

6.创建路由实例

7.将路由对象挂载到Vue根实例对象上

如：//获取一个VueRouter实例const router = new VueRouter({//定义路由规则 routes: [ {//引入路径path: path: \"/news\

注意：上面的第四、第五步可以写到第六步中

使用Vue-router可以从一下7步入手，分别是

// 0. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)// 1. 定义 (路由) 组件。// 可以从其他文件 import 进来const Foo = { template: '<div>foo</div>' }const Bar = { template: '<div>bar</div>' }// 2. 定义路由// 每个路由应该映射一个组件。其中\"component\

如：<div id=\"app\"><h1>Hello App!</h1><p><router-link to=\"/foo\">Go to Foo</router-link><router-link to=\"/bar\">Go to Bar</router-link></p><router-view></router-view></div>

Vue-router的使用

如：<div id=\"app\"><div class=\"nav\"><router-link to=\"/\">首页</router-link><router-link to=\"/news/1\">新闻1</router-link><router-link to=\"/news/2\">新闻2</router-link><router-link to=\"/imgs\">图片</router-link></div><router-view></router-view></div>

来看一个例子

有前面的例子我们便可以看出，假如由1千个路由组件，我们不可能定义1千次，于是引入动态路由将极大的方便我们的编程。

如：let News = {template: '<div><h2>这是新闻页{{$route.params.id}}内容</h2></div>'};

在路由组件中使用`{{$route.params.id}}` 获取，注意这里的`id`是和前面的`:id`相对应的

方式1

使用props传参的方式

方式2

使用props传参的方式（同时携带额外参数）

方式3

动态路由传参

// 跳转到某个地址this.$router.push('hash地址')

// 前进或者后退正整数表示前进，负数表示后退this.$router.go(1)

在Vue Router中常见的API有

比如在路由组件的时候

不同于<a>标签，我们之前应该用过location.href实现的页面跳转就是编程式导航。

编程式导航

简单来说，就是给路由起个别名

如：<router-link :to=\

给路由规则起过别名后，我们就可以在`<router-link>` 中动态的绑定`to`属性

如果使用编程式导航，也可以使用类似的

命名路由的使用

命名路由

简单来说，就是改变路由的方向，让其指向另一个位置。

路由的重定向

let News = {template: ` <div><h2>这是新闻内容</h2><router-link to=\"/news/SZ\">时政新闻</router-link><router-link to=\"/news/YL\

如：<div id=\"app\"><div class=\"nav\"><router-link to=\"/\">首页</router-link><router-link to=\"/news\">新闻</router-link></div><router-view></router-view></div>

嵌套路由

Vue Router的具体示例

直接在路由实例上操作的钩子函数，它的特点是所有路由配置的组件都会触发该函数的执行，目前一共有3个全局钩子函数：`beforeEach`、`beforeResolve` 、`afterEach`

全局守卫

一般用在路由还没跳转前执行，以免跳转了再执行而造成为时已晚。一般可以用来验证登录等操作。

to: Route 即将访问的路由对象from: Route从哪个路由对象来的next: Function该函数表示放行，可以有4种用法，常见的有3种用法：next()直接放行next('/user')跳转到 /user 路由next(false)中断本次导航，重置到from路由对应的地址，相当于返回上一步

全局前置守卫（beforeEach）

全局解析守卫https://router.vuejs.org/zh/guide/advanced/navigation-guards.html全局后置守卫https://router.vuejs.org/zh/guide/advanced/navigation-guards.html

全局解析守卫(beforeResolve)和全局后置守卫(afterEach)

路由独享守卫是针对某个路由规则而言的，它被定义在路由规则内

路由独享守卫(beforeEnter)

是指定义在组件内部的导航守卫，只针对该组件有效，它有3个钩子函数，分别是：beforeRouteEnter、beforeRouteUpdate和 beforeRouteLeave。

组件内的守卫

简单点，我们可以将导航守卫看作是一个Vue Router的生命周期函数

导航守卫

定义路由的时候可以配置 `meta` 字段

获取当前路由对象：console.log(this.$route)

再比如在导航守卫上使用