![](https://img-blog.csdnimg.cn/20201014180756922.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
Deaoyi
这个作者很懒,什么都没留下…
展开
-
016列表渲染
列表渲染 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>列表渲染</title> <script type="text/javascript" src="js/vue.min.js"></script> </head> <body> <div id="root原创 2021-11-23 17:40:42 · 346 阅读 · 0 评论 -
015条件渲染
条件渲染 v-if 结构都不在了 key解决切换同一元素时不重新加载渲染的问题 v-show 视觉效果上不见,实际上还存在该节点,底层就是调整css的display属性 <template></template>标签不会破坏页面结构,可以代替div结合条件渲染使用 ...原创 2021-11-23 17:39:05 · 443 阅读 · 0 评论 -
014绑定style样式
绑定style样式 :style="[EXPR]"原创 2021-11-23 17:36:05 · 63 阅读 · 0 评论 -
013绑定class样式
绑定class样式 <style> .basic{...} .normal{...} .happy{...} ... </style> ... //字符串写法,适用于样式的类名不确定,需要动态指定 <div class="basic" :class="a" @click="changeStyle"></div> //数组写法,适用于要绑定的样式个数不确定,名字也不确定 <div class="basic" :class原创 2021-11-23 17:35:02 · 47 阅读 · 0 评论 -
012Computed和Watch之间的区别
Computed和Watch之间的区别 computed能完成的watch都能完成 watch能完成的,computed不一定能完成,例如:watch可以进行异步操作 两个重要的小原则 所被vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象 所有不被vue管理的函数(定时器的回调函数,ajax的回调函数等),最好写成箭头函数,这样this的指向才是vm或组件实例对象 ...原创 2021-11-23 17:34:32 · 608 阅读 · 0 评论 -
011监视属性-watch
监视属性-watch watch:{ } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>监视属性</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div原创 2021-11-23 17:34:06 · 45 阅读 · 0 评论 -
010计算属性
计算属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>姓名案例_计算属性实现</title> <script type="text/javascript" src="js/vue.min.js"></script> </head> <body> <div id="r原创 2021-10-20 10:16:58 · 50 阅读 · 0 评论 -
009键盘事件
键盘事件 @keydown @keyup vue中常用的按键别名: 回车=>enter 删除=>delete(捕获删除和退格键) 退出=>esc 空格=>space 换行=>tab(特殊,不需配合keydown使用) 上=>up 下=>down 左=>left 右=>right vue未提供别名的按键,可以使用按键原始的key去绑定,但注意要转为kebab-case(短横线命名) 系统修饰键(特殊) ctrl/alt/shift/meta(win键)原创 2021-10-20 10:16:27 · 48 阅读 · 0 评论 -
008事件修饰符
事件修饰符 Vue中的事件修饰符(@click.xxx): prevent:阻止默认事件(常用) stop:阻止事件冒泡,不让外层响应(常用) once:事件只触发一次(常用) capture:使用事件的捕获模式 self:只有event.target是当前操作的元素才触发事件,也能阻止冒泡 passive:事件的默认行为立即执行,无需等待事件回调执行完毕 @click点击 @scroll滚动条滚动 @wheel鼠标滚轮滚动,先执行函数调用等它执行完再执行默认行为,即事件回调完毕再滚动条滚动 修饰符可以原创 2021-10-20 10:15:46 · 73 阅读 · 0 评论 -
007事件处理
事件处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件的基本使用</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="root"原创 2021-10-20 10:15:14 · 52 阅读 · 0 评论 -
006理解数据代理
理解数据代理 通过一个对象代理另一个对象中的属性的操作 (读/写) <script> let obj = {x:100} let obj2 = {y:200} Object.defineProperty(obj2,'x'),{ get(){ return obj.x }, ser(value){ obj.x = value } } </script>原创 2021-10-20 10:14:12 · 43 阅读 · 0 评论 -
005Object.defineProperty
Object.defineProperty 定义/添加属性 <script> let number = 18 let person = { name:'asda', sex:'male', } Object.defineProperty(person,'age',{ value:18, //age不可以被枚举,不参与遍历 //enumerable:true, //控制属性可以枚举,默认值是fals原创 2021-10-20 10:13:38 · 34 阅读 · 0 评论 -
004MVVM模型
MVVM模型 M:模型(Model):对应data中的数据 V:视图(View):模板 VM:视图模型(ViewModel):Vue实例对象 Vue一般用vm命名vue实例 data中所有的属性最终全部出现在vm上 vm里有的属性和Vue原型上的属性都能直接用 ...原创 2021-10-20 10:12:59 · 42 阅读 · 0 评论 -
003el与data的两种写法
el与data的两种写法 el 第一种写法:new的时候指定el,el:’#root’ 第二种写法:v.$mount(’#root’) data 第一种写法:对象式 data:{ name:‘xxx’ } 第二种写法:函数式,data普通函数中的this是Vue对象,箭头函数this是全局window,组件必须用函数式不然会报错,vue管理的函数一定不要写箭头函数 data:function(){ return{ name:‘xxx’ } } data(){ return{ na原创 2021-10-20 10:12:28 · 49 阅读 · 0 评论 -
002数据绑定
数据绑定 v-bind单向绑定,数据只能从data流向页面 v-model双向绑定,只能用在表单类元素里,v-model:value可以简写为v-model,默认收集value原创 2021-10-20 10:11:54 · 41 阅读 · 0 评论 -
001模板语法
模板语法 模板 root容器中的代码称为vue模板 插值语法 功能:用于解析标签体内容 {{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。 指令语法 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)。 举例:v-bind: =========>: v-binf:href="xxx"或:href=“xxx”,xxx同样要写js表达式 ...原创 2021-10-20 10:11:19 · 40 阅读 · 0 评论