Vue 基础知识

一、指令

1.1 什么是指令？

指令的本质就是自定义属性

1.2 指令

1. v-cloak指令用法：

解决插值表达式存在的问题：“闪动”

1. 数据绑定指令

⚫v-text 填充纯文本

⚫ v-html 填充HTML片段

⚫ v-pre 填充原始信息

1.3 事件绑定

v-on：click 可以简写为@click

1.4 事件修饰符

.stop 阻止冒泡

.prevent 阻止默认行为

1.5 按键修饰符

.enter 回车键

<input v-on:keyup.enter='submit'>

.esc 退出键

<input v-on:keyup.delete='handle'>

1.6 自定义按键修饰符

全局 config.keyCodes 对象

Vue.config.keyCodes.f1 = 112

1.7 属性绑定

1.7.1 Vue如何动态处理属性？

v-bind指令用法

<a v-bind:href='url'>跳转</a>
​
//缩写
<a :href='url'>跳转</a>

1.8 样式绑定

1.8.1 class样式处理

对象语法

<div v-bind:class="{ active: isActive }"></div>

数组语法

<div v-bind:class="[activeClass, errorClass]"></div>

1.8.2 style样式处理

对象语法

<div v-bind:style="{ color: activeColor, fontSize: fontSize }"></div>

数组语法

<div v-bind:style="[baseStyles, overridingStyles]"></div>

1.9 分支循环结构

1. 分支结构 ⚫ v-if ⚫ v-else ⚫ v-else-if ⚫ v-show

2. v-if与v-show的区别 ⚫ v-if控制元素是否渲染到页面 ⚫ v-show控制元素是否显示（已经渲染到了页面）

3. 循环结构

v-for遍历数组

<li v-for='item in list'>{{item}}</li>
​
<li v-for='(item,index) in list'>{{item}} + '---' +{{index}}</li>

key的作用：帮助Vue区分不同的元素，从而提高性能

<li :key='item.id' v-for='(item,index) in list'>{{item}} + '---' {{index}}</li>

v-for遍历对象

<div v-for='(value, key, index) in object'></div>

v-if和v-for结合使用

<div v-if='value==12' v-for='(value, key, index) in object'></div>

2、 Vue常用特性

2.1 表单操作

2.1.1 基于Vue的表单操作

⚫ Input 单行文本 ⚫ textarea 多行文本 ⚫ select 下拉多选 ⚫ radio 单选框 ⚫ checkbox 多选框

2.1.2表单域修饰符：

number：转化为数值

<input v-model.number="age" type="number">

trim：去掉开始和结尾的空格 lazy : 将input事件切换为change事件

2.2 自定义指令

2.2.1 为何需要自定义指令？ 内置指令不满足需求

自定义指令的语法规则（获取元素焦点）

Vue.directive('focus'{
    inserted:function(el){
    //获取元素焦点
    el.focus
    }
})

​
//自定义指令用法

<input type="text" v-focus>

2.2.2 自定义指令

带参数的自定义指令（改变元素背景色）

Vue.directive('color', {
   inserted : function(el,binding){
     el.style.backgroundColor = binding.value.color;
    }
})

​
//指令的用法

<input type="text" v-color='{color:"orange"}'>

局部指令：

//使用在 Vue 实例中
​

directives : {
    focus :{
        //指令的定义  也可以用bind
        inserted: function(el) {
            el.focus()
        }
    }
}

2.3 计算属性

2.3.1 为何需要计算属性？ 表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁

2.3.2 计算属性的用法

conputed: {
    reversedMessage: function() {
        return this.msg.split('').reverse.join('')
    }
}

2.3.3 计算属性与方法的区别

计算属性是基于它们的依赖进行缓存的 方法不存在缓存

2.4 侦听器

2.4.1 侦听器的应用场景 数据变化时执行异步或开销较大的操作

2.4.2 侦听器的用法

watch: {
    firstName: function(val) {
        //val表示变化之后的值
        this.fullname = val + this.lastName;
    },
        lastName: function(val) {
            this.fullName = this.firstName + val;
        }
}

2.5 过滤器

2.5.1 过滤器的作用是什么？

格式化数据，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等

2.5.2 自定义过滤器

/Vue.filter('过滤器名臣'，function（value){
    //过滤器业务逻辑
}
​
//过滤器的使用
<div>{{msg | upper}}</div>
<div>{{msg | upper |lower}}</div>
<div v-bind:id="id | formatId"></div>
​
​
//局部过滤器
filters: {
    capitalize : function() {}
}

2.5.3 带参数的过滤器

Vue.fileter('format', function(value,arg) {
    //value 就是过滤器传递过来的参数
})
​
//过滤器的使用
<div>{{data | format('yyyy-MM-dd')}}</div>

2.6 生命周期

挂载（初始化相关属性）：

① beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。 ② created 在实例创建完成后被立即调用。 ③ beforeMount 在挂载开始之前被调用。 ④ ==mounted el==被新创建的vm.$el替换，并挂载到实例上去之后调用该钩子。

更新（元素或组件的变更操作）

⑤ beforeUpdate 数据更新时调用，发生在虚拟DOM打补丁之前。 ⑥ updated 由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。

销毁（销毁相关属性）

⑦ beforeDestroy 实例销毁之前调用。 ⑧ destroyed 实例销毁后调用