- vue是一套用于构建用户界面的渐进式框架
- vue是尤雨溪开发的
- vue的特点
- 采用组件化模式,提高代码复用率,且让代码更好维护
- 声明式编码,让编码人员无需直接操作dom,提高开发效率
- 使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点
- 模板语法
- 插值语法
- 用于解析标签体内容
- {{}}
- 指令语法
- 用于解析标签
- v-bind 简写:
- 插值语法
- 数据绑定
- 单向数据绑定
- v-bind
- 数据只能从data流向页面
- 双向数据绑定
- v-model
- 数据不仅可以从data流向页面,也可以从页面流向data
- 只能应用在表单类元素上面(输入类元素)
- v-model:value 简写 v-model,因为v-model默认收集是value值
- 单向数据绑定
- el与data的两种写法
- el
- new vue时候配置el属性
- 先创建vue实例,再通过vm.$mount('#root')指定el的值
- data
- 对象式
- 函数式
- 组件,data必须使用函数式,否则会报错
- 有vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是vue实例
- el
- MVVM模型
- Model-view-viewmodel
- 介绍
- M:模型model,对应data中的数据
- V:视图,对应模板
- VM:视图模型:vue实例对象
- 发现
- data中所有的属性,最后都出现再vm上
- vm身上所有的属性,及vue原型上所有属性,再vue模板中都可以使用
- 数据代理
- Object.defineProperty(对象,属性名,{配置项})添加的属性 是不参与遍历的,不可枚举
- 配置项
- value:xx;属性值
- enumerable:true;控制属性是否可以枚举,默认值是false
- writable:true;控制属性是否可以被修改,默认值是false
- configurable:true;控制属性是否可以被删除,默认值是false
- get:function(){} 当有人访问该属性时候,get函数(getter)就会被调用,且返回值就是该属性的值
- set:(value){} 当有人修改该属性时候,set函数(setter)就会被调用,且会收到修改的具体值
- vue数据代理:
- 通过vm对象代理对data对象中属性的操作(读或写)
- vue中的数据代理操作的好处:更加方便的操作data中的数据
- 基本原理:
- 通过Object.defineProperty()把data对象中所有属性添加到vm上
- 为每一个添加到vm上的属性,都指定一个getter/setter
- 再getter/setter内部去操作(读/写)data中对应的属性
- 事件处理
- 绑定事件使用v-on:xxx或者@xxx绑定事件,其中xxx表示是事件名
- 事件的回调函数需要配置再methods对象中,最终会在vm上
- methods中配置的函数,不要用箭头函数,否则this就不是vm了,则指向window
- methods中配置的函数,都是被vue所管理的函数,this的指向是vm或组件实例对象
- @click='demo'和@click='demo($event)'效果一致,但后者可以传参
- 事件修饰符
- .prevent阻止默认行为
- .stop阻止事件冒泡
- .once事件只触发一次
- .capture 使用事件的捕获模式
- .self 只有event.target是当前操作的元素是才触发事件
- .passive 事件的默认行为立即执行,无需等待事件回调执行完毕
- 键盘事件
- 常用的按键别名
- 回车-enter
- 删除-delate(捕获‘删除’和‘退格’键)
- 退出-esc
- 空格-space
- 换行-tab(特殊,配合keydown使用)
- 上-up
- 下-down
- 右-right
- 左-left
- Vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)
- 系统修饰符键(用法特殊)ctrl,alt,shift,meta
- 配合keyup使用:按下修饰键的同时,再按下其他键,随后释放其他键,事件才被触发
- 配合keydown使用,正常触发事件
- 也可以使用keyCode去指定具体的按键(不推荐)
- Vue.config.keyCodes.自定义键名=键名,可以去定制按键别名
- 常用的按键别名
vue的知识体系
最新推荐文章于 2024-04-08 14:32:43 发布