VUE学习知识点总结（一）

一、模板语法

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>