Vue学习笔记

数据绑定：

单向绑定（v-bind):数据只能从data流向页面

双向绑定（v-model)：数据不仅能从data流向页面，也能从页面流向data

 

el的两种写法：

new Vue时配置el属性

先创建vue实例，随后再通过vm.$mount('#root')指定el的值

 

data的两种写法：

对象式

函数式——学习到组件时，必须使用函数式

 

按键：

大多数的按键都可以配合keyup使用，除了ctrl、alt、shift、meta需要用keydown

 

时间修饰符：

prevent：阻止默认事件（常用）

stop：阻止冒泡

once：事件只触发一次

capture：使用事件的捕获模式

self：只有event.target是当前的操作元素时才触发

 

计算属性：

定义：要用的属性不存在，要通过已有属性计算

原理：底层借住Object.defineproperty提供的get和set函数实现

get函数：初次读取时会调用一次；当依赖发生变化时会再次调用

优势：与methods相比，内部有缓存机制

 

监视属性：

当被监视的属性变化时，回调函数自动调用

监视的两种写法：通过new Vue时的watch配置；通过vm.$watch监视

深度监测：vue中的watch默认不监测对象内部值的变化，配置deep：true可以监测对象内部值变化

 

监视的写法如下：

//完整写法
......
watch: {
  isHot:  {
    immediate:true,//初始化时让handler调用一下
　　deep:true,
    handler(newValue, oldValue) {
        console.log('isHot被修改了', newValue, oldValue)
    }
  }  
}


//简写,只执行handler
watch:{
  isHot(newValue, oldValue){
    console.log('isHot被修改了', newValue, oldValue
  }  
}

//正常写法
vm.$watch('isHot', {
　　immediate:true
　　......
}

//正常缩写
vm.$watch('isHot', function(newValue, oldValue){
　　console.log('isHot'被修改了，newValue, oldValue, this)
}

　　

computed和watch之间的区别：

computed能完成的功能，watch都可以完成

watch能完成的功能，computed不一定能完成，例如watch可以进行异步操作

被Vue管理的函数，最好写成普通函数；不给Vue管理的函数，最好写成箭头函数

 

绑定样式：

class样式写法：

　　class=“xx" 　　　　xx可以是字符串、对象、数组

　　字符串写法用于：   类名不确定，要动态获取

　　对象写法用于：　　要绑定多个样式，个数不确定，名字也不确定

　　数组写法用于：　　要绑定多个样式，个数确定，名字确定，但不确定用不用

 

style样式：

　　:style="{fontSize: xxx}"其中xxx是动态值

　　:style="{a, b}" 其中a，b是样式对象

 

条件渲染：

v-if：适用于频率较低场景；不展示的DOM直接被移除；v-if和v-else-if和v-else之间不能被打断

v-show：适用于频率较高的场景；不展示的DOM元素未被移除，仅仅使用样式隐藏

 

　　

标签：Vue,函数,watch,isHot,笔记,学习,oldValue,写法,newValue
来源： https://www.cnblogs.com/tianshu/p/15487655.html