目录
Vue脚手架（Command Line Interface）是Vue官方提供的标准化开发工具（开发平台）。
使用脚手架：
一、全局安装
（切换到淘宝镜像 npm config set registry https://registry.npm.taobao.org）
npm install -g @vue/cli
二、切换到要创建项目的目录，然后使用命令创建目录
vue create xxx
三、启动项目
npm run serve
把之前写好的组件放入src/components文件夹，用之前写好的App.vue将脚手架生成的App.vue替换掉，在项目目录下的终端运行npm run serve命令就可以运行项目了。
vue.config.js配置文件：
运行vue inspect > output.js可以查看到Vue脚手架的默认配置；使用vue.config.js可以对脚手架进行个性化定制，详见https://cli.vuejs.org/zh
main.js
// 该文件是整个项目的入口文件
// 引入Vue
import Vue from 'vue'
// 引入App组件，它是所有组件的父组件
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
? ? el:'#app',
? ? // 将App组件放入容器中
? ? render:h=>h(App)
})App.vue
<template>
? <div>
? ? <SchoolName></SchoolName>
? </div>
</template>
<script>
// 引入组件
import SchoolName from "./components/SchoolName.vue";
export default {
? ? name:'App',
? ? components:{
? ? ? ? SchoolName
? ? }
}
</script>
<style>
</style>SchoolName.vue（注意使用双驼峰命名，只一个单词首字母大写会报错）
// 快捷生成主要结构：下载Vetur，键入“<v"
<template>
? ? <!-- 组件的结构 -->
? ? <div class="school">
? ? ? ? <h2>学校：{{schoolName}}</h2>
? ? ? ? <h2>地址：{{address}}</h2>
? ? </div>
</template>
<script>
? ? // 组件交互相关的代码
? ? // export const school=Vue.extend({ //分别暴露
? ? // export default Vue.extend({ //默认暴露也可以这样写
? ? // const school=Vue.extend({
? ? export default{
? ? ? ? name:'SchoolName', //最好与文件名保持一致
? ? ? ? data(){
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? schoolName:'hzy',
? ? ? ? ? ? ? ? address:'LongZiHu',
? ? ? ? ? ? }
? ? ? ? },
? ? }
? ? // });
? ? // export{school}; //统一暴露
? ? // export default school; //通常采用默认暴露
</script>
<style>
/* 组件的样式 */
.school{
? ? background-color: aliceblue;
}
</style>index.html
<!DOCTYPE html>
<html lang="">
? <head>
? ? <meta charset="utf-8">
? ? <!-- 针对IE的特殊配置，让IE以最高的渲染级别渲染页面 -->
? ? <meta http-equiv="X-UA-Compatible" content="IE=edge">
? ? <!-- 开启移动端的理想视口 -->
? ? <meta name="viewport" content="width=device-width,initial-scale=1.0">
? ? <!-- 配置页签图标 -->
? ? <link rel="icon" href="<%= BASE_URL %>favicon.ico">
? ? <!-- 配置网页标题 -->
? ? <title><%= htmlWebpackPlugin.options.title %></title>
? </head>
? <body>
? ? <!-- 当浏览器不支持js时，noscript中的元素就会被渲染 -->
? ? <noscript>
? ? ? <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
? ? </noscript>
? ? <div id="app"></div>
? ? <!-- built files will be auto injected -->
? </body>
</html>render函数：
关于不同版本的Vue：
1.vue.js与vue.runtime.xxx.js的区别：
（1）vue.js是完整版的Vue，包含：核心功能+模板解析器。
（2）vue.runtime.xxx.js是运行版的Vue，只包含核心功能，没有模板解析器。
2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。
ref属性：
1.被用来给元素或子组件注册引用信息（id的替代者）。
2.应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象。
3.使用方式：标签体内：<h1 ref=”xxx”>...</h1>或<School ref=”xxx”’></School> 获取：this.$refs.xxx
<template>
? <div>
? ? <SchoolName ref="schoolname"></SchoolName>
? ? <h1 v-text="msg" ref="school"></h1>
? ? <button @click="showDom">输出上方DOM元素</button>
? </div>
</template>
<script>
// 引入组件
import SchoolName from "./components/SchoolName.vue";
export default {
? ? name:'App',
? ? data() {
? ? ? return {
? ? ? ? msg:'河南中医药大学'
? ? ? }
? ? },
? ? components:{
? ? ? ? SchoolName
? ? },
? ? methods: {
? ? ? showDom(){
? ? ? ? console.log(this.$refs.school);//真实DOM元素
? ? ? ? // <h1>河南中医药大学</h1>
? ? ? ? console.log(this.$refs.schoolname);//SchoolName组件的实例对象
? ? ? ? // VueComponent?{_uid: 2, _isVue: true, __v_skip: true, _scope: EffectScope, $options: {…},?…}
? ? ? }
? ? },
}
</script>
<style>
</style>配置项props：
用于让组件接收外部传过来的数据（父传子）;props是只读的，Vue底层会监测对props的修改，如果进行了修改，就会发出警告。
1.传递数据：<Demo name=”xx”/>
2.接收数据：
（1）只接收：props:[‘name’]
（2）限制类型：props:{name:Number}
（3）限制类型、限制必要性、指定默认值：props:{ name:{type:String, require:true, default:'tml'}
StudentName.vue
<template>
? ? <div class="student">
? ? ? ? <h2>姓名：{{name}}</h2>
? ? ? ? <h2>住址：{{address}}</h2>
? ? ? ? <h2>年龄：{{myAge+1}}</h2>
? ? ? ? <button @click="updateAge">修改接收到的年龄</button>
? ? </div>
</template>
<script>
? ? export default{
? ? ? ? name:'StudentName',
? ? ? ? data(){
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? myAge:this.age
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? // props:['address','name','age'],//简单接收
? ? ? ? // props:{//接收的同时对数据进行类型限制
? ? ? ? // ? ? name:String,
? ? ? ? // ? ? address:String,
? ? ? ? // ? ? age:Number
? ? ? ? // },
? ? ? ? props:{ //接收的同时可以对数据进行类型限制、指定默认值、限制必要性
? ? ? ? ? ? name:{
? ? ? ? ? ? ? ? type:String,
? ? ? ? ? ? ? ? require:true //必传
? ? ? ? ? ? },
? ? ? ? ? ? address:{
? ? ? ? ? ? ? ? type:String,
? ? ? ? ? ? ? ? default:'BeiJing' //默认值
? ? ? ? ? ? },
? ? ? ? ? ? age:{
? ? ? ? ? ? ? ? type:Number,
? ? ? ? ? ? ? ? require:true
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? methods: {
? ? ? ? ? ? updateAge(){
? ? ? ? ? ? ? ? this.myAge++
? ? ? ? ? ? }
? ? ? ? },
? ? }
</script>App.vue
<template>
? <div>
? ? <StudentName name="tml" :age="21" />
? </div>
</template>
<script>
// 引入组件
import StudentName from "./components/StudentName.vue";
export default {
? ? name:'App',
? ? components:{
? ? ? ? StudentName
? ? },
}
</script>mixin混入：
可以把多个组件共用的配置提取成一个混入对象
1.定义混入：const a={ data(){...} , methods:{...} ... }
2.使用混入：（1）全局混入（在main.js里）：Vue.mixin(xx)（2）局部混入：mixin:[‘xx’]
methodsMixin.js
//定义混入
export const methodsMixin={
? ? methods: {
? ? ? ? showName(){
? ? ? ? ? ? alert(this.name);
? ? ? ? }
? ? }
}StudentName.vue
<template>
? ? <div>
? ? ? ? <h2 @click="showName">学生姓名：{{name}}</h2>
? ? ? ? <h2>学生性别：{{sex}}</h2>
? ? </div>
</template>
<script>
// 引入一个混合
import { methodsMixin } from "../methodsMixin";
? ? export default{
? ? ? ? name:'StudentName',
? ? ? ? data(){
? ? ? ? ? ? return {
? ? ? ? ? ? ? ? name:'tml',
? ? ? ? ? ? ? ? sex:'female'
? ? ? ? ? ? }
? ? ? ? },
? ? ? ? mixins:[methodsMixin]
? ? }
</script>SchoolName.vue
<template>
? <div>
? ? <h2 @click="showName">学校名称：{{name}}</h2>
? ? <h2>学校地址：{{address}}</h2>
? </div>
</template>
<script>
// 引入一个混合
import { methodsMixin } from "../methodsMixin";
export default {
? ? name:'SchoolName',
? ? data(){
? ? ? ? return {
? ? ? ? ? ? name:'hzy',
? ? ? ? ? ? address:'lzh'
? ? ? ? }
? ? },
? ? mixins:[methodsMixin]
}
</script>插件：
用于增强Vue，包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。
定义插件：
对象.install=function(vue,options){
??//1.添加全局过滤器
??Vue.filter(...)
??//2.添加全局指令
??Vue.directive(...)
??//3.配置全局混入（合）
??Vue.mixin(...)
??//4.添加实例方法
??Vue.prototype.$myMethod=function(){...}
Vue.prototype.$myProperty=xxx
}
使用插件：
Vue.use()
plugins.js
export default{
? ? install(){
? ? ? ? console.log('@@install');
? ? ? ? // 可以写全局过滤器
? ? ? ? // 可以定义全局指令
? ? ? ? // 可以定义混入
? ? ? ? // 可以给Vue原型添加方法（vm和vc都可以用）
? ? }
}main.js
// 引入Vue
import Vue from 'vue';
// 引入App组件，它是所有组件的父组件
import App from './App.vue';
// 引入插件
import plugins from "./plugins";
// 使用插件
Vue.use(plugins);
Vue.config.productionTip = false;
new Vue({
? ? el:'#app',
? ? // 将App组件放入容器中
? ? render:h=>h(App)
})scoped样式：
让样式在局部生效，防止冲突；语法：<style scoped></style>
<style scoped>
/* 样式只能在此组件中生效 */
.box{
? ? background-color: aquamarine;
}
</style>组件化编码流程：
1.拆分静态组件：组件按照功能点拆分，命名不要与html元素冲突。
2.实现动态组件：考虑好数据的存放位置，数据是一个组件在用还是一些组件在用：
（1）一个组件在用：放在组件自身。
（2）一些组件在用：放在他们共同的父组件上（状态提升：多个组件需要反映相同的变化数据时我们建议将共享状态提升到最近的共同父组件中去）。
3.实现交互——从绑定事件开始。
总结TODOList案例（案例在资源里）：
props适用于：
（1）父组件-->子组件通信
（2）子组件-->父组件通信（要求父先给子一个函数）
使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！
props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。
WebStorage：
1.存储内容大小一般支持5M左右（不同浏览器可能不一样）。
2.浏览器端通过Window.sessionStorage和Window.localStorage属性来实现本地存储机制。
3.相关API：
<body>
? ? <button onclick="saveData1()">保存数据1</button>
? ? <button onclick="readData1()">读取数据1</button>
? ? <button onclick="deleteData1()">删除数据1</button>
? ? <button onclick="deleteAllData1()">清空数据1</button><br><br>
? ? <button onclick="saveData2()">保存数据2</button>
? ? <button onclick="readData2()">读取数据2</button>
? ? <button onclick="deleteData2()">删除数据2</button>
? ? <button onclick="deleteAllData2()">清空数据2</button>
? ? <script>
? ? ? ? // 该方法接收一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新对应的值
? ? ? ? function saveData1(){
? ? ? ? ? ? localStorage.setItem('msg1','张三');
? ? ? ? }
? ? ? ? function saveData2(){
? ? ? ? ? ? sessionStorage.setItem('msg1','张三');
? ? ? ? }
? ? ? ? // 该方法接收一个键名作为参数，返回键名对应的值；如果对应的参数获取不到，那么返回值为null
? ? ? ? function readData1(){
? ? ? ? ? ? console.log(localStorage.getItem('msg1'));
? ? ? ? }
? ? ? ? function readData2(){
? ? ? ? ? ? console.log(sessionStorage.getItem('msg1'));
? ? ? ? }
? ? ? ? // 该方法接收一个键名作为参数，并把该键名从存储中删除
? ? ? ? function deleteData1(){
? ? ? ? ? ? localStorage.removeItem('msg1');
? ? ? ? }
? ? ? ? function deleteData2(){
? ? ? ? ? ? sessionStorage.removeItem('msg1');
? ? ? ? }
? ? ? ? // 该方法会清空存储中的所有数据
? ? ? ? function deleteAllData1(){
? ? ? ? ? ? localStorage.clear();
? ? ? ? }
? ? ? ? function deleteAllData2(){
? ? ? ? ? ? sessionStorage.clear();
? ? ? ? }
? ? </script>
</body>
4.sessionStorage存储的内容会随着浏览器窗口关闭而消失；localStorage存储的内容需要手动清除才会消失；JSON.parse(null)的结果依然是null。
组件的自定义事件：
1.一种组件间通信的方式，适用于：子组件-->父组件。
2.使用场景：子组件想给父组件传数据，就要在父组件中给子组件绑定自定义事件（事件的回调在子组件中）。
3.绑定自定义事件：
第一种：在父组件中：<demo @event=”test”/>或<demo v-on:event=”test”/>
第二种：在父组件中：
<demo ref=”demo”/>
?... ...
mounted(){
????????this.$refs.xxx.$on(‘event’,this.test)}
若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。
4.触发自定义事件：this.$emit(‘event’,数据)
5.解绑自定义事件：this.$off(‘event’)
6.组件上也可以绑定原生DOM事件，需要使用native修饰符。
7.注意：通过this.$refs.xxx.$on(‘event’,回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题。
App.vue
<template>
? ? <div id="root" class="app">
? ? ? ? <h1>您好，{{studentName}}</h1>
? ? ? ? <!-- 通过父组件给子组件传递函数类型的props实现子给父传数据 -->
? ? ? ? <school :getSchoolName="getSchoolName"></school>
? ? ? ? <!-- 通过父组件给子组件绑定一个自定义事件实现子给父传递数据(使用@或v-on) -->
? ? ? ? <student v-on:hzy="getStudentName" ?@demo="m1"></student>
? ? ? ? <!-- 通过父组件给子组件绑定一个自定义事件实现子给父传递数据(使用ref) -->
? ? ? ? <!-- 如果不写.native click将会被当做自定义事件 -->
? ? ? ? <teacher ref="teacher" @click.native="show"></teacher>
? ? </div>
</template>
<script>
// 引入组件
import School from './components/School.vue';
import Student from './components/Student.vue';
import Teacher from './components/Teacher.vue';
export default {
? ? name:'App',
? ? components:{School, Student, Teacher},
? ? data() {
? ? ? ? return {
? ? ? ? ? ? studentName:''
? ? ? ? }
? ? },
? ? methods: {
? ? ? ? getSchoolName(name){
? ? ? ? ? ? console.log(name);
? ? ? ? },
? ? ? ? getStudentName(name){
? ? ? ? ? ? console.log(name);
? ? ? ? ? ? this.studentName=name;
? ? ? ? },
? ? ? ? getTeacherName(name){
? ? ? ? ? ? console.log(name);
? ? ? ? },
? ? ? ? m1(){
? ? ? ? ? ? console.log('m1');
? ? ? ? },
? ? ? ? show(){
? ? ? ? ? ? alert('click事件')
? ? ? ? }
? ? },
? ? mounted() {
? ? ? ? // 绑定自定义事件
? ? ? ? this.$refs.teacher.$on('xzh',this.getTeacherName)
? ? ? ? // 以下代码表示仅触发一次
? ? ? ? // this.$refs.teacher.$once('hzy',this.getTeacherName)
? ? },
}
</script>
<style>
.app{
? ? background-color: cornflowerblue;
? ? padding: 6px;
}
</style>School.vue
<template>
? <div class="school">
? ? <h2>学校名：{{name}}</h2>
? ? <h2>学校地址：{{address}}</h2>
? ? <button @click="sendSchoolName">发送</button>
? </div>
</template>
<script>
export default {
? ? name:'School',
? ? props:['getSchoolName'],
? ? data(){
? ? ? ? return{
? ? ? ? ? ? name:'河中医',
? ? ? ? ? ? address:'龙子湖'
? ? ? ? }
? ? },
? ? methods: {
? ? ? sendSchoolName(){
? ? ? ? this.getSchoolName(this.name)
? ? ? }
? ? },
}
</script>
<style>
.school{
? ? background-color: aquamarine;
}
</style>Teacher.vue
<template>
? <div class="teacher">
? ? <h2>姓名：{{name}}</h2>
? ? <h2>工龄：{{age}}</h2>
? ? <button @click="sendTeacherName">发送</button>
? </div>
</template>
<script>
export default {
? ? name:'Teacher',
? ? data() {
? ? ? ? return {
? ? ? ? ? ? name:'谢智好',
? ? ? ? ? ? age:'20'
? ? ? ? }
? ? },
? ? methods: {
? ? ? ? sendTeacherName(){
? ? ? ? ? ? this.$emit('xzh',this.name);
? ? ? ? }
? ? },
}
</script>
<style>
.teacher{
? ? background-color:lightcoral;
}
</style>Student.vue
<template>
? <div class="student">
? ? <h2>姓名：{{name}}</h2>
? ? <h2>性别：{{sex}}</h2>
? ? <h2>求和：{{number}}</h2>
? ? <button @click="sendStudentName">发送</button>
? ? <button @click="unbind">解绑hzy事件</button>
? ? <button @click="add">点我number+1</button>
? ? <button @click="death">销毁当前Student组件的实例</button>
? </div>
</template>
<script>
export default {
? ? name:'Student',
? ? data() {
? ? ? ? return {
? ? ? ? ? ? name:'东方强',
? ? ? ? ? ? sex:'男',
? ? ? ? ? ? number:'0'
? ? ? ? }
? ? },
? ? methods: {
? ? ? ? sendStudentName(){
? ? ? ? ? ? // 触发Student组件实例上的hzy事件
? ? ? ? ? ? this.$emit('hzy',this.name);
? ? ? ? ? ? // this.$emit('demo');
? ? ? ? },
? ? ? ? unbind(){
? ? ? ? ? ? // 解绑一个自定义事件
? ? ? ? ? ? this.$off('hzy');
? ? ? ? ? ? // 解绑多个自定义事件
? ? ? ? ? ? // this.$off(['hzy','demo']);
? ? ? ? ? ? // 解绑所有自定义事件
? ? ? ? ? ? // this.$off();
? ? ? ? },
? ? ? ? death(){
? ? ? ? ? ? // 销毁当前Student组件的实例,销毁后所有Student实例的自定义事件全都不奏效
? ? ? ? ? ? this.$destroy()
? ? ? ? },
? ? ? ? add(){
? ? ? ? ? ? console.log('add');
? ? ? ? ? ? this.number++;
? ? ? ? }
? ? },
}
</script>
<style>
.student{
? ? background-color: bisque;
}
</style>
（点击发送按钮：控制台打印对应部分的name；点击解绑事件：无法发送学生名字；点击销毁Student组件的实例：学生部分的事件无法触发；点击教师部分的发送按钮：弹出窗口并打印name）
全局事件总线（GlobalEventBus）：
1.一种组件间通信的方式，适用于任意组件间通信
2.安装全局事件总线：
new Vue({
... ...
beforeCreate(){
Vue.prototype.$bus=this //安装全局事件总线，$bus就是当前应用的vm
}，
... ...
})
3.使用事件总线：
（1）接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身（可以不写methods，但是mounted内要用箭头函数）。
methods:{
demo(data){... ...}
}
... ...
mounted(){
this.$bus.$on(‘xxxx’,this.demo)
}
（2）提供数据：this.$bus.$emit(‘xxxx’,数据)
4.最好在beforeDestroy钩子中用$off解绑当前组件所用到的事件。
main.js
// 引入Vue
import Vue from 'vue';
// 引入App组件，它是所有组件的父组件
import App from './App.vue';
Vue.config.productionTip = false;
new Vue({
? ? el:'#app',
? ? // 将App组件放入容器中
? ? render:h=>h(App),
? ? beforeCreate() {
? ? ? ? Vue.prototype.$bus=this //安装全局事件总线
? ? },
})App.vue
<template>
? ? <div id="root" class="app">
? ? ? ? <h1>您好，{{name}}</h1>
? ? ? ? <School/>
? ? ? ? <Student/>
? ? </div>
</template>
<script>
// 引入组件
import School from './components/School.vue';
import Student from './components/Student.vue';
export default {
? ? name:'App',
? ? components:{School, Student},
? ? data() {
? ? ? ? return {
? ? ? ? ? ? name:''
? ? ? ? }
? ? },
? ? methods: {
? ? ? ? getName(data){
? ? ? ? ? ? this.name=data;
? ? ? ? },
? ? },
? ? mounted() {
? ? ? ? this.$bus.$on('toapp',this.getName)
? ? },
}
</script>
<style>
.app{
? ? background-color: cornflowerblue;
? ? padding: 6px;
}
</style>Student.vue
<template>
? <div class="student">
? ? <h2>姓名：{{name}}</h2>
? ? <h2>性别：{{sex}}</h2>
? ? <button @click="sendStudentName">发送name给school</button>
? ? <button @click="sendName">发送name给App</button>
? </div>
</template>
<script>
export default {
? ? name:'Student',
? ? data() {
? ? ? ? return {
? ? ? ? ? ? name:'东方强',
? ? ? ? ? ? sex:'男',
? ? ? ? }
? ? },
? ? methods: {
? ? ? ? sendStudentName(){
? ? ? ? ? ? this.$bus.$emit('hello',this.name)
? ? ? ? },
? ? ? ? sendName(){
? ? ? ? ? ? this.$bus.$emit('toapp',this.name)
? ? ? ? }
? ? },
}
</script>
<style>
.student{
? ? background-color: bisque;
}
</style>School.vue
<template>
? <div class="school">
? ? <h2>学校名：{{name}}</h2>
? ? <h2>学校地址：{{address}}</h2>
? </div>
</template>
<script>
export default {
? ? name:'School',
? ? data(){
? ? ? ? return{
? ? ? ? ? ? name:'河中医',
? ? ? ? ? ? address:'龙子湖'
? ? ? ? }
? ? },
? ? mounted(){
? ? ? this.$bus.$on('hello',(data)=>{
? ? ? ? console.log('school收到数据',data);
? ? ? })
? ? },
? ? beforeDestroy() {
? ? ? this.$bus.$off('hello')
? ? },
}
</script>
<style>
.school{
? ? background-color: aquamarine;
}
</style>
消息的订阅与发布：
1.一种组件间通信的方式，适用于任意组件间通信
2.使用步骤：
（1）安装：pubsub：npm i pubsub-js
（2）引入：import pubsub from ‘pubsub-js’
（3）接收数据：A组件想要接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身。
methods(){
????????demo(data){... ...}
}
... ...
mounted(){
????????this.pid=pubsub.subscribe(‘xxx’,this.demo) //订阅消息
}
（4）提供数据：pubsub.publish(‘xxx’,数据)
（5）最好在beforeDestroy钩子中，用pubsub.unsubscribe(pid)取消订阅
App.vue
<template>
? ? <div id="root" class="app">
? ? ? ? <h1>您好，</h1>
? ? ? ? <School/>
? ? ? ? <Student/>
? ? </div>
</template>
<script>
// 引入组件
import School from './components/School.vue';
import Student from './components/Student.vue';
export default {
? ? name:'App',
? ? components:{School, Student},
}
</script>
<style>
.app{
? ? background-color: cornflowerblue;
? ? padding: 6px;
}
</style>?School.vue
<template>
? <div class="school">
? ? <h2>学校名：{{name}}</h2>
? ? <h2>学校地址：{{address}}</h2>
? </div>
</template>
<script>
import pubsub from "pubsub-js";
export default {
? ? name:'School',
? ? data(){
? ? ? ? return{
? ? ? ? ? ? name:'河中医',
? ? ? ? ? ? address:'龙子湖'
? ? ? ? }
? ? },
? ? mounted(){
? ? ? // 把pubId放在this上，beforeDestroy才能收到
? ? ? // 写成箭头函数时this才是VueComponent
? ? ? this.pubId=pubsub.subscribe('hello',(msgName,data)=>{
? ? ? ? console.log('消息名：',msgName,'数据：',data) //消息名： hello 数据： 6
? ? ? })
? ? },
? ? beforeDestroy() {
? ? ? pubsub.unsubscribe(this.pubId)
? ? },
}
</script>
<style>
.school{
? ? background-color: aquamarine;
}
</style>Student.vue
<template>
? <div class="student">
? ? <h2>姓名：{{name}}</h2>
? ? <h2>性别：{{sex}}</h2>
? ? <button @click="sendStudentName">发送</button>
? </div>
</template>
<script>
import pubsub from 'pubsub-js';
export default {
? ? name:'Student',
? ? data() {
? ? ? ? return {
? ? ? ? ? ? name:'东方强',
? ? ? ? ? ? sex:'男',
? ? ? ? }
? ? },
? ? methods: {
? ? ? ? sendStudentName(){
? ? ? ? ? ? pubsub.publish('hello',6)
? ? ? ? },
? ? }
}
</script>
<style>
.student{
? ? background-color: bisque;
}
</style>nextTick：
1.语法：this.$nextTick(回调函数)
2.作用：在下一次DOM更新结束后执行其指定的回调。
3.什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。
// 数据改变->dom重新渲染->渲染完成后，nextTick起作用
this.$nextTick(function(){
????????//操作
})
Vue封装的过渡与动画：
1.作用：在插入、更新或移除DOM元素时，在合适的时候给元素添加样式类名
2.图示：
3.写法：
（1）准备好样式：
元素进入的样式：
- v-enter：进入的起点
- v-enter-active：进入过程中
- v-enter-to：进入的终点
元素离开的样式：
- v-leave：离开的起点
- v-leave-active：离开的过程中
- v-leave-to：离开的终点
（2）使用<transition>包裹要过渡的元素，并配置name属性
（3）若有多个元素需要过渡，则需要使用<translation-group>，且每个元素都要指定key值
<template>
? <div>
? ? <button @click="isShow=!isShow">显示/隐藏</button>
? ? <!-- appear 首次加载就有动画 -->
? ? <transition-group name="hello" appear>
? ? ? ? <h1 v-show="isShow" key="key1">您好！</h1>
? ? ? ? <h1 v-show="!isShow" key="key2">老秃鹫</h1>
? ? </transition-group>
? </div>
</template>
<script>
export default {
? ? name:'Test',
? ? data() {
? ? ? ? return {
? ? ? ? ? ? isShow:true,
? ? ? ? }
? ? },
}
</script>
<style scoped>
h1{
? ? background-color: coral;
}
/* 进入的起点、离开的终点 */
.hello-enter,.hello-leave-to{
? ? transform: translateX(-100%);
}
/* 进入和离开的过程 */
.hello-enter-active,.hello-leave-active{
? ? transition: 1s linear;
}
/* 进入的终点、离开的起点 */
.hell-enter-to,.hello-leave{
? ? transform: translateX(0);
}
</style>使用资源库引入动画效果：
网址：Animate.css | A cross-browser library of CSS animations.
使用：
（1）安装：npm install animate.css
（2）导入：import 'animate.css'
（3）添加：name="animate__animated animate__bounce"
（4）复制动画类名到程序中
<template>
? <div>
? ? <button @click="isShow=!isShow">显示/隐藏</button>
? ? <!-- appear 首次加载就有动画 -->
? ? <transition-group
? ? ? ? appear
? ? ? ? name="animate__animated animate__bounce"
? ? ? ? enter-active-class="animate__jello"
? ? ? ? leave-active-class="animate__flipOutX">
? ? ? ? <h1 v-show="isShow" key="key1">您好！</h1>
? ? ? ? <!-- <h1 v-show="!isShow" key="key2">老秃鹫</h1> -->
? ? </transition-group>
? </div>
</template>
<script>
// 导入资源库
import 'animate.css'
export default {
? ? name:'Test',
? ? data() {
? ? ? ? return {
? ? ? ? ? ? isShow:true,
? ? ? ? }
? ? },
}
</script>
<style scoped>
button{
? ? color: whitesmoke;
? ? background-color: orangered;
? ? border: 3px rgb(190, 54, 4) solid;
}
h1{
? ? background-color: coral;
}
</style>VUE（三）示例视频
（视频：B站尚硅谷）