Vue2学习笔记

最新推荐文章于 2024-06-26 12:57:55 发布

2401_85124682

最新推荐文章于 2024-06-26 12:57:55 发布

阅读量954

点赞数 22

分类专栏：【vip1024c】文章标签：学习笔记 javascript

本文链接：https://blog.csdn.net/2401_85124682/article/details/139581588

版权

【vip1024c】专栏收录该内容

13 篇文章 0 订阅

订阅专栏

隐含属性对象: $event 使用@xxx=“fun(参数)” ，event默认参数不在传递，我们需要$event

事件的基本使用

欢迎来到{{name}}学习

<button @click=“showInfo1”>点我提示信息1（不传参）

<button @click=“showInfo2($event,66)”>点我提示信息2（传参）

3). 事件修饰符

.prevent : 阻止事件的默认行为 event.preventDefault()
.stop : 停止事件冒泡 event.stopPropagation()
once：事件只触发一次（常用）；
capture：使用事件的捕获模式；
self：只有event.target是当前操作的元素时才触发事件；
passive：事件的默认行为立即执行，无需等待事件回调执行完毕；
native：给组件绑定时认为是原生事件
修饰符可以连续写

事件修饰符

欢迎来到{{name}}学习

<a href=“http://www.atguigu.com” @click.prevent=“showInfo”>点我提示信息

<button @click.stop=“showInfo”>点我提示信息

<button @click.once=“showInfo”>点我提示信息

div1

div2

<button @click=“showInfo”>点我提示信息

1
2
3
4
4). 按键修饰符
1. keycode : 操作的是某个 keycode 值的键
2. .keyName : 操作的某个按键名的键(少部分)
3. 按键修饰符可以连写
键盘事件

欢迎来到{{name}}学习

<input type=“text” placeholder=“按下回车提示输入” @keydown.huiche=“showInfo”>

9. 计算属性与监视

 1). 计算属性-computed
1. 要显示的数据不存在，要通过计算得来。
2. 在 computed 对象中定义计算属性。
3. 在页面中使用{{方法名}}来显示计算的结果。
4. 计算属性有缓存
5. fullName中get函数this指向为Vue实例对象vm
6. 只有依赖的属性变化变化时页面该计算属性才会被调用
姓名案例_计算属性实现

姓：

名：

测试：

全名：{{fullName}}

2). 监视属性-watch
1. 通过通过 vm 对象的$watch()或 watch 配置来监视指定的属性
2. 当属性变化时, 回调函数自动调用, 在函数内部进行计算 ,计算属性也可以被监视
天气案例_监视属性

今天天气很{{info}}

<button @click=“changeWeather”>切换天气

 深度监视
天气案例_深度监视

今天天气很{{info}}

<button @click=“changeWeather”>切换天气

a的值是:{{numbers.a}}

<button @click=“numbers.a++”>点我让a+1

b的值是:{{numbers.b}}

<button @click=“numbers.b++”>点我让b+1

<button @click=“numbers = {a:666,b:888,c:{d:{e:5}}}”>彻底替换掉numbers

{{numbers.c.d.e}}

监视属性_简写
天气案例_监视属性_简写

今天天气很{{info}}

<button @click=“changeWeather”>切换天气

 3)监视属性对比计算属性

监视属性可以实现异步操作
姓名案例_watch实现

姓：

名：

全名：{{fullName}}

10. class 与 style 绑定

 1). 理解
1. 在应用界面中, 某个(些)元素的样式是变化的
2. class/style 绑定就是专门用来实现动态样式效果的技术
3. 利用了v-bind的简写
2). class 绑定
1. :class=‘xxx’
2. 表达式是字符串: ‘classA’
3. 表达式是对象: {classA:isA, classB: isB}
4. 表达式是数组: [‘classA’, ‘classB’]
3). style 绑定
1. :style=“{ color: activeColor, fontSize: fontSize + ‘px’ }”
2. 其中 activeColor/fontSize 是 data 属性
3. 可以是对象，或这是数组，这个数组的元素是对象
绑定样式

{{name}}

{{name}}

{{name}}

{{name}}

11. 条件渲染

 1). 条件渲染指令
