vue中的基础知识

vue-cli 指令与修饰符

vue-cli指令

1. v-text：更新元素的 textContent(解析渲染文本)
2. v-html：更新元素的 innerHTML(解析渲染HTML节点)
3. v-bind(简写为:)：动态绑定 (动态绑定数据、属性) 动态绑定样式
4. v-on(简写为@)：绑定事件 (也可为表达式)
5. v-model：双向数据绑定
6. v-for：循环 (根据遍历数组来进行渲染) [提供key属性，性能提升]
7. v-if：根据表达式的真假条件，删除或添加DOM节点
8. v-show：根据表达式的真假条件，切换元素的display属性显示或隐藏DOM
9. v-cloak：防止刷新页面，网速慢的情况下显示插值表达式的{{xxx}}
10. v-pre：跳过没有指令的节点，加快编译
11. v-once：只渲染元素和组件一次

事件修饰符

1. .stop：阻止事件冒泡,相当于调用了event.stopPropagation方法
2. .prevent：阻止了事件的默认行为，相当于调用了event.preventDefault方法
3. .capture：使用事件捕获，而不是事件冒泡，使事件触发从包含这个元素的顶层开始往下触发
4. .self：只当在 event.target 是当前元素自身时触发处理函数
5. .once：绑定了事件以后只能触发一次，第二次就不会触发
6. .passive：在移动端，当我们在监听元素滚动事件的时候，会一直触发onscroll事件会让我们的网页变卡，因此我们使用这个修饰符的时候，相当于给onscroll事件整了一个.lazy修饰符
7. native：让组件变成像html内置标签那样监听根元素的原生事件

v-model 双向数据绑定修饰符

1. .lazy：懒加载，等change事件结束后在进行信息同步
2. .trim：自动过滤掉用户输入的首尾空格，而中间的空格不会过滤
3. .number：自动将用户的输入值转为数值类型

element-ui中的事件修饰符

1. @keyup.enter.native ：键盘回车事件

v-for 循环

1. 循环数组

   title:{{item.title}} index:{{index}}
   1

2. 循环对象

   title:{{item.title}} key:{{key}} index:{{index}}
   1

组件通讯

父传子

​ 概述：在父组件的子组件标签上绑定一个自定义属性，在子组件的props中通过被绑定的自定义属性进行接收。

1. 父组件

    
   1

2. 子组件

     props: {
       listArrs:Array   //子组件在props中使用父组件中的自定义属性名接受数据
     }
   1
   2
   3

子传父

概述：在父组件的子组件标签上绑定一个自定义事件，在子组件中通过this.$emit调用这个事件，并可携带参数，最终在父组件中的子组件标签上绑定的自定义事件所对应的父组件中的事件中进行操作。

1. 父组件

   
   1

2. 子组件

   methods:{
      btnClick(val){
         this.$emit('testClickbtn',val)
      }
   }
   1
   2
   3
   4
   5

3. 父组件

   methods:{
     testClick(val){
       console.log(val);
     }
   }
   1
   2
   3
   4
   5

事件总线

