2023-05-17

知识点

Vue 基础-简介(第一章)

1. 模板语法

变量必须使用 js 表达式，且可以读取 data 种所有属性

插值语法 : 在标签体内，使用 {{value}} 替换
指令语法 : 解析标签时使用，包括标签属性、标签体、绑定事件等，一般使用 v-bind

2. 数据绑定

v-bind : 单向绑定属性，用于响应式更新 html 属性，可以简写为 :xxx
v-model : 双向绑定，只能应用在表单类(输入类)元素上

3. 数据代理

原理 Object.defineproperty(obj, prop, descriptor) ，该函数会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象

obj : 要定义属性的对象
prop : 要定义或修改的属性的名称
descriptor : 要定义或修改的属性描述符

详见

4. 事件处理

事件，如 v-on:click ，都可以简写成 @click，其后跟一个函数，并在 Vue 的 methods:{...} 声明该函数，即可被调用

// 无参函数，其默认会将鼠标事件 event 自动传入，即下面两者相同
<button @click="show">点击</button>
<button @click="show($event)">点击</button>
// 有参函数
<button @click="show($event,123,"hello")">点击</button>

1. 事件修饰符

prevent : 阻止默认事件
stop : 阻止事件冒泡
once : 事件只触发一次
capture : 使用事件捕获模式
self : 只有 event.target 是当前操作的元素时，才触发事件
passive : 事件默认行为是立即执行，无需等待事件回调执行完毕

1 2	// 阻止点击事件之后跳转 <a href="http://xxx.xxx.xxx" @click.prevent="show">点击</a>

2. 键盘按键别名

常用的键盘按键别名，可以在键盘事件时直接调用，也可以用原始键名

enter : 回车
delete : 删除或退格
esc : 退出
space : 空格
tab : 换行
up : 上
down : 下
left : 左
right : 右

// 键盘按下回车时，触发键盘事件 keyup
<input type="text" placeholder="按下回车时提示" @keyup.enter="show">
// 使用回车原始键名
<input type="text" placeholder="按下回车时提示" @keyup.Enter="show">

特殊的，当遇到 Vue 未提供的，可以使用原始 key 去绑定，但需要将键名中驼峰命名的，改为横线的才可以使用，具体的键名可以使用事件的属性 key 获取

1 2	// 转换格式使用，如 Caps 键，键名为 CapsLock，要改为 caps-lock <input type="text" placeholder="按下回车时提示" @keyup.caps-lock="show">

对于 tab、ctrl、alt、shift、meta 特殊键时，需要尽量使用 keydown 事件，防止无法直接生效

5. 计算属性

计算属性默认是只读的，但可以通过同时提供 getter 和 setter 来创建，底层使用 Object.defineproperty() 实现，并且相比 methods ，其有内部有缓存，效率较高

export default {
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + '-' + this.lastName
      },
      set(newValue) {
        // 注意：我们这里使用的是解构赋值语法
        [this.firstName, this.lastName] = newValue.split('-')
      }
    }
  }
}

当计算属性仅需 get 方法时，可以简写

1
2
3

fullName() {
    return this.firstName + '-' + this.lastName
}

6. 监视属性

watch 选项在每次响应式属性发生变化时，会触发函数，该函数默认提供2个参数，记录之前和之后的值，为 oldQuestion, newQuestion，可以声明传入使用，默认不监听属性内部值的改变，若要启用，需要在相应函数中添加 deep:true 来开启

watch: {
    // 每当属性 question 改变时，这个函数就会执行
    question:{
        // deep:true, // 默认不监听深层属性
        handler(newQuestion, oldQuestion) {
            if (newQuestion.includes('?')) {
                ...
            }
        }
    },
}

也可以使用 Vue 实例来创建监听，2个参数分别是要监听的属性和属性变化时要执行的函数

vm.$watch('question', {
    question(newQuestion, oldQuestion) {
        if (newQuestion.includes('?')) {
            ...
        }
    }
})

当监视属性无需额外配置时，可以简写

watch: {
    question(newQuestion, oldQuestion) {
        if (newQuestion.includes('?')) {
            ...
        }
    }
}

7. 绑定样式

1. 绑定 class 样式

语法为 :class="att" ，其会将属性添加到标签 class 中，有 3 种写法

字符串写法 : 适用于样式类名不定，需要动态获取
对象写法 : 适用于绑定多个样式，个数不定，名字不定
数组写法 : 适用于绑定多个样式，个数确定，名字确定，但不确定用不用

// 基本用法
<div v-bind:class="{ active: isActive, state: myStateType === -1 }"></div>
<script>
    export default {
        data() {
            return {
                isActive: true
                myStateType: 1
            }
        }
    }
</script>

// 对象
<div v-bind:class="classObject"></div>
<script>
    export default {
        data() {
            return {
                classObject: {active:true,sort:false}
            }
        }
    }
</script>

// 数组
<div v-bind:class="[isActive, isSort]"></div>
<script>
    export default {
        data() {
            return {
                isActive: 'active',
                isSort: 'sort'
            }
        }
    }
</script>

2. 绑定 style 样式

语法为 :style="obj"，有2种写法

对象写法 : :style="{fountSize: xxx}"
数组写法 : :style="[a,b]"，其中 a、b 是样式对象

8. 条件渲染

v-show : 通过设置 display:none 实现隐藏
v-if : 直接不渲染该元素，还有 v-else-if、 v-else 可以实现条件控制，使用时放在一起，不能被打断

9. 列表

1. 展示

v-for 可以遍历数组、对象和字符串。:key 作为虚拟 DOM 的唯一标识，用来标记元素唯一性，通过比较唯一标识进行复用，减少真实 DOM 的销毁和创建，节省性能

遍历数组时，有两个返回值，第一个是字面量，第二个是索引，使用时，可以省略第二个
遍历对象时，有两个返回值，第一个是 key，第二个是 value
遍历字符串时，有两个返回值，第一个是 char，第二个是索引

<!-- 遍历数组 -->
<ul>
    <li v-for="(value,index) in list" :key="index">
        {{value.name}}
    </li>
</ul>
<!-- 遍历数组 : 省略第二个返回值，使用 id 作为唯一值 -->
<ul>
    <li v-for="value in list" :key="value.id">
        {{value.name}}
    </li>
</ul>
<!-- 遍历对象 -->
<ul>
    <li v-for="key,value in obj" :key="key">
        {{key}} -- {{value}}
    </li>
</ul>

2. 过滤

3. 排序

10. 过滤器

filters:{} 是一个 Vue 属性，本质还是方法，其可以利用管道将前面传参作为第一个参数进行传递，也可以串联传参

// 一个参数时，可以不写
<!-- 利用管道，将时间进行格式化 -->
<h2>{{time | timeFormat}}
<!-- 将展示返回值 -->
new Vue({
    data: {time:1621561377603},
    filters:{
        timeFormat(val) {
            return fotmat val 之后的值
        }
    }
})

// 多个参数时，管道的参数仍是第一个，可用形参将参数与之绑定
<h2>{{time | timeFormat(str)}}
new Vue({
    data: {time:1621561377603},
    filters:{
        timeFormat(val,str) {
            return format val 之后的值
        }
    }
})

// 多个管道串联
<h2>{{time | fun1 | fun2}}
new Vue({
    data: {time:1621561377603},
    filters:{
        fun1(val) {
            return 处理之后的值
        },
        fun2(val) {
            return 处理之后的值
        }
    }
})

Glett的码字间

理想三旬