VUE学习知识点总结（一）_vue 学习知识点-CSDN博客

本文链接：https://blog.csdn.net/lzyshizhu/article/details/119042469

一、模板语法

1、插值语法

用在标签体中{{name}}

2、指令语法

用于解析标签，(包括标签属性，标签体内容，绑定事件。。)

1、v-bind: ===简写为>:

单向绑定数据
 <div id="root2">
     <a v-bind:href="url">点我去百度</a>
 </div>

new Vue({
     el:"#root2",
     data:{
         name:"黄同学",
         url:"https://www.baidu.com"
     }    
 })
2、v-model :双向数据绑定

v-model只能用在表单元素上！！

v-model: value ======>简写为 v-model

3、关于el和data的绑定

1、el的另一种写法

v.$mount("#root")       ======>代替el:"#root"


setTimeout(()=>{        ==============>设置计时器
     v.$mount("#root")
 },1000)

2、data的另一种写法

data:function(){                      =======>函数式
             return{
                 name:"孙洲逸"
             }
         }

2、数据代理

1、defineProperty()的用法

    Object.defineProperty(person,"age",{      //=============>不可枚举
        value:18
    })
        
        
     Object.defineProperty(person,"age",{      //=============>可枚举
     value:18,
     enmuerable:true                        //属性是否可以被枚举
     wirtable:true                         //属性是否可以被修改
     configurable:true                    //属性是否可以被删除
     
        get:function(){           //当有人读取person的age属性时，就会触发本函
            return number
        }
         
            set(value){           //当有人修改person的age属性时，就会触发本函数
            console.log("有人修改了age的属性")
            number = value;
        }
    })

2、Vue中的数据代理

1、通过vm对象来代理data对象中的属性操作（读/写）

2、好处：更加方便的操作data中的数据

3、原理

通过Object.defineProperty()把data对象中的属性添加到vm上面

为每一个添加的属性都指定一个getter/setter属性

通过getter/setter方法去操作data中的属性

3、事件处理

    //其中的this为vm自身
