Vue基知识四

本文对前边几章所学习的内容，以案例的形式做一个总结

一 TodoList案例

即待办事项案例，效果如下
在这里插入图片描述

1.1 组件化编码流程（通用）

这是编码时的通用流程，以后也可以按照这个流程来写代码（熟悉后这个流程的顺序就无所谓了）

  1. 实现静态组件：抽取组件，使用组件实现静态页面效果
  2. 展示动态数据：
    2.1. 数据的类型、名称是什么？
    2.2. 数据保存在哪个组件？
  3. 交互——从绑定事件监听开始

抽取组件
抽取组件时，既不能抽取的太多，也不能抽取太少，需要自己把握；现在我们可以把它拆成三个组件，如下
在这里插入图片描述
如果再细拆的话，list里的还可以再拆出一个组件（即共四个组件）
在这里插入图片描述

1.2 编码

定义四个组件
在这里插入图片描述
MyFooter.vue

<template><div class="todo-footer" v-show="total"><label><!-- <input type="checkbox" :checked="isAll" @change="checkAll"/> --><input type="checkbox" v-model="isAll"/></label><span><span>已完成{{doneTotal}}</span> / 全部{{total}}</span><button class="btn btn-danger" @click="clearAll">清除已完成任务</button></div>
</template><script>export default {name:'MyFooter',props:['todos','checkAllTodo','clearAllTodo'],computed: {//总数total(){return this.todos.length},//已完成数doneTotal(){//此处使用reduce方法做条件统计/* const x = this.todos.reduce((pre,current)=>{console.log('@',pre,current)return pre + (current.done ? 1 : 0)},0) *///简写return this.todos.reduce((pre,todo)=> pre + (todo.done ? 1 : 0) ,0)},//控制全选框isAll:{//全选框是否勾选get(){return this.doneTotal === this.total && this.total > 0},//isAll被修改时set被调用set(value){this.checkAllTodo(value)}}},methods: {/* checkAll(e){this.checkAllTodo(e.target.checked)} *///清空所有已完成clearAll(){this.clearAllTodo()}},}
</script><style scoped>/*footer*/.todo-footer {height: 40px;line-height: 40px;padding-left: 6px;margin-top: 5px;}.todo-footer label {display: inline-block;margin-right: 20px;cursor: pointer;}.todo-footer label input {position: relative;top: -1px;vertical-align: middle;margin-right: 5px;}.todo-footer button {float: right;margin-top: 5px;}
</style>

MyHeader.vue

<template><div class="todo-header"><input type="text" placeholder="请输入你的任务名称，按回车键确认" v-model="title" @keyup.enter="add"/></div>
</template><script>//nanoid:生成唯一id，类似于uuidimport {nanoid} from 'nanoid'export default {name:'MyHeader',//接收从App传递过来的addTodoprops:['addTodo'],data() {return {//收集用户输入的titletitle:''}},methods: {add(){//校验数据if(!this.title.trim()) return alert('输入不能为空')//将用户的输入包装成一个todo对象const todoObj = {id:nanoid(),title:this.title,done:false}//通知App组件去添加一个todo对象this.addTodo(todoObj)//清空输入this.title = ''}},}
</script><style scoped>/*header*/.todo-header input {width: 560px;height: 28px;font-size: 14px;border: 1px solid #ccc;border-radius: 4px;padding: 4px 7px;}.todo-header input:focus {outline: none;border-color: rgba(82, 168, 236, 0.8);box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);}
</style>

MyList.vue

<template><ul class="todo-main"><!--:todo: 把数据传递到MyItem子组件里--><MyItem v-for="todoObj in todos":key="todoObj.id" :todo="todoObj" :checkTodo="checkTodo":deleteTodo="deleteTodo"/></ul>
</template><script>import MyItem from './MyItem'export default {name:'MyList',components:{MyItem},//声明接收App传递过来的数据，其中todos是自己用的，checkTodo和deleteTodo是给子组件MyItem用的props:['todos','checkTodo','deleteTodo']}
</script><style scoped>/*main*/.todo-main {margin-left: 0px;border: 1px solid #ddd;border-radius: 2px;padding: 0px;}.todo-empty {height: 40px;line-height: 40px;border: 1px solid #ddd;border-radius: 2px;padding-left: 5px;margin-top: 10px;}
</style>

MyItem.vue

<template><li><label><input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/><!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props --><!-- <input type="checkbox" v-model="todo.done"/> --><span>{{todo.title}}</span></label><button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button></li>
</template><script>export default {name:'MyItem',//声明接收todo、checkTodo、deleteTodo（接收父组件里的数据）props:['todo','checkTodo','deleteTodo'],methods: {//勾选or取消勾选handleCheck(id){//通知App组件将对应的todo对象的done值取反this.checkTodo(id)},//删除handleDelete(id){if(confirm('确定删除吗？')){//通知App组件将对应的todo对象删除this.deleteTodo(id)}}},}
</script><style scoped>/*item*/li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;}li label {float: left;cursor: pointer;}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;}li button {float: right;display: none;margin-top: 3px;}li:before {content: initial;}li:last-child {border-bottom: none;}li:hover{background-color: #ddd;}li:hover button{display: block;}
</style>

App.vue里引入上边四个组件

<template><div id="root"><div class="todo-container"><div class="todo-wrap"><MyHeader :addTodo="addTodo"/><MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/><MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/></div></div></div>
</template><script>//引入组件import MyHeader from './components/MyHeader'//list组件里引入了item组件，所以这里就不需要引入item了（item是list的子组件）import MyList from './components/MyList'import MyFooter from './components/MyFooter.vue'export default {name:'App',components:{MyHeader,MyList,MyFooter},//注册组件data() {return {//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）todos:[{id:'001',title:'抽烟',done:true},{id:'002',title:'喝酒',done:false},{id:'003',title:'开车',done:true}]}},methods: {//添加一个todoaddTodo(todoObj){//unshift：在数组最前方添加一条数据this.todos.unshift(todoObj)},//勾选or取消勾选一个todocheckTodo(id){this.todos.forEach((todo)=>{if(todo.id === id) todo.done = !todo.done})},//删除一个tododeleteTodo(id){this.todos = this.todos.filter( todo => todo.id !== id )},//全选or取消全选checkAllTodo(done){this.todos.forEach((todo)=>{todo.done = done})},//清除所有已经完成的todoclearAllTodo(){this.todos = this.todos.filter((todo)=>{return !todo.done})}}}
</script><style>/*base*/body {background: #fff;}.btn {display: inline-block;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 4px;}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;}.btn-danger:hover {color: #fff;background-color: #bd362f;}.btn:focus {outline: none;}.todo-container {width: 600px;margin: 0 auto;}.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;}
</style>

总结

  1. 组件化编码流程：

    ​ (1). 拆分静态组件：组件要按照功能点拆分，命名不要与html元素冲突。

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

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

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

    ​ (3).实现交互：从绑定事件开始。

  2. props适用于：

    ​ (1).父组件 ==> 子组件 通信

    ​ (2).子组件 ==> 父组件 通信（要求父先给子一个函数）

  3. 使用v-model时要切记：v-model绑定的值不能是props传过来的值，因为props是不可以修改的！

  4. props传过来的若是对象类型的值，修改对象中的属性时Vue不会报错，但不推荐这样做。

1.3 浏览器本地存储

场景：在购物网站里，没有登录的情况下搜索商品后，搜索框里就会记录搜索记录，这种技术用到的就是本地存储功能；

localStorage

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>localStorage</title></head><body><h2>localStorage</h2><button onclick="saveData()">点我保存一个数据</button><button onclick="readData()">点我读取一个数据</button><button onclick="deleteData()">点我删除一个数据</button><button onclick="deleteAllData()">点我清空一个数据</button><script type="text/javascript" >let p = {name:'张三',age:18}function saveData(){localStorage.setItem('msg','hello!!!')localStorage.setItem('msg2',666)localStorage.setItem('person',JSON.stringify(p))}function readData(){console.log(localStorage.getItem('msg'))console.log(localStorage.getItem('msg2'))const result = localStorage.getItem('person')console.log(JSON.parse(result))// console.log(localStorage.getItem('msg3'))}function deleteData(){localStorage.removeItem('msg2')}function deleteAllData(){localStorage.clear()}</script></body>
</html>

localStorage:浏览器关闭后数据还在；

sessionStorage

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>sessionStorage</title></head><body><h2>sessionStorage</h2><button onclick="saveData()">点我保存一个数据</button><button onclick="readData()">点我读取一个数据</button><button onclick="deleteData()">点我删除一个数据</button><button onclick="deleteAllData()">点我清空一个数据</button><script type="text/javascript" >let p = {name:'张三',age:18}function saveData(){sessionStorage.setItem('msg','hello!!!')sessionStorage.setItem('msg2',666)sessionStorage.setItem('person',JSON.stringify(p))}function readData(){console.log(sessionStorage.getItem('msg'))console.log(sessionStorage.getItem('msg2'))const result = sessionStorage.getItem('person')console.log(JSON.parse(result))// console.log(sessionStorage.getItem('msg3'))}function deleteData(){sessionStorage.removeItem('msg2')}function deleteAllData(){sessionStorage.clear()}</script></body>
</html>

sessionStorage: 关闭浏览器后，数据就没了；

总结

localStorage 与sessionStorage统称为webStorage

  1. 存储内容大小一般支持5MB左右（不同浏览器可能还不一样）

  2. 浏览器端通过 Window.sessionStorage 和 Window.localStorage 属性来实现本地存储机制。

  3. 相关API：

    1. xxxxxStorage.setItem('key', 'value');
      该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。

    2. xxxxxStorage.getItem('person');

      ​ 该方法接受一个键名作为参数，返回键名对应的值。

    3. xxxxxStorage.removeItem('key');

      ​ 该方法接受一个键名作为参数，并把该键名从存储中删除。

    4. xxxxxStorage.clear()

      ​ 该方法会清空存储中的所有数据。

  4. 备注：

    1. SessionStorage存储的内容会随着浏览器窗口关闭而消失。
    2. LocalStorage存储的内容，需要手动清除才会消失。
    3. xxxxxStorage.getItem(xxx)如果xxx对应的value获取不到，那么getItem的返回值是null。
    4. JSON.parse(null)的结果依然是null。

项目里一般使用监视属性watch里做本地存储

<template><div id="root"><div class="todo-container"><div class="todo-wrap"><MyHeader :addTodo="addTodo"/><MyList :todos="todos" :checkTodo="checkTodo" :deleteTodo="deleteTodo"/><MyFooter :todos="todos" :checkAllTodo="checkAllTodo" :clearAllTodo="clearAllTodo"/></div></div></div>
</template><script>import MyHeader from './components/MyHeader'import MyList from './components/MyList'import MyFooter from './components/MyFooter.vue'export default {name:'App',components:{MyHeader,MyList,MyFooter},data() {return {//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）todos:JSON.parse(localStorage.getItem('todos')) || []}},methods: {//添加一个todoaddTodo(todoObj){this.todos.unshift(todoObj)},//勾选or取消勾选一个todocheckTodo(id){this.todos.forEach((todo)=>{if(todo.id === id) todo.done = !todo.done})},//删除一个tododeleteTodo(id){this.todos = this.todos.filter( todo => todo.id !== id )},//全选or取消全选checkAllTodo(done){this.todos.forEach((todo)=>{todo.done = done})},//清除所有已经完成的todoclearAllTodo(){this.todos = this.todos.filter((todo)=>{return !todo.done})}},watch: {todos:{deep:true,handler(value){localStorage.setItem('todos',JSON.stringify(value))}}},}
</script><style>/*base*/body {background: #fff;}.btn {display: inline-block;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 4px;}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;}.btn-danger:hover {color: #fff;background-color: #bd362f;}.btn:focus {outline: none;}.todo-container {width: 600px;margin: 0 auto;}.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;}
</style>

1.4 组件自定义事件

实现子组件给父组件传递数据

子组件Student.vue

<template><div class="student"><h2>学生姓名：{{name}}</h2><h2>学生性别：{{sex}}</h2><h2>当前求和为：{{number}}</h2><button @click="add">点我number++</button><button @click="sendStudentlName">把学生名给App</button><button @click="unbind">解绑atguigu事件</button><button @click="death">销毁当前Student组件的实例(vc)</button></div>
</template><script>export default {name:'Student',data() {return {name:'张三',sex:'男',number:0}},methods: {//下边的this指的是vcadd(){console.log('add回调被调用了')this.number++},sendStudentlName(){//触发Student组件实例身上的atguigu事件this.$emit('atguigu',this.name,666,888,900)// this.$emit('demo')// this.$emit('click')},unbind(){this.$off('atguigu') //解绑一个自定义事件// this.$off(['atguigu','demo']) //解绑多个自定义事件// this.$off() //解绑所有的自定义事件},death(){this.$destroy() //销毁了当前Student组件的实例，销毁后所有Student实例的自定义事件全都不奏效。}},}
</script><style lang="less" scoped>.student{background-color: pink;padding: 5px;margin-top: 30px;}
</style>

子组件School.vue

<template><div class="school"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><button @click="sendSchoolName">把学校名给App</button></div>
</template><script>export default {name:'School',props:['getSchoolName'],data() {return {name:'尚硅谷',address:'北京',}},methods: {sendSchoolName(){this.getSchoolName(this.name)}},}
</script><style scoped>.school{background-color: skyblue;padding: 5px;}
</style>

父组件App.vue

<template><div class="app"><h1>{{msg}}，学生姓名是:{{studentName}}</h1><!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 --><School :getSchoolName="getSchoolName"/><!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） --><!-- <Student @atguigu="getStudentName" @demo="m1"/> --><!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref） --><Student ref="student" @click.native="show"/></div>
</template><script>import Student from './components/Student'import School from './components/School'export default {name:'App',components:{School,Student},data() {return {msg:'你好啊！',studentName:''}},methods: {getSchoolName(name){console.log('App收到了学校名：',name)},getStudentName(name,...params){console.log('App收到了学生名：',name,params)this.studentName = name},m1(){console.log('demo事件被触发了！')},show(){alert(123)}},mounted() {this.$refs.student.$on('atguigu',this.getStudentName) //绑定自定义事件// this.$refs.student.$once('atguigu',this.getStudentName) //绑定自定义事件（一次性）},}
</script><style scoped>.app{background-color: gray;padding: 5px;}
</style>

总结：

  1. 一种组件间通信的方式，适用于：子组件 ===> 父组件

  2. 使用场景：A是父组件，B是子组件，B想给A传数据，那么就要在A中给B绑定自定义事件（事件的回调在A中）。

  3. 绑定自定义事件：

    1. 第一种方式，在父组件中（后边的Demo是子组件）：<Demo @atguigu="test"/>或 <Demo v-on:atguigu="test"/>

    2. 第二种方式，在父组件中：

      <Demo ref="demo"/>
......
mounted(){this.$refs.xxx.$on('atguigu',this.test)
}

    3. 若想让自定义事件只能触发一次，可以使用once修饰符，或$once方法。

  4. 触发自定义事件：this.$emit('atguigu',数据)

  5. 解绑自定义事件this.$off('atguigu')

  6. 组件上也可以绑定原生DOM事件，需要使用native修饰符。

  7. 注意：通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，回调要么配置在methods中，要么用箭头函数，否则this指向会出问题！

1.5 优化todoList案例

优化之前子组件给父组件传递消息（之前是父给子一个函数，然后子通过这个函数把数据再传给父）

添加功能
在这里插入图片描述
在这里插入图片描述

全选、清空功能
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

二 全局事件总线

2.1 全局事件总线介绍

是一种组件间的通信方式，可以实现任意组件间的通信
在这里插入图片描述
School.vue

<template><div class="school"><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2></div>
</template><script>export default {name:'School',data() {return {name:'尚硅谷',address:'北京',}},mounted() {// console.log('School',this)this.$bus.$on('hello',(data)=>{console.log('我是School组件，收到了数据',data)})},beforeDestroy() {this.$bus.$off('hello')},}
</script><style scoped>.school{background-color: skyblue;padding: 5px;}
</style>

Student.vue

<template><div class="student"><h2>学生姓名：{{name}}</h2><h2>学生性别：{{sex}}</h2><button @click="sendStudentName">把学生名给School组件</button></div>
</template><script>export default {name:'Student',data() {return {name:'张三',sex:'男',}},mounted() {// console.log('Student',this.x)},methods: {sendStudentName(){this.$bus.$emit('hello',this.name)}},}
</script><style lang="less" scoped>.student{background-color: pink;padding: 5px;margin-top: 30px;}
</style>

main.js

//引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//关闭Vue的生产提示
Vue.config.productionTip = false//创建vm
new Vue({el:'#app',render: h => h(App),beforeCreate() {Vue.prototype.$bus = this //安装全局事件总线},
})

总结

  1. 一种组件间通信的方式，适用于任意组件间通信。

  2. 安装全局事件总线：

    new Vue({......beforeCreate() {Vue.prototype.$bus = this //安装全局事件总线，$bus就是当前应用的vm},......
})

  3. 使用事件总线：

    1. 接收数据：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身。

      methods(){demo(data){......}
}
......
mounted() {this.$bus.$on('xxxx',this.demo)
}

    2. 提供数据：this.$bus.$emit('xxxx',数据)

  4. 最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件。

修改之前todoLIst案例，MyItem.vue通过全局事件总线传递数据给App.vue

App.vue

<template><div id="root"><div class="todo-container"><div class="todo-wrap"><MyHeader @addTodo="addTodo"/><MyList :todos="todos"/><MyFooter :todos="todos" @checkAllTodo="checkAllTodo" @clearAllTodo="clearAllTodo"/></div></div></div>
</template><script>import MyHeader from './components/MyHeader'import MyList from './components/MyList'import MyFooter from './components/MyFooter.vue'export default {name:'App',components:{MyHeader,MyList,MyFooter},data() {return {//由于todos是MyHeader组件和MyFooter组件都在使用，所以放在App中（状态提升）todos:JSON.parse(localStorage.getItem('todos')) || []}},methods: {//添加一个todoaddTodo(todoObj){this.todos.unshift(todoObj)},//勾选or取消勾选一个todocheckTodo(id){this.todos.forEach((todo)=>{if(todo.id === id) todo.done = !todo.done})},//删除一个tododeleteTodo(id){this.todos = this.todos.filter( todo => todo.id !== id )},//全选or取消全选checkAllTodo(done){this.todos.forEach((todo)=>{todo.done = done})},//清除所有已经完成的todoclearAllTodo(){this.todos = this.todos.filter((todo)=>{return !todo.done})}},watch: {todos:{deep:true,handler(value){localStorage.setItem('todos',JSON.stringify(value))}}},mounted() {this.$bus.$on('checkTodo',this.checkTodo)this.$bus.$on('deleteTodo',this.deleteTodo)},beforeDestroy() {this.$bus.$off('checkTodo')this.$bus.$off('deleteTodo')},}
</script><style>/*base*/body {background: #fff;}.btn {display: inline-block;padding: 4px 12px;margin-bottom: 0;font-size: 14px;line-height: 20px;text-align: center;vertical-align: middle;cursor: pointer;box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);border-radius: 4px;}.btn-danger {color: #fff;background-color: #da4f49;border: 1px solid #bd362f;}.btn-danger:hover {color: #fff;background-color: #bd362f;}.btn:focus {outline: none;}.todo-container {width: 600px;margin: 0 auto;}.todo-container .todo-wrap {padding: 10px;border: 1px solid #ddd;border-radius: 5px;}
</style>

MyItem.vue

<template><li><label><input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/><!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props --><!-- <input type="checkbox" v-model="todo.done"/> --><span>{{todo.title}}</span></label><button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button></li>
</template><script>export default {name:'MyItem',//声明接收todoprops:['todo'],methods: {//勾选or取消勾选handleCheck(id){//通知App组件将对应的todo对象的done值取反// this.checkTodo(id)this.$bus.$emit('checkTodo',id)},//删除handleDelete(id){if(confirm('确定删除吗？')){//通知App组件将对应的todo对象删除// this.deleteTodo(id)this.$bus.$emit('deleteTodo',id)}}},}
</script><style scoped>/*item*/li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;}li label {float: left;cursor: pointer;}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;}li button {float: right;display: none;margin-top: 3px;}li:before {content: initial;}li:last-child {border-bottom: none;}li:hover{background-color: #ddd;}li:hover button{display: block;}
</style>

2.2 消息发布订阅

实现发布订阅的第三方库有很多，这里推荐的是pubsub-js，安装这个库：

npm i pubsub-js

在这里插入图片描述
实现Student.vue给School.vue组件发送数据

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() {// console.log('School',this)//订阅消息/* this.$bus.$on('hello',(data)=>{console.log('我是School组件，收到了数据',data)}) */this.pubId = pubsub.subscribe('hello',(msgName,data)=>{console.log(this)// console.log('有人发布了hello消息，hello消息的回调执行了',msgName,data)})},beforeDestroy() {// this.$bus.$off('hello')pubsub.unsubscribe(this.pubId)},}
</script><style scoped>.school{background-color: skyblue;padding: 5px;}
</style>

Student.vue

<template><div class="student"><h2>学生姓名：{{name}}</h2><h2>学生性别：{{sex}}</h2><button @click="sendStudentName">把学生名给School组件</button></div>
</template><script>import pubsub from 'pubsub-js'export default {name:'Student',data() {return {name:'张三',sex:'男',}},mounted() {// console.log('Student',this.x)},methods: {sendStudentName(){// this.$bus.$emit('hello',this.name)pubsub.publish('hello',666)//发布消息}},}
</script><style lang="less" scoped>.student{background-color: pink;padding: 5px;margin-top: 30px;}
</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)去取消订阅。

todoList案例里MyItem里的删除功能，使用消息发布订阅来实现

MyItem.vue:

App.vue: 订阅消息

在这里插入图片描述

MyItem发布消息
在这里插入图片描述

todiList案例新增一个编辑功能
在这里插入图片描述

MyItem

<template><li><label><input type="checkbox" :checked="todo.done" @change="handleCheck(todo.id)"/><!-- 如下代码也能实现功能，但是不太推荐，因为有点违反原则，因为修改了props --><!-- <input type="checkbox" v-model="todo.done"/> --><span v-show="!todo.isEdit">{{todo.title}}</span><input type="text" v-show="todo.isEdit" :value="todo.title" <!--@blur：失去焦点事件-->@blur="handleBlur(todo,$event)"ref="inputTitle"></label><button class="btn btn-danger" @click="handleDelete(todo.id)">删除</button><button v-show="!todo.isEdit" class="btn btn-edit" @click="handleEdit(todo)">编辑</button></li>
</template><script>import pubsub from 'pubsub-js'export default {name:'MyItem',//声明接收todoprops:['todo'],methods: {//勾选or取消勾选handleCheck(id){//通知App组件将对应的todo对象的done值取反// this.checkTodo(id)this.$bus.$emit('checkTodo',id)},//删除handleDelete(id){if(confirm('确定删除吗？')){//通知App组件将对应的todo对象删除// this.deleteTodo(id)// this.$bus.$emit('deleteTodo',id)pubsub.publish('deleteTodo',id)}},//编辑handleEdit(todo){if(todo.hasOwnProperty('isEdit')){todo.isEdit = true}else{// console.log('@')this.$set(todo,'isEdit',true)}this.$nextTick(function(){this.$refs.inputTitle.focus()})},//失去焦点回调（真正执行修改逻辑）handleBlur(todo,e){todo.isEdit = falseif(!e.target.value.trim()) return alert('输入不能为空！')this.$bus.$emit('updateTodo',todo.id,e.target.value)}},}
</script><style scoped>/*item*/li {list-style: none;height: 36px;line-height: 36px;padding: 0 5px;border-bottom: 1px solid #ddd;}li label {float: left;cursor: pointer;}li label li input {vertical-align: middle;margin-right: 6px;position: relative;top: -1px;}li button {float: right;display: none;margin-top: 3px;}li:before {content: initial;}li:last-child {border-bottom: none;}li:hover{background-color: #ddd;}li:hover button{display: block;}
</style>
  1. 语法：this.$nextTick(回调函数)（nextTick：下一轮）
  2. 作用：在下一次 DOM 更新结束后执行其指定的回调。
  3. 什么时候用：当改变数据后，要基于更新后的新DOM进行某些操作时，要在nextTick所指定的回调函数中执行。

三 动画

3.1 动画效果

点击按钮的时候，会有如下动画效果
在这里插入图片描述

组件Test.vue

<template><div><button @click="isShow = !isShow">显示/隐藏</button><!-- transition：过渡；appear：一打开页面就有动画（不需要点击按钮），也可以这样写： :appear="true" --><transition name="hello" appear><h1 v-show="isShow">你好啊！</h1></transition></div>
</template><script>export default {name:'Test',data() {return {isShow:true}},}
</script><style scoped>h1{background-color: orange;}/* 进入时激活的样式 */.hello-enter-active{animation: atguigu 0.5s linear;}/* 离开时激活的样式 */.hello-leave-active{animation: atguigu 0.5s linear reverse;}/* 定义动画 */@keyframes atguigu {from{transform: translateX(-100%);}to{transform: translateX(0px);}}
</style>

App.vue

<template><div><Test/><Test2/><Test3/></div>
</template><script>import Test from './components/Test'import Test2 from './components/Test2'import Test3 from './components/Test3'export default {name:'App',components:{Test,Test2,Test3},}
</script>

3.2 使用过渡实现上边的效果

<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition name="hello" appear><h1 v-show="!isShow" key="1">你好啊！</h1></transition-group></div>
</template><script>export default {name:'Test',data() {return {isShow:true}},}
</script><style scoped>h1{background-color: orange;}/* 进入的起点、离开的终点 */.hello-enter,.hello-leave-to{transform: translateX(-100%);}.hello-enter-active,.hello-leave-active{transition: 0.5s linear;}/* 进入的终点、离开的起点 */.hello-enter-to,.hello-leave{transform: translateX(0);}</style>

3.3 多个元素有同样的过渡效果

使用

<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition-group name="hello" appear><h1 v-show="!isShow" key="1">你好啊！</h1><h1 v-show="isShow" key="2">尚硅谷！</h1></transition-group></div>
</template><script>export default {name:'Test',data() {return {isShow:true}},}
</script><style scoped>h1{background-color: orange;}/* 进入的起点、离开的终点 */.hello-enter,.hello-leave-to{transform: translateX(-100%);}.hello-enter-active,.hello-leave-active{transition: 0.5s linear;}/* 进入的终点、离开的起点 */.hello-enter-to,.hello-leave{transform: translateX(0);}</style>

3.4 集成第三方动画

推荐第三方动画库：animate.css，官网：https://animate.style/

右侧就是各种动画效果，点击对应的右侧复制按钮，即可复制代码供后边使用
在这里插入图片描述

安装

npm install animate.css

在这里插入图片描述
引入

import 'animate.css'

在里加 name="animate__animated animate__bounce" ；

写入自己要使用的动画（复制官网上的代码）
在这里插入图片描述

enter-active-class="animate__swing"
leave-active-class="animate__backOutUp"

完整代码

<template><div><button @click="isShow = !isShow">显示/隐藏</button><transition-group appearname="animate__animated animate__bounce" enter-active-class="animate__swing"leave-active-class="animate__backOutUp"><h1 v-show="!isShow" key="1">你好啊！</h1><h1 v-show="isShow" key="2">尚硅谷！</h1></transition-group></div>
</template><script>import 'animate.css'export default {name:'Test',data() {return {isShow:true}},}
</script><style scoped>h1{background-color: orange;}
</style>

3.5 动画与过渡总结

  1. 作用：在插入、更新或移除 DOM元素时，在合适的时候给元素添加样式类名。

  2. 图示：
    在这里插入图片描述

  3. 写法：

    1. 准备好样式：

      • 元素进入的样式：
        1. v-enter：进入的起点
        2. v-enter-active：进入过程中
        3. v-enter-to：进入的终点
      • 元素离开的样式：
        1. v-leave：离开的起点
        2. v-leave-active：离开过程中
        3. v-leave-to：离开的终点

    2. 使用<transition>包裹要过度的元素，并配置name属性：

      <transition name="hello"><h1 v-show="isShow">你好啊！</h1>
</transition>

    3. 备注：若有多个元素需要过度，则需要使用：<transition-group>，且每个元素都要指定key值。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/620530.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

定时器问题（vue的问题）

定时器问题（vue的问题）

我在a页面写一个定时&#xff0c;让他每秒钟打印一个1&#xff0c;然后跳转到b页面&#xff0c;此时可以看到&#xff0c;定时器依然在执行。这样是非常消耗性能的。如下图所示&#xff1a; 解决方法1 首先我在data函数里面进行定义定时器名称&#xff1a; data() {return {t…
阅读更多...
SpringBoot 引入分页插件 PageHelper

SpringBoot 引入分页插件 PageHelper

官网 https://pagehelper.github.io/docs/howtouse/ 引入步骤 第1步&#xff1a;引入依赖 <!--分页插件--> <dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.3.2</ver…
阅读更多...
Open3D 计算点云质心和中心（18）

Open3D 计算点云质心和中心（18）

Open3D 计算点云质心和中心（18） 一、算法介绍二、算法实现1.代码2.结果一、算法介绍 质心和中心是有所区别的，点云质心可以看作每个点的坐标均值，点云中心可以看作点云所在包围盒的中心，这也是上一章坐标最值的常用方法，下面就两种方法进行实现（图例，大概就是这个意思…
阅读更多...
Android WiFi Service启动-Android13

Android WiFi Service启动-Android13

Android WiFi Service启动 - Android13 1、SystemServer中入口2、WifiService启动2.1 关键类概要2.2 启动时序图 Android WiFi基础概览 AOSP > 文档 > 心主题 > WiFi概览 1、SystemServer中入口 编译生成对应的jar包&#xff1a;"/apex/com.android.wifi/javalib…
阅读更多...
高性能RPC框架解密

高性能RPC框架解密

专栏集锦&#xff0c;大佬们可以收藏以备不时之需&#xff1a; Spring Cloud 专栏&#xff1a;http://t.csdnimg.cn/WDmJ9 Python 专栏&#xff1a;http://t.csdnimg.cn/hMwPR Redis 专栏&#xff1a;http://t.csdnimg.cn/Qq0Xc TensorFlow 专栏&#xff1a;http://t.csdni…
阅读更多...
编译和链接（2）

编译和链接（2）

3. 预处理详解 3.2#define 3.2.5带副作用的宏参数 当宏参数在宏的定义中出现超过一次的时候&#xff0c;如果参数带有副作用&#xff0c;那么你在使用这个宏的时候就可能 出现危险&#xff0c;导致不可预测的后果。副作用就是表达式求值的时候出现的永久性效果。 例如&…
阅读更多...
nmealib 库移植 - -编译报错不完全类型 error: field ‘st_atim’ has incomplete type

nmealib 库移植 - -编译报错不完全类型 error: field ‘st_atim’ has incomplete type

一、报错提示-不完全类型(has incomplete type) Compiling obj/main.o from main.c.. arm-linux-gcc -g -w -stdgnu99 -DLINUX -I./ -Inmealib/inc/ -c -o obj/main.o main.c In file included from /home/user/Desktop/nuc980-sdk/sdk/arm_linux_4.8/usr/include/sys/stat…
阅读更多...
【c/python】用GTK实现一个带菜单的窗口

【c/python】用GTK实现一个带菜单的窗口

一、用python 在GTK中创建一个带菜单的窗口&#xff0c;可以通过使用Gtk.MenuBar、Gtk.Menu和Gtk.MenuItem组件来构建菜单。以下是一个基本的例子&#xff0c;展示了如何使用Python的PyGObject库创建一个简单的带菜单栏的GTK窗口。 import gi gi.require_version(Gtk, 3.0) f…
阅读更多...
【软件测试】学习笔记-不同视角的软件性能与性能指标

【软件测试】学习笔记-不同视角的软件性能与性能指标

本篇文章探讨新的测试主题&#xff1a;性能测试&#xff0c;因为性能测试的专业性很强&#xff0c;所以我会以从0到1的入门者视角&#xff0c;系统性地阐述性能测试的方法以及应用领域&#xff0c;用实例去诠释各种性能指标。 本篇文章站在全局的视角&#xff0c;帮你梳理软件性…
阅读更多...
【Python机器学习】决策树——树的特征重要性

【Python机器学习】决策树——树的特征重要性

利用一些有用的属性来总结树的工作原理&#xff0c;其中最常用的事特征重要性&#xff0c;它为每个特征树的决策的重要性进行排序。对于每个特征来说&#xff0c;它都是介于0到1之间的数字&#xff0c;其中0代表“根本没有用到”&#xff0c;1代表“完美预测目标值”。特征重要…
阅读更多...
【复现】网康科技-防火墙存在RCE漏洞_17

【复现】网康科技-防火墙存在RCE漏洞_17

目录 一.概述 二 .漏洞影响 三.漏洞复现 1. 漏洞一&#xff1a; 四.修复建议&#xff1a; 五. 搜索语法&#xff1a; 六.免责声明 一.概述 网康下一代防火墙(NGFW)是一款可以全面应对应用层威胁的高性能防火墙。通过深入洞察网络流量中的用户、应用和内容&#xff0c;并…
阅读更多...
Vulnhub靶机：driftingblues 2

Vulnhub靶机：driftingblues 2

一、介绍 运行环境&#xff1a;Virtualbox 攻击机&#xff1a;kali&#xff08;10.0.2.15&#xff09; 靶机&#xff1a;driftingblues2&#xff08;10.0.2.18&#xff09; 目标&#xff1a;获取靶机root权限和flag 靶机下载地址&#xff1a;https://www.vulnhub.com/entr…
阅读更多...
YOLOv5改进 | 注意力篇 | CGAttention实现级联群体注意力机制 (全网首发改进)

YOLOv5改进 | 注意力篇 | CGAttention实现级联群体注意力机制 (全网首发改进)

一、本文介绍 本文给大家带来的改进机制是实现级联群体注意力机制CascadedGroupAttention，其主要思想为增强输入到注意力头的特征的多样性。与以前的自注意力不同，它为每个头提供不同的输入分割，并跨头级联输出特征。这种方法不仅减少了多头注意力中的计算冗余，而且通过增…
阅读更多...
四、Qt 的第一个demo

四、Qt 的第一个demo

在上一篇章节里《三、Qt Creator 使用》&#xff0c;我们介绍了如何使用Qt Creator创建一个简单的带窗体的demo&#xff0c;在这一章节里&#xff0c;我们详细讲解一下这个demo的文件组成&#xff0c;及主函数&#xff0c;并在UI上加一些控件&#xff0c;实现一些简单的功能。 …
阅读更多...
Qt打包程序

Qt打包程序

添加链接描述
阅读更多...
11Spring IoC注解式开发(下)(负责注入的注解/全注解开发)

11Spring IoC注解式开发(下)(负责注入的注解/全注解开发)

1负责注入的注解 负责注入的注解&#xff0c;常见的包括四个&#xff1a; ValueAutowiredQualifierResource 1.1 Value 当属性的类型是简单类型时&#xff0c;可以使用Value注解进行注入。Value注解可以出现在属性上、setter方法上、以及构造方法的形参上, 方便起见,一般直…
阅读更多...
git修改历史（非最新）提交信息

git修改历史（非最新）提交信息

二、修改最近第二次或更早之前的commit信息 当前有三次提交&#xff0c;从近到远分别为1、2、3 以修改第2次提交为例&#xff08;从最新往前数&#xff09; 1、使用命令git rebase -i HEAD~2 按i进入编辑模式&#xff0c;将对应的pick改为edit&#xff0c;然后ctrlc退出。最…
阅读更多...
linux安装系统遇到的问题

linux安装系统遇到的问题

这两天打算攻克下来网络编程&#xff0c;发现这也确实是很重要的一个东西&#xff0c;但我就奇了怪了&#xff0c;老师就压根没提&#xff0c;反正留在我印象的就一个tcp/ip七层网络。也说正好&#xff0c;把linux命令也熟悉熟悉&#xff0c;拿着我大一课本快速过过 连接cento…
阅读更多...
survey和surveyCV：如何用R语言进行复杂抽样设计、权重计算和10折交叉验证？

survey和surveyCV：如何用R语言进行复杂抽样设计、权重计算和10折交叉验证？

一、引言 在实际调查和研究中&#xff0c;我们往往面临着样本选择的复杂性。复杂抽样设计能够更好地反映真实情况&#xff0c;提高数据的代表性和可靠性。例如&#xff0c;多阶段抽样可以有效地解决大规模调查的问题&#xff0c;整群抽样能够在保证样本的随机性的同时减少资源消…
阅读更多...
腾讯云添加SSL证书

腾讯云添加SSL证书

一、进入腾讯云SSL证书&#xff1a; ssl证书控制台地址 选择“我的证书”&#xff0c;点击"申请免费证书" 2、填写域名和邮箱&#xff0c;点击“提交申请” 在此页面中会出现主机记录和记录值。 2、进入云解析 DNS&#xff1a;云解析DNS地址 进入我的解析-记录…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023