1. vue2

   //main.js
   Vue.prototype.$eventBus = new Vue();
   
   //A组件(发送)
   this.$eventBus.$emit('getAdd',10086)
   
   //B组件(接收)
   this.$eventBus.$on('getAdd',(val)=>{
     console.log(val);   //10086
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

2. vue3

   暂未学习，TODO

消息订阅与发布

1. 下载PubSubJs库

   cnpm install --save pubsub-js
   1

2. 检查信息

   npm info pubsub-js
   1

3. 在需要通讯的组件中进行引入

   import PubSub from "pubsub-js";
   1

4. 发布消息

   PubSub.publish('deleteTodo','tinghua');   //deleteTodo：名字 tinghua:数据
   1

5. 订阅消息

   PubSub.subscribe("deleteTodo", (method,index) => {
     console.log(method);   //名字
     console.log(index);   //数据
   });
   1
   2
   3
   4

vuex

• 可参考右侧笔记概述 vuex

slot 插槽

插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。

1. 匿名插槽（基础使用）

<SlotChild :url="database.url">{{database.title}}SlotChild>

   data() { 
    return {
       database:{
         title:"百度一下",
         url:"www.baidu.com"
       }
    }
1
2
3
4
5
6
7
8
9
10

 <a :href="url"><slot>默认内容，父组件不传递内容时，则会显示slot>a>
 
  props: {
       url:{
         type:String,
         default(){
           return ""
         }
       }
  }
1
2
3
4
5
6
7
8
9
10
11

效果如下

2. 作用域插槽

提示：父组件模板中的表达式只能访问父组件的作用域；子组件模板中的表达式只能访问子组件的作用域。

<a :href="database.url"><slot :slotData="database" :ting='666'>slot>a>

data() {
    return {
      database: {
        title: "哔哩哔哩",
        url: "https://www.bilibili.com/",
      },
    };
  }
1
2
3
4
5
6
7
8
9
10
11

     <SlotChild>
     
       <template v-slot="slotProps">
         {{slotProps.slotData.title}}
       template>
       
       
       <template v-slot="{slotData,ting}">
         {{slotProps.slotData.title}}
       template>
       
       
     SlotChild>
  
    data() { 
     return {
       database:{
         title:"百度一下",
         url:"www.baidu.com"
       }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

效果如下

作用域插槽：子组件通过上绑定自定义属性，父组件通过v-slot指令接收子组件绑定的自定义属性。
应用场景：插槽的内容可能想要同时使用父组件域内和子组件域内的数据

3. 具名插槽

     <SlotChild>
       <template #header>  
         {{database.title}}
       template>
       <template v-slot:footer>
         {{database.url}}
       template>
     SlotChild>
 
    data() { 
     return {
       database:{
         title:"百度一下",
         url:"www.baidu.com"
       }
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

    <a :href="url"><slot name="header">slot>a>
    <br>
    <a :href="url"><slot name="footer">slot>a>
1
2
3
4

效果如下

4. 动态插槽名

1

动态组件

应用场景：当我们不确定接下来呈现的的组件是哪个组件时，我们可以用动态的方式绑定组件

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

效果如下：

vue中的生命周期函数

概述：Vue实例有一个完整的生命周期，也就是说从组件开始创建、初始化数据。编译模板。挂载DOM、渲染-更新-卸载等一系列过程。我们将其称为Vue实例的生命周期（函数钩子）

下方图为Vue官方给出的Vue生命周期流程图

vue的生命周期主要可划分为四个阶段：即初始化→挂载→更新→销毁

初始化

• beforeCreate—创建前
  this变量还不能使用，无法访问到data中的数据
• created—创建后
  最早操作data中数据的生命周期函数

挂载

• beforeMount—挂载前
  在挂载开始之前被调用，相关的render函数首次被调用，此时可以获取dom节点，但还无法对其进行操作
• mounted—挂载后
  挂载完毕，dom节点被渲染到文档中，dom操作可以正常进行。此生命周期函数是最早操作dom节点的生命周期

更新

• beforeUpdate—数据更新前
  当data的数据发生改变会执行这个生命周期函数，此时内存中数据是新的但页面是旧的
• updated—数据更新后
  更新完成，此时内存中的数据和页面都是新的

销毁

• beforeDestroy—实例销毁前
  实例销毁之前调用，实例仍然可用。一般在此生命周期函数中做一些重置的操作，列如清除定时器和监听的dom事件
• destroyed—实例销毁后
  实例销毁之后被调用，所有的事件监听器会被移除，所有的子实例也会被销毁

缓存

• activated—组件激活时调用
• deactivated—组件停用时调用
  activated和deactivated这两个生命周期函数是配合来使用。当keep-alive中的路由组件进行切换时，会被缓存，不会走销毁的流程

父子组件的生命周期顺序

1. parent before create
2. parent created
3. parent before mount
4. child before create
5. child created
6. child before mount
7. child mounted
8. parent mounted
9. parent before update
10. child before update
11. child updated
12. parent updated
13. parent before destroy
14. child before destroy
15. child destroyed
16. parent destroyed

总结：父子之间的生命周期函数执行顺序都是从外向内的方式执行

异步组件

按需加载组件，一些场景下优化页面加载速度

components:{
    hello:()=>import('./components/HelloWorld.vue')   
},
1
2
3

keep-alive

应用场景：频繁切换，避免重复渲染组件。

概述： 是一个内置组件，它的功能是在多个组件间动态切换时缓存被移除的组件实例。

• include-字符串或正则表达式，只有匹配的组件会被缓存
• exclude-字符串或正则表达式，任何匹配的组件都不会被缓存

          
    
      




  
    
    
 



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

keepAlive组件的使用会衍生出两个新的生命周期，activated与deactivated详情参考vue中的生命周期

mixins

应用场景：公共逻辑抽离，多个组件会使用相同的代码逻辑。

1. 组件中使用mixins

   import Minxins from './assets/mixins'   //引入mixins文件
   export default {
       mixins:[Minxins]   //进行注册，多个用逗号分开
   }
   1
   2
   3
   4

2. mixins文件

   export default {
       mounted(){
           console.log('minxins——mounted')
       },
       data(){
           return{
               count:10086
           }
       },
       methods:{
           clickAdd(){
               console.log(this.count);   //10086 使用mixins的组件中的事件
           }
       }
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15

3. mixins的缺点

   • 变量来源不明确（隐式传入），不利于阅读，使代码变得难以维护
   • 多个mixins的生命周期会融合到一起运行，但是同名属性、同名方法无法融合，可能会导致冲突。
   • mixins和组件可能出现多对多的关系，复杂度较高