1. v-if v-else-if与 v-else ,如果出现，一组必须在一起，中间不可以写其他标签
2. v-show
2). 比较 v-if 与 v-show
1. 如果需要频繁切换 v-show 较好，v-if会添加删除DOM
2. 当条件不成立时, v-if 的所有子节点不会解析(项目中使用),v-if配合标签template使用，v-show不可以与template配合使用
条件渲染

当前的n值是:{{n}}

<button @click=“n++”>点我n+1

你好

尚硅谷

北京

 12. 列表渲染

 列表显示指令
- 遍历数组: v-for / index
- 遍历对象: v-for / key
1.基本列表
1. v-for of/ v-for in 作用相同
2. 接收两个内容，第一个是内容的值，第二个是索引或对象属性名
{{p.name}}-{{p.age}}
1. 可遍历：数组、对象、字符串（用的很少）、指定次数（用的很少）
2. :key="keyvalue" ，需要指定key
基本列表

人员列表（遍历数组）
{{p.name}}-{{p.age}}

汽车信息（遍历对象）
{{k}}-{{value}}

测试遍历字符串（用得少）
{{char}}-{{index}}

测试遍历指定次数（用得少）
{{index}}-{{number}}

2.重点：key的原理
key的原理

人员列表（遍历数组）

<button @click.once=“add”>添加一个老刘
{{p.name}}-{{p.age}}

3.列表过滤
列表过滤

人员列表
{{p.name}}-{{p.age}}-{{p.sex}}
列表过滤

人员列表
{{p.name}}-{{p.age}}-{{p.sex}}

4.列表排序
列表排序

人员列表

<button @click=“sortType = 2”>年龄升序

<button @click=“sortType = 1”>年龄降序

<button @click=“sortType = 0”>原顺序
{{p.name}}-{{p.age}}-{{p.sex}}

13.Vue监测数据改变

 1.模拟
Document
2.总结
总结数据监视

学生信息

<button @click=“student.age++”>年龄+1岁

<button @click=“addSex”>添加性别属性，默认值：男

<button @click="student.sex = ‘未知’ ">修改性别

<button @click=“addFriend”>在列表首位添加一个朋友

<button @click=“updateFirstFriendName”>修改第一个朋友的名字为：张三

<button @click=“addHobby”>添加一个爱好

<button @click=“updateHobby”>修改第一个爱好为：开车

<button @click=“removeSmoke”>过滤掉爱好中的抽烟

姓名：{{student.name}}

年龄：{{student.age}}

性别：{{student.sex}}

爱好：
{{h}}

朋友们：
{{f.name}}–{{f.age}}

3.数据劫持

我的理解：data传入一个对象，vue一个变量指向data管理的对象，再让data指向新的对象，这个新的对象通过getter和setter管理原对象内容

 14. 收集表单数据

v-model:三个修饰符: lazy number trim
收集表单数据

账号：

密码：

年龄：

性别：

男

女

爱好：

学习

打游戏

吃饭

所属校区
请选择校区北京上海深圳武汉

其他信息：

阅读并接受《用户协议》

提交

 15. 过滤器

vue3已经将其移除

过滤器虽然这看起来很方便，但它需要一个自定义语法，打破大括号内表达式是 “只是 JavaScript” (使用管道符"|")的假设，这不仅有学习成本，而且有实现成本！建议用方法调用或计算属性去替换过滤器。

理解过滤器
1. 功能: 对要显示的数据进行特定格式化后再显示
2. 注意: 并没有改变原本的数据, 是产生新的对应的数据
filters: {

timeFormater(value, str = ‘YYYY年MM月DD日 HH:mm:ss’) {

// console.log(‘@’,value)

return dayjs(value).format(str)

}

}

{time | timeFormater}}
过滤器

显示格式化后的时间

现在是：{{fmtTime}}

现在是：{{getFmtTime()}}

现在是：{{time | timeFormater}}

现在是：{{time | timeFormater('YYYY_MM_DD') }}

现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}

尚硅谷

{{msg | mySlice}}

16. 内置指令与自定义指令

 1). 常用内置指令

 1. v-if : 如果为 true, 当前标签才会输出到页面

 2. v-else: 如果为 false, 当前标签才会输出到页面

 3. v-show : 通过控制 display 样式来控制显示/隐藏

 4. v-for : 遍历数组/对象

 5. v-on : 绑定事件监听, 一般简写为@

6. v-bind : 绑定解析表达式, 可以省略 v-bind

