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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div >
    <div style="cursor: pointer;" ref="xx" @click="getId($event,b)" :data-b="b">{{a}}</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el: '#box',
        data() {
            return {
                a: 123,
                b: 455
            }
        },
        methods: {
            getId(e,b) {
                console.dir(this.$refs.xx.dataset.b)
                console.dir(e.target.getAttribute('data-b'))
            }
        }
    })
</script>