邢台天九建设有限公司网站,物流网站哪个好,wordpress添加html页面,电子商务平台管理前言
本笔记参考视频#xff0c;尚硅谷:BV1Zy4y1K7SH p1 -p25官网文档完善#xff0c;本文只做笔记使用#xff0c;官网下载vue的开发版和生产版或者使用CDN#xff0c;并去谷歌商店下载开发插件
简介
组件化模式#xff0c;提高代码复用率#xff0c;更好维护声明式编…前言
本笔记参考视频尚硅谷:BV1Zy4y1K7SH p1 -p25官网文档完善本文只做笔记使用官网下载vue的开发版和生产版或者使用CDN并去谷歌商店下载开发插件
简介
组件化模式提高代码复用率更好维护声明式编码与命令式编码相比无需直接操作DOM提高开发效率虚拟DOMdiff算法尽量复用DOM节点。hello world 0. 引入vue前期用script标签引入后期使用clinpm script srchttps://unpkg.com/vue3/dist/vue.global.js/script 准备好一个容器用于与vue绑定。创建vue实例
//容器里的代码呗称为【vue模板】vue拿去解析并用 值 替代 {{}} 生成新的
div idrooth1 hello {{name}} /h1
/div
const vm new Vue({ //构造函数里传配置对象el:#root, //el用于指定当前实例绑定的容器通常为CSS选择器字符串data:{ //data存储数据供el指定容器使用对象/函数name:world}
})容器与vue实例一对一{{}}中为js表达式(能表示值的JS代码)11这种也是可以的使用{{ xxx }} 在标签体引入动态变化的数据插值语法xxx可以为函数需要加括号指令语法标签中的v-bind等将字符串中的内容当成js表达式。data中的数据发生改变Vue会重新解析下模板{{ }}里面的函数也会重新执行
数据绑定
v-bind:简写:绑定数据。单向绑定v-model:双向绑定只能应用到表单类属性输入类元素上默认对value进行优化所以v-model:value““可以简写为v-model””
el与data的第二种写法
el可以不写使用vm实例的vm.mount(‘#root’)实现绑定mount是Vue的方法vm实例沿着原型链调用。data函数式写法函数必须返回一个对象对象中的为需要的数据使用组件时必须使用函数式。且不能使用箭头函数箭头函数的this是window而普通函数的this是vuedata:function(){}可以简写为data(){}
MVVM
Model对应data中的数据一般js对象view模板页面DOMVMViewModelVue实例对象data中所有的属性最后都出现在了vm身上vm的所有属性和Vue原型上的所有属性在vue模板中都可以直接使用
数据代理
Object.defineProperty() Object.defineProperty( 对象名,对象属性,{ //配置对象value:,enumerabele:true, //控制属性是否可以枚举默认falsewritable:true, //控制属性是否可以被修改默认falseconfigurabel:true //是否可以被删除默认falseget(){ //当读取该属性时get()会触发返回值为age的值return 值变量}set(value){ 值变量新值 } //修改值时set会被调用且会收到修改的具体值
})vue数据代理通过vm对象代理对data对象中属性的操作通过Object.defineProperty()实现将data对象中的所有属性添加到vm上为每个添加到vm上的属性指定一个getter和setter
v-on事件处理
v-on:xxx 或 xxx 绑定事件xxx可以为事件回调配置在配置对象的methods中也可以为简单的表达式click“fun”与 clickfun($event)一致后者能穿event以外的参数methods中的this为Vue箭头函数时为windowsmethods中的方法无数据代理事件修饰符:click.xxx.xxxxxx可以为事件修饰符多个xxx时表示and prevent 阻止默认事件比如a标签的跳转stop 阻止事件的冒泡once 事件只触发一次capture 使用事件的捕获模式与冒泡相反self 只有event.target是当前操作的元素时才触发事件passive 事件的默认行为立即执行无需等待事件回调执行完毕正常流程是事件触发调用回调执行默认行为比如滚动条滚动。 键盘事件按键别名:click.xxx.xxxxxx可以为按键别名多个xxx时表示andVue中常用的按键别名 回车enter删除delete (捕获“删除”和“退格”键)退出esc空格space换行tab (特殊必须配合keydown去使用)上up下down左left右right 注意系统修饰键用法特殊ctrl、alt、shift、meta 配合keyup使用按下修饰键的同时再按下其他键随后释放其他键事件才被触发配合keydown使用正常触发事件可以使用keyCode去指定具体的按键比如keydown.13“showInfo”但不推荐这样使用 未提供别名的键使用按键原始的key值去绑定比如Enter两个词的需要转化为断横线命名法Vue.config.keyCodes.自定义键名 键码可以自定义按键别名
compute计算属性
vue配置对象中的属性计算属性需要通过已有属性计算得来。
computed:{fullName:{get(){ //这个地方的thisvue更改绑定到vm身上使用返回值作为计算属性的值return this.firstName - this.lastName},set(value){const arr value.split(-)this.firstName arr[0]this.lastName arr[1]}},fullName:{ //简写return this.firstName - this.lastName}
}底层借助了Objcet.defineproperty()方法提供的getter和setter。get函数1. 初次读取时会执行一次之后读取会读取缓存2. 当依赖的数据发生改变时会被再次调用计算属性最终会出现在vm上直接读取使用即可修改计算属性使用set函数去响应修改且set中要引起计算时依赖的数据发生改变
监视属性
vue配置对象中的属性监视属性当被监视的属性变化时回调函数自动调用进行相关操作监视的属性必须存在才能进行监视监视有两种写法1. 创建Vue时传入watch配置。2. 通过vm.$watch监视深度监视1. Vue中的watch默认不监测对象内部值的改变一层2. 在watch中配置deep:true可以监测对象内部值的改变多层3. Vue自身可以监测对象内部值的改变但Vue提供的watch默认不可以
watch:{//监视多级结构中所有属性的变化numbers:{immediate:true, //刷新/初始加载时执行一次deep:true, //开启深度监视handler(){console.log(numbers改变了)}}//监视多级结构中某个属性的变化/* numbers.a:{handler(){console.log(a被改变了)}} */
}如果监视属性除了handler没有其他配置项的话可以进行简写
watch:{//正常写法isHot:{handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}}, //简写isHot(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue,this)}
}
//正常写法
vm.$watch(isHot,{handler(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue)}
})
//简写
vm.$watch(isHot,function(newValue,oldValue){console.log(isHot被修改了,newValue,oldValue,this)
})computed和watch之间的区别 computed能完成的功能watch都可以完成watch能完成的功能computed不一定能完成例如watch可以进行异步操作 两个重要的小原则 所有被Vue管理的函数最好写成普通函数这样this的指向才是vm 或 组件实例对象所有不被Vue所管理的函数定时器的回调函数、ajax的回调函数等、Promise的回调函数最好写成箭头函数这样this的指向才是vm 或 组件实例对象。