7. v-model : 双向数据绑定

 8. v-text : 更新元素的 textContent

data:{

name:‘尚硅谷’,

str:‘

你好啊！
’//标签不会被解析

}

//作用：向其所在的节点中渲染文本内容。

//与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会

 9. v-html : 更新元素的 innerHTML

!!慎用，有安全问题

data:{

name:‘尚硅谷’,

str:‘

你好啊！
’//标签会被解析

}
v-html指令

你好，{{name}}

10. v-cloak :

v-cloak指令（没有值）：

1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

2.使用css配合v-cloak可以解决网速慢时页面展示出{{xxx}}的问题。

{{name}}

与 css 配合: [v-cloak] { display: none }

11.v-once

v-once指令：

1.v-once所在节点在初次动态渲染后，就视为静态内容了。

2.以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

初始化的n值是:{{n}}

12.v-pre

v-pre指令：

1.跳过其所在节点的编译过程。

2.可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译。

Vue其实很简单

 2). 自定义指令
- 定义不加 v-使用加v-
- 指令的函数this指向window
- bind inserted update 在指定时间点调用，可以看作为钩子函数
1. 注册全局指令

Vue.directive(‘my-directive’, function(el, binding){

el.innerHTML = binding.value.toupperCase()

})

2. 注册局部指令

directives : {

‘my-directive’ : {

bind (el, binding) {

el.innerHTML = binding.value.toupperCase()

}

}

}

3. 使用指令

v-my-directive=‘xxx’
自定义指令

{{name}}

当前的n值是：

放大10倍后的n值是：

<button @click=“n++”>点我n+1

17. Vue 实例生命周期

 1). 生命周期流程图
- vm.$el 存真实DOM el配置项被其替代
- template配置项里面需要有一个根标签，且不能为<template>
- beforeUpdate 数据是新的，页面未更新，数据不同步
- vm.$destory 销毁vm，但是保留成果
销毁时间监听，子组件，以及自定义事件
- Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
2). vue 生命周期分析
- 生命周期函数this指向Vue实例对象
生命周期：

1.又名：生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向是vm 或组件实例对象。

1. 初始化显示
1. beforeCreate()
2. created()
3. beforeMount()
4. mounted()
2. 更新状态: this.xxx = value
1. beforeUpdate()
2. updated()
3 销毁 vue 实例: vm.$destory()
1. beforeDestory()
2. destoryed()
4. 常用的生命周期方法
1. mounted(): 发送 ajax 请求, 启动定时器等异步任务
2. beforeDestory(): 做收尾工作, 如: 清除定时器
3. 还有三个生命周期钩子activated deactivated this.$nextTick(回调函数)
引出生命周期

欢迎学习Vue

<button @click=“opacity = 1”>透明度设置为1

<button @click=“stop”>点我停止变换

二、Vue 组件化编程

 1 模块与组件、模块化与组件化

 1). 模块
1. 理解: 向外提供特定功能的 js 程序, 一般就是一个 js 文件
2. 为什么: js 文件很多很复杂
3. 作用: 复用 js, 简化 js 的编写, 提高 js 运行效率
2). 组件

封装
1. 理解: 用来实现局部(特定)功能效果的代码和资源集合(html/css/js/image……)
2. 为什么: 一个界面的功能很复杂
3. 作用: 复用编码, 简化项目编码, 提高运行效率
3). 模块化

当应用中的 js 都以模块来编写的, 那这个应用就是一个模块化的应用。

4). 组件化

当应用中的功能都是多组件的方式来编写的, 那这个应用就是一个组件化的应用,。

2.vue组件**
- 使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
- 1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
- 2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
每个实例可以维护一份被返回对象的独立拷贝
- 使用template可以配置组件结构（作为组件配置项，他的值是字符串）
- 注册组件
- 1.局部注册：靠new Vue的时候传入components选项
- 2.全局注册：靠Vue.component(‘组件名’,组件)
- 编写组件标签 <school></school>
- 命名和使用注意点
几个注意点：

1.关于组件名:

一个单词组成：

第一种写法(首字母小写)：school

第二种写法(首字母大写)：School

多个单词组成：

第一种写法(kebab-case命名)：my-school(使用引号包起来)

第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

备注：

