![](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 · 353 阅读 · 0 评论 -
015条件渲染
条件渲染v-if结构都不在了key解决切换同一元素时不重新加载渲染的问题v-show视觉效果上不见,实际上还存在该节点,底层就是调整css的display属性<template></template>标签不会破坏页面结构,可以代替div结合条件渲染使用...原创 2021-11-23 17:39:05 · 455 阅读 · 0 评论 -
014绑定style样式
绑定style样式:style="[EXPR]"原创 2021-11-23 17:36:05 · 67 阅读 · 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 · 53 阅读 · 0 评论 -
012Computed和Watch之间的区别
Computed和Watch之间的区别computed能完成的watch都能完成watch能完成的,computed不一定能完成,例如:watch可以进行异步操作两个重要的小原则所被vue管理的函数,最好写成普通函数,这样this的指向才是vm或组件实例对象所有不被vue管理的函数(定时器的回调函数,ajax的回调函数等),最好写成箭头函数,这样this的指向才是vm或组件实例对象...原创 2021-11-23 17:34:32 · 614 阅读 · 0 评论 -
011监视属性-watch
监视属性-watchwatch:{}<!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 · 48 阅读 · 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 · 52 阅读 · 0 评论 -
009键盘事件
键盘事件@keydown@keyupvue中常用的按键别名:回车=>enter删除=>delete(捕获删除和退格键)退出=>esc空格=>space换行=>tab(特殊,不需配合keydown使用)上=>up下=>down左=>left右=>rightvue未提供别名的按键,可以使用按键原始的key去绑定,但注意要转为kebab-case(短横线命名)系统修饰键(特殊)ctrl/alt/shift/meta(win键)原创 2021-10-20 10:16:27 · 52 阅读 · 0 评论 -
008事件修饰符
事件修饰符Vue中的事件修饰符(@click.xxx):prevent:阻止默认事件(常用)stop:阻止事件冒泡,不让外层响应(常用)once:事件只触发一次(常用)capture:使用事件的捕获模式self:只有event.target是当前操作的元素才触发事件,也能阻止冒泡passive:事件的默认行为立即执行,无需等待事件回调执行完毕@click点击@scroll滚动条滚动@wheel鼠标滚轮滚动,先执行函数调用等它执行完再执行默认行为,即事件回调完毕再滚动条滚动修饰符可以原创 2021-10-20 10:15:46 · 76 阅读 · 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 · 57 阅读 · 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 · 45 阅读 · 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 · 37 阅读 · 0 评论 -
004MVVM模型
MVVM模型M:模型(Model):对应data中的数据V:视图(View):模板VM:视图模型(ViewModel):Vue实例对象Vue一般用vm命名vue实例data中所有的属性最终全部出现在vm上vm里有的属性和Vue原型上的属性都能直接用...原创 2021-10-20 10:12:59 · 44 阅读 · 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 · 52 阅读 · 0 评论 -
002数据绑定
数据绑定v-bind单向绑定,数据只能从data流向页面v-model双向绑定,只能用在表单类元素里,v-model:value可以简写为v-model,默认收集value原创 2021-10-20 10:11:54 · 43 阅读 · 0 评论 -
001模板语法
模板语法模板root容器中的代码称为vue模板插值语法功能:用于解析标签体内容{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。指令语法功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)。举例:v-bind: =========>:v-binf:href="xxx"或:href=“xxx”,xxx同样要写js表达式...原创 2021-10-20 10:11:19 · 42 阅读 · 0 评论