尚硅谷Vue系列教程学习笔记（9）

参考课程：《尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通》
参考链接：https://www.bilibili.com/video/BV1Zy4y1K7SH?vd_source=4f4d3466cdc2c5a2539504632c862ce7
笔记上传说明：上述课程中共有168节小课，对每10次课的笔记整合之后上传一次。
详细代码案例请移步本人gitee仓库： vue_basic案例代码实现
Vue-cli脚手架实现案例代码见仓库：vue01

//在main.js中添加如下代码：
//将新创建的vc实例对象赋值给Vue.prototype
const Demo = Vue.extend({})
const demo = new Demo()
Vue.prototype.x = demo


//在School.vue组件中的mounted()方法中添加如下代码：
 mounted(){
        // console.log(this.x)
        //在父组件中给prototype中的x对象设置一个on事件
        this.x.$on("getStudentName",(studentName)=>{
            console.log("School组件得到了学生姓名为：",studentName)
        })
    }



//在Student.vue组件中的methods:{}对象中添加如下代码：
 methods:{
    sendNameToSchool(){
        //在子组件中给prototype中的x对象设置一个emit事件，用来调用School组件传递进去的on事件
        this.x.$emit("getStudentName","wyy")
    }
  }


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

解析：使用上述代码，即可完成Student.vue子组件向School.vue父组件中传入wyy字符串的studentName数据；

2.第二种，使用Vue.prototype方法实现组件间通信的方法：

new Vue({
    el: "#app",
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this
    }

})

1
2
3
4
5
6
7
8
9

编码建议：
1.可以在src文件夹下面创建一个constans.js文件，里面创建一个const对象。
2.建议在组件消失之前取消绑定的事件。


//需要在组件的beforeDestroy()函数中，调用如下代码：
beforeDestory(){
    this.$bus.$off('xxxx')
}

1
2
3
4
5
6

086-TodoList案例-使用事件总线

需要修改的地方：
1.main.js中在newVue的生命周期函数beforeCreate()函数中安装全局事件：


Vue.prototype.bus = this


1
2
3
4

2.删除App.vue组件中向子组件传入函数调用的代码，并删除子组件中接受的props属性中对应的参数‘

3.在App.vue的newVue中的mounted()函数中给bus事件总线设置函数：



  //挂载钩子
  mounted:{
    this.$bus.on('checkTodo',this.checkTodo)
    this.$bus.on('deleteTodo',this.deleteTodo)
    this.$bus.on('checkAllTodo',this.checkAllTodo)
    this.$bus.on('clearAll',this.clearAll)
}

1
2
3
4
5
6
7
8
9
10

4.在子组件中使用emit函数调用在App.vue组件中设置的函数：

 changeCheck(id){
      //向App.vue组件中的checkTodo函数传入参数id
      // this.checkTodo(id)
      this.$bus.$emit("checkTodo",id)
      console.log(id)
    },
    ...

1
2
3
4
5
6
7
8

087-消息订阅与发布

重点：消息订阅与发布也是实现组件间通信的方法：

消息订阅的步骤：
1.订阅消息：消息名；
2.发布消息：消息内容；

引入pubsub.js之后可以在任意一个框架里面订阅和发布消息。

实现代码如下：

//在接收方中安装pubsub-js库
//在挂载函数mounted中订阅消息
mounted() {
    this.pubId = pubsub.subscribe("demo", function (magName, data) {
      console.log("demo", data);
    });
  },
  //在该组件销毁之前，取消消息订阅
  beforeUnmount() {
    pubsub.unsubscribe(this.pubId);
  }


//在发送方中安装pubsub-js库
//在methods属性中发送消息
methods:{
    sendNameToSchool(){
        //在子组件中给prototype中的x对象设置一个emit事件，用来调用School组件传递进去的on事件
        // this.$bus.$emit("getStudentName","wyy")
        // console.log(this.name)
        pubsub.publish("demo",666)
    }
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

088-TodoList案例-使用消息订阅和接收方法实现

实现案例代码：


//在App.vue中写入：
// 挂载钩子
  mounted(){
    //使用消息订阅与发布的方法
    this.deleteTodoId = pubsub.subscribe("deleteTodo",(msgName, id)=>{
      console.log("deleteTodo",msgName, id)
      //调用删除todo事务的函数，向其中传入参数id
      this.deleteTodo(id)
  })
  },


//在MyItem.vue组件中写入：
 //点击删除按钮，得到对应的id
    deleteWork(id){
      //增加危险操作的选项
      if(confirm("确定删除该项任务么？")){
        pubsub.publish("deleteTodo", id)
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

089-TodoList案例-编辑

实现功能描述：在MyItem.vue组件中设置一个编辑按钮，点击之后，将该todo项从文本改为包含当前文本值的input输入框，然后修改之后，鼠标从input框中消失之后，input框变为普通文本。

实现代码：

//在MyItem.vue组件中的代码：
//在html页面中的代码



//在script脚本中的代码
//---------------------------设置处理编辑逻辑的按钮逻辑-------------------------
    handleEdit(todo){
      if(todo.hasOwnProporty('isEdit')){
        todo.isEdit = true
      }else{
        // todo.isEdit = true
        this.$set(todo, "isEdit", true)//需要使用$set的方式给todo对象增加一个响应式的属性isEdit
      }
    },
    //失去焦点的时候，修改todo对象
    handleBlur(todo,event){
      todo.isEdit = false
      this.$bus.$emit("updateTodo", todo.id, event.target.value)
    },



//在App.vue组件中的代码：
methods:{
     //更改todo对象函数
    updateTodo(id,name){
        this.todos.forEach((todo) => {
            if(todo.id === id){
                todo.name = name   //将对应的值取反
            }
        })
    },
}
 // 挂载钩子
  mounted(){
    //给bus绑定updateTodo
    this.$bus.$on('updateTodo',this.updateTodo)
  },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

090-$nextTrick

功能需求：当点击todo列表中的编辑按钮后，焦点也随之来到input输入框中。

重点：$nextTick会在dom结点更新之后再执行。

实现代码：

//需要在MyItem.vue组件中增加$nextTick的使用：
 handleEdit(todo){
      if(todo.hasOwnProporty('isEdit')){
        todo.isEdit = true
      }else{
        // todo.isEdit = true
        this.$set(todo, "isEdit", true)//需要使用$set的方式给todo对象增加一个响应式的属性isEdit
      }

      //将焦点设置到input框中
      this.$nextTick(function(){
        //input输入框获得焦点
        this.$refs.inputName.focus()
      })
    },

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//截止到2022年8月29日上午11：39

相关阅读:
DVWA之SQL注入
如何在忘记手机密码或图案时重置 Android 手机？
1400*C. Soldier and Cards（贪心&模拟）
Java常见漏洞——整数溢出漏洞、硬编码密码漏洞、不安全的随机数生成器
2018-2022年盟浪 ESG数据
全屏滚动插件Fullpage.js
读《高性能MySQL》笔记---MySQL架构
python 微信发送消息
『现学现忘』Docker基础 — 30、Docker中数据卷相关命令
高精度随流检测技术助力金融行业实现智能运维

原文地址：https://blog.csdn.net/weixin_43749999/article/details/126581850

尚硅谷Vue系列教程学习笔记（9）