(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。

(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

2.关于组件标签:

第一种写法：

第二种写法：
- 备注：不用使用脚手架时，会导致后续组件不能渲染。
3.一个简写方式：

const school = Vue.extend(options) 可简写为：const school = options
- 简写方式 const school = Vue.extend(options) 可简写为：const school = options
- 就算不写，在声明组件时也会帮我们调用这个函数，后续单文件组件，项目中我们都是把组件直接写成配置对象
- 需要掌握组件嵌套
组件的嵌套

 3. 非单文件组件

一个文件有多个组件
1. 模板编写没有提示
2. 没有构建过程, 无法将 ES6 转换成 ES5
3. 不支持组件的 CSS
4. 真正开发中几乎不用
基本使用

{{msg}}

4.VueComponent构造函数（Vue组件）
- 与高级的组件间通信事件总线 有关
- 学VueComponent源码分析也有帮助
关于VueComponent
- school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
- 我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。
- 特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！（即每个组件的构造函数是不同的）
- 关于this指向：
- 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。
- new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【Vue实例对象】。
- VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
- Vue的实例对象，以后简称vm。
- vc和vm都有$children属性存着管理的组件实例对象，相同的两个组件，其实也是不同的实例对象，有几个就管理几个
VueComponent

5.一个重要的内置关系

两个概念:构造函数显示原型属性prototype 对象隐式原型属性__proto__
1. 一个重要的内置关系：VueComponent.prototype.__proto__ === Vue.prototype===vm.__proto__
2. 为什么要有这个关系：让组件实例对象（vc）可以访问到 Vue原型上的属性、方法。
6. 单文件组件

一个文件只有单个组件

一个.vue 文件的组成(3 个部分)

页面模板

 2). 基本使用
1. 引入组件
2. 映射成标签
3. 使用组件标签
import School from “./School.vue”;

import Student from “./Student.vue”;

//脚手架中.vue 可省略

export default {

name: “App”,

components: {

School,

Student,

},

};

//上面School，Student的使用在 App.vue的内使用

// main.js 入口文件

import App from ‘./App.vue’

new Vue({

el:‘#root’,

template:<App></App>,

components:{App},

})

index.html

只是熟悉一下语法，浏览器不可以直接运行
练习一下单文件组件的语法

三、使用 Vue 脚手架

 1 初始化脚手架

 1). 说明
1. Vue 脚手架是 Vue 官方提供的标准化开发工具（开发平台）。
2. 文档: https://cli.vuejs.org/zh/
3. Vue CLI 脚手架(command line interface 命令行接口工具)
2). 具体步骤

第一步（仅第一次执行）：全局安装@vue/cli。

npm install -g @vue/cli

第二步：切换到你要创建项目的目录，然后使用命令创建项目

vue create xxxx

babel eslint

第三步：启动项目

npm run serve

备注：
1. 如出现下载缓慢请配置 npm 淘宝镜像：
npm config set registry https://registry.npm.taobao.org
1. Vue 脚手架隐藏了所有 webpack 相关的配置，若想查看具体的 webpakc 配置，请执行：
vue inspect > output.js

output.js 只是让看配置的，修改不奏效

使用vue.config.js可以对脚手架进行个性化定制，详情见https://cli.vuejs.org/zh/config/

3).模板项目的结构

├── node_modules

├── public

│ ├── favicon.ico: 页签图标

│ └── index.html: 主页面

├── src

│ ├── assets: 存放静态资源

│ │ └── logo.png

│ │── component: 存放组件

│ │ └── HelloWorld.vue

│ │── App.vue: 汇总所有组件

│ │── main.js: 入口文件

├── .gitignore: git 版本管制忽略的配置

├── babel.config.js: babel 的配置文件

├── package.json: 应用包配置文件

├── README.md: 应用描述文件

├── package-lock.json：包版本控制文件

├── vue.config.js：配置文件需加上lintOnSave: false,配置关闭语法检查

├── jsconfig.json：配置文件

main.js

/*

该文件是整个项目的入口文件

*/

//引入Vue

import Vue from ‘vue’

//引入App组件，它是所有组件的父组件

import App from ‘./App.vue’

//关闭vue的生产提示

Vue.config.productionTip = false

