首页 > 其他分享> 文章详细

Vue学习笔记

2021-10-31 08:00:27 阅读：211 来源： 互联网

标签：Vue 函数 watch isHot 笔记学习 oldValue 写法 newValue

数据绑定：

单向绑定（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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue学习笔记