methods:{                    //定义了函数
            showinfo(event){
                console.log(this === vm)
                console.log(event.target.innerText)        //event事件，event.target事件触发者，	                                                          event.target.innerText事件触发者的内容
        }
         
         
   //其中的this为window 
           showinfo:(event)=>{
                console.log(this === vm)
                console.log(event.target.innerText)
        }

1、传递方式

1、不传参
<button v-on:click="showinfo">点我查看信息</button>
2、传参
<button @click="showinfo2(66,$event)">点我查看信息2</button>
3、简写

v-on:click ================> @click

2、传递修饰符

1、prevent 阻止默认事件

2、stop 阻止事件冒泡
<div class="demo1" @click="showinfo">
  <button id="test2" @click.stop="showinfo">点我</button>
</div>
3、once 事件只触发一次

4、capture 事件捕获阶段触发
 <div @click.capture="showmsg(1)">
         div1
         <div @click="showmsg(2)">div2</div>
     </div>
5、self 只有触发事件的event.traget是自己时，才会执行事件

6、passive 先执行默认事件，再执行回调

@scroll //滚动条滚动

@wheel //鼠标滚轮滚动

3、键盘事件

1、Vue中常见的按键别名

enter、delete、esc、space、tab (必须配合keyup使用)、up、down、left、right

2、特殊的几个按键

ctrl、alt、shift、meta

（配合keyup使用时，必须同时按下其他键，再释放其他键，才能起作用）

（配合keydown使用时，正常发挥作用）

3、自定义别名
Vue.config.keyCodes.huiche=13
4、修饰符和键盘事件可以连续写

4、计算属性

1、概念

1、定义：要用的属性是不存在的，需要通过已有的属性来进行计算

2、原理：借助了底层的Object.Property方法提供setter和getter

2、简写(只有考虑读取不考虑修改的时候才能使用！！)

正常写法

computed:{
         fullName:{
             get(){
                 console.log("有人调用了get")
                 return this.firstName + "-"+this.lastName
             }

简写

 computed:{
         fullName(){
             return this.firstName+"-"+this.lastName
         }
     }

5、深度监视

1、监视的两种写法

第一种

   watch:{
                isHot:{
                    handler(){
                        console.log("isHot被改变了")
                        this.weather = this.isHot===true?"炎热":"寒冷"
                    }
                },

第二种

    vm.$watch('isHot',{
            handler(newValue,oldValue){
                console.log("isHot被修改了")
            }
        })

2、属性

1、immediate : 初始化的时候让handler执行一下

2、deep：深度监视

  //监视多级结构中某个属性的变化
                "number.a":{
                    handler(){
                        console.log("a被改变了")
                    }
                },
                //深度监视
                number:{
                    deep:true,
                    handler(){
                        console.log("number北改变了")
                    }
                }

3、注意点

1、vue中的深度监视默认不监测对象内部值的改变

2、配置属性deep：true可以检测对象内部值的改变

3、Vue自身可以监测对象内部值的改变，但是Vue提供的watch默认不可以

4、使用watch监测时，根据对象的数据结构，决定是否采用深度监测

4、监视的简写

前提：不需要开启immediate、deep的时候才可以

简写形式

//第一种形式的简写 
watch:{
             isHot(newValue,oldValue){
                 console.log("isHot被修改了")
             }
         }

//第二种形式的简写
     vm.$watch("isHot",function(newValue,oldValue){
         console.log("isHot被改变了")
     })

5、computed和watch的区别

1、computed能完成的功能，watch也能完成

2、watch能完成的功能，computed不一定能完成，比如异步操作

6、绑定class样式

1、绑定的样式用:class

<div class="basic" :class="mood" id="box" @click="changeMood">
     {{context}}    
 </div>

2、绑定多个样式====用数组

<div id="boxx" class="basic" :class="classArr">
     {{context}}
 </div>

 const vm2 = new Vue({
     el:"#boxx",
     data:{
         context:"你好",
         classArr:["sy1","sy2","sy3"]
     }

 })

3、切换多个样式

const vm3 = new Vue({
     el:"#boxxx",
     data:{
         context:"你好",
         classobj:{
             sy1:false,
             sy2:false,
             sy3:false
         }
     }

2、绑定style样式

可以放对象或者对象数组

 <div class ="basic" :style="{fontSize:fsize+'px'}">{{context}}</div>

7、条件渲染

1、条件指令

1、v-show =“true”

决定元素是否显示

底层实现原理为display：none

2、v-if

元素直接消灭掉，

3、
template可以不破坏页面结构

但是只可以和v-if结合起来使用

不可以和v-show结合起来使用
     <template v-if="n === 1">
         <div>点我n</div>
         <div>点我2</div>
         <div>点我3</div>
         <div>点我4</div>
     </template>

8、列表渲染

1、基本列表

1、遍历数组

<ul>
	<li v-for="person in persons" :key="person.id">{{person.name}}-{{person.age}}</li>
</ul>

<ul>
 <li v-for="(person,index) in persons":key="index">{{person.name}}-{{person.age}}</li>
</ul>

<ul>
 <li v-for="(person,index) of persons" :key="index">{{person.name}}-{{person.age}}</li>
</ul>

2、遍历对象

<ul>
<li v-for="(value,key) in car" :key="key">{{key}}-{{value}}</li>
</ul>

3、遍历字符串

<ul>
<li v-for="(char,key) in str" :key="key">{{key}}-{{value}}</li>
</ul>

4、遍历指定次数

<ul>
<li v-for="(number,key) in 5" :key="key">{{key}}-{{number}}</li>
</ul>

9、v-model的三个修饰符

1、number 输入的字符串转化为有效数字

2、lazy 失去焦点再收集

3、trim 输入首位空格过滤

10、过滤器

1、使用语法

1、注册

//局部注册
         filters:{
             timeFormater(value){
                 console.log(value)
                 return dayjs(this.time).format('YYYY年MM-DD HH:mm:ss')

             }
         }

//全局注册
 Vue.filter("myslice",function(value){
     return value.slice(0,4)
 })

2、使用

//插值语法使用      
{{time | timeFormater | myslice}}

//动态绑定使用
//很少使用
<h2 :x="msg | myslice">你好</h2>

11、内置指令有哪些

v-bind

v-on

v-model

v-show

v-if

v-for

v-text 不支持html结构的解析

v-html 支持html结构的解析

v-cloak 没有值，本质是一个属性，Vue创建完实例并接管容器以后，会删掉v-cloak属性，使用v-cloak配合css可以解决网速慢页面展示{{xxx}}的问题

v-once v-once所在的节点初次动态渲染以后，就视为静态内容了，以后的数据修改不会引起v-once所在的结构更新，可以用于优化性能

v-pre 跳过其所在节点的编译过程，可以加快编译

12、自定义指令

1、定义语法

1、局部定义：

directives:{
 //函数式
         big(element,binding){
             element.innerText = binding.value*10
         },
//对象式   
         fbind:{
             bind(element,binding){
                 element.value = binding.value
             },
             insert(element,binding){
                 element.focus()
             },
             update(element,binding){
                 element.value = binding.value
                 element.focus()

             }
         }

2、全局定义

Vue.directive(指令名，指令配置)
 //   
 Vue.directive(big,function(element,binding){
 element.innerText = binding.value*10
 })

2、配置对象中常用的三个回调

1、.bind: 指令与元素成功绑定时

2、.inserted: 元素成功插入页面时

3、:update:指令所在的模板被重新解析的时候

3、注意

1、指令有多个单词时，不要使用camelCase的命名方式

2、在指令定义中的this为window

13、生命周期函数

1、生命周期

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

2、是什么：Vue在一些特殊时机调用的函数

3、生命周期函数的名字不可以改，内容自己编写

4、其中的this是指向Vue的

2、具体生命周期函数

1、beforeCreate()

初始化，但是数据代理还未开始，无法访问到vm中的data

2、created()

数据监测、数据代理

3、beforeMount()

页面呈现的依然是未经编译的DOM，所有对DOM的操作最终均不奏效

4、mounted()

页面呈现的是经过编译的DOM，对DOM的操作均有效

5、beforeUpdate()

此时数据是新的，页面依然是旧的

6、updated()

数据和页面同步

7、beforeDestory()

当vm.$destory()被调用

此时，vm中的所有data，methods，指定等都处于可用状态。

一般在此时关闭定时器，取消订阅消息，解绑自定义事件。

8、destroyed()