/*

关于不同版本的Vue：

1.vue.js与vue.runtime.xxx.js的区别：

(1).vue.js是完整版的Vue，包含：核心功能+模板解析器。

(2).vue.runtime.xxx.js是运行版的Vue，只包含：核心功能；没有模板解析器。

模板解析器相当于工具，编译打包后不应该出现在最后的文件中，所以采用render的方式

模板下载了专门的库来解析， “vue-template-compiler”: “^2.6.14”

2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用

render函数接收到的createElement函数去指定具体内容。

*/

//创建Vue实例对象—vm

new Vue({

el:‘#app’,

//render函数完成了这个功能：将App组件放入容器中

render: h => h(App),

// render:q=> q(‘h1’,‘你好啊’)

/*render(createElement){

return createElement(‘h1’,‘你好啊’)

}*/

// template:<h1>你好啊</h1>,

// components:{App},

})

index.html
<%= htmlWebpackPlugin.options.title %>
We’re sorry but <%= htmlWebpackPlugin.options.title %> doesn’t work properly without JavaScript enabled. Please enable it to continue.

2 ref 与 props

ref
1. 被用来给元素或子组件注册引用信息（id的替代者）
2. 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
3. 使用方式：
data() {

return {

h2: {},

};

},

props
1. 第一种方式（只接收）：props:['name']
2. 第二种方式（限制类型）：props:{name:String}
3. 第三种方式（限制类型、限制必要性、指定默认值）：
props:{

name:{

type:String, //类型

required:true, //必要性

default:‘老王’ //默认值

}

}

备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

data() {

return {

myAge:this.age //vue先接收到props，然后配置data ，否则这里 myAge 为 undefined

}

},

3 mixin 混入混合
1. 功能：可以把多个组件共用的配置提取成一个混入对象
2. 使用方式：
第一步定义混合：

{

data(){…},

methods:{…}

…

}

第二步使用混入：

全局混入：Vue.mixin(xxx)

局部混入：mixins:['xxx']

注意: 钩子函数先执行混合内的，再执行混合外的，data等数据以混合外为主

 4 插件 plugins
1. 功能：用于增强Vue
2. 本质：包含install方法的一个对象，install的第一个参数是Vue（使用use()时帮我们传递这个参数），第二个以后的参数是插件使用者传递的数据。
3. 定义插件：
对象.install = function (Vue, options) {

// 1. 添加全局过滤器

Vue.filter(…)

// 2. 添加全局指令

Vue.directive(…)

// 3. 配置全局混入(合)

Vue.mixin(…)

// 4. 添加实例方法

Vue.prototype.$myMethod = function () {…}

Vue.prototype.$myProperty = xxxx

}
1. 使用插件：Vue.use()
5.scoped样式防止样式冲突
1. 作用：让样式在局部生效，防止冲突。
2. 写法：<style scoped>
3. 一般App组件不使用该组件
其他样式问题

less

npm i less-loader

看npm包的各种版本

npm view webpack versions

6. Todo-list 案例
1. 组件化编码流程：
(1).拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

(2).实现动态组件：考虑好数据的存放位置，数据是一个组件在用，还是一些组件在用：

1).一个组件在用：放在组件自身即可。

2). 一些组件在用：放在他们共同的父组件上（状态提升）。

(3).实现交互：从绑定事件开始。
1. props适用于：
(1).父组件 ==> 子组件通信

(2).子组件 ==> 父组件通信（要求父先给子一个函数）
1. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
2. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。
7. webStorage
1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）
2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。
3. 相关API：
4. xxxxxStorage.setItem('key', 'value');
该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

2. xxxxxStorage.getItem('person');

该方法接受一个键名作为参数，返回键名对应的值。如果没有，读取为null
1. xxxxxStorage.removeItem('key');
该方法接受一个键名作为参数，并把该键名从存储中删除。

4. xxxxxStorage.clear()

该方法会清空存储中的所有数据。
1. 备注：
2. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
3. LocalStorage存储的内容，需要手动清除才会消失。
4. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
5. JSON.parse(null)的结果依然是null。
8.Vue 中的自定义事件
1. 一种组件间通信的方式，适用于：子组件 ===> 父组件
2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。
3. 绑定自定义事件：
4. 第一种方式，在父组件中：<Demo @defineEvent="test"/>或 <Demo v-on:defineevent="test"/>
5. 第二种方式，在父组件中：(灵活性强，比如等一等再绑定事件)
…

