vue基础知识
冒泡: 点击元素, 也会触发父元素的点击事件
defineProperty: 实现属性代理; 实现单向数据绑定
v-开头的属性, 称之为 Vue 的指令
标签分为两类: 表单标签 和 非表单标签, 单向绑定的指令一般用于非表单标签, 双向绑定的指令用于表单标签
- v-text:和双花括号的效果一样
- v-html:和 v-text 唯一的区别就是能解析 html 代码
- v-bind:属性名:**简写”:”**,给元素的属性赋值
- v-on:事件名:**简写”@”**,事件注册
- v-if、v-else-if、v-else:必须是相邻的兄弟元素控制,元素是否显示( 不显示的时候是从 dom 中移除 )
- v-show: 控制元素是否显示(不显示的时候是 display:none)
- v-for:循环, 常用于列表渲染
- v-model
绑定方向除了 v-model 是双向,其他的都是单向( 数据=>DOM )
双花括号、v-text、v-html、v-bind 对应的位置可以写 js 表达式, 注意不能写 js 语句(例如: 三元表达式可以写, 全局对象方法可以调用, if 语句不能写)
事件修饰符
Vue 允许我们在注册事件时,进行额外的操作。我们在事件名后添加 .xxxx 来对事件进行修饰
适用事件 | 事件修饰符 | 说明 | 示例 |
---|---|---|---|
click | .self | 只要点击当前元素自己时, 才会触发事件 | <div class="xx" v-on:click.self="handlerDiv"> |
.stop | 表示阻止冒泡 | ||
.prevent | 阻止事件的默认行为 | submit.prevent="xxx" |
补充: 关于按钮修饰符给 input 注册 keyup 事件, 但是 .enter 表示, 只有按下 回车键 时, 才触发。示例: <input v-on:keyup.enter="handler"/>
过滤器 ( filter ):常规过滤器、全局过滤器
计算属性 ( computed ) : 和过滤器的本质区别: 当数据变化时才执行
观察者( watch ) : 监视 data 中的属性,一旦属性发生了改变就去自动调用对应的方法
自定义属性:
1 | <div > |