mounted(){

this. $re f s . xxx .$ on(‘defineEvent’,this.test)

}
1. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
2. 触发自定义事件(在子组件中，即被绑定事件的组件中)：this.$emit('defineEvent',数据)
3. 解绑自定义事件(在子组件中，即被绑定事件的组件中)：this.$off('defineEvent1'[,'defineEvent2'])(不传参全部解绑)
4. $once(eventName, listener): 绑定事件监听, 但只能处理一次
5. 组件上也可以绑定原生DOM事件，需要使用native修饰符。
6. 注意：通过this.$refs.xxx.$on('defineEvent',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！直接写回调函数，this是被绑定的子组件实例vc
9. 全局事件总线
1. 一种组件间通信的方式，适用于任意组件间通信。
2. 安装全局事件总线：
new Vue({

…

beforeCreate() {

Vue.prototype. $b u s = t hi s // 安装全局事件总线，$ bus就是当前应用的vm

},

…

})
1. 使用事件总线：
2. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。
methods(){

demo(data){…}

}

…

mounted() {

this. $b u s .$ on(‘xxxx’,this.demo)

}

//解绑事件。

beforeDestroy(){

this. $b u s .$ off(‘xxxx’)

}
1. 提供数据：
this. $b u s .$ emit(‘xxxx’,数据)
1. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。
10 消息订阅与发布

 1). 理解
1. 这种方式的思想与全局事件总线很相似
2. 它包含以下操作:
(1) 订阅消息 --对应绑定事件监听

(2) 发布消息 --分发事件

(3) 取消消息订阅 --解绑事件监听
1. 需要引入一个消息订阅与发布的第三方实现库: PubSubJS
2).使用 PubSubJS

注意回调函数的写法，由于第一个参数是消息名字，使用’_'占位
1. 在线文档: https://github.com/mroderick/PubSubJS
2. 下载:
npm install -S pubsub-js
1. 相关语法
2. 安装pubsub：npm i pubsub-js
3. 引入: import pubsub from 'pubsub-js'
4. 接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
methods(){

demo(_,data){…}

}

…

mounted() {

this.pid = pubsub.subscribe(‘msgName’,this.demo) //订阅消息

//第一个参数是消息名

// PubSub.subscribe(‘msgName’, functon(msgName, data){ }) //一般写箭头函数

}

//取消订阅。

beforeDestroy(){

PubSub.unsubscribe(pid)

}
1. 提供数据：pubsub.publish('msgName',数据)
2. 最好在beforeDestroy钩子中，用PubSub.unsubscribe(pid)去取消订阅。
11.nextTick
1. 语法：this.$nextTick(回调函数)
2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。
12. 过渡与动画
1. 作用：操作 css 的 trasition 或 animation ，在插入、更新或移除（显示或隐藏）DOM元素时，在合适的时候给元素添加样式类名。
2. 写法：
3. 准备好样式：（name默认是’v‘，可以自己配置<transition name="hello">）
- 元素进入的样式：
1. name-enter：进入的起点
2. name-enter-active：进入过程中
3. name-enter-to：进入的终点
- 元素离开的样式：
1. name-leave：离开的起点
2. name-leave-active：离开过程中
3. name-leave-to：离开的终点
4. 使用<transition>包裹要过渡的元素，并配置name属性：
- appear - boolean，是否在初始渲染时使用过渡。默认为 false。
你好啊！
1. 备注：若有多个元素需要过渡，则需要使用：<transition-group>，且每个元素都要指定key值。
2. 其他属性（在特定时期加特定类名的属性）
- enter-from-class - string
- leave-from-class - string
- appear-class - string
- enter-to-class - string
- leave-to-class - string
- appear-to-class - string
- enter-active-class - string
- leave-active-class - string
- appear-active-class - string
1. 第三方动画库https://www.npmjs.com/package/animate.css https://animate.style/
过渡案例

<button @click=“isShow = !isShow”>显示/隐藏

你好啊！

尚硅谷！

2401_85124682

关注

22
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
Vue2学习笔记

引入VueVue监视数据的原理：1. vue会监视data中所有层次的数据。2. 如何监测对象中的数据？通过setter实现监视，且要在new Vue时就传入要监测的数据。(1).对象中后追加的属性，Vue默认不做响应式处理(2).如需给后添加的属性做响应式，请使用如下API：Vue.set(target，propertyName/index，value) 或3. 如何监测数组中的数据？
复制链接

扫一扫