Vue2基础

Posted 学习React

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue2基础相关的知识，希望对你有一定的参考价值。

绑定事件@

文章目录

@click="add($event,xxx)"//传多个参数时候$event表示事件对象
@keyup.enter="add"//鼠标抬起或者enter键触发，括号不传参可写可不写

绑定数据：

Vue会解析引号里的表达式、此时这个值的类型就为Number

:value="18"

表达式 = 有返回值的语句、在插值里都可以使用、vm身上的东西也可以写入插值语法

1、1+1、add()、a?a:b

事件修饰符

可以连续使用、其他还有按键码和其别名

  • .stop阻止冒泡（常用）
  • .prevent阻止默认事件（常用）
  • .once只触发一次（常用）
  • .self只有e.target是当前操作元素才触发事件
  • .capture捕获模式
  • .passive在scroll事件使用
  • native组件绑定原生事件

v-model的修饰符

  • .lazy - 取代 input 监听 change 事件、焦点丢失的时候触发
  • .number - 输入字符串转为有效的数字
  • .trim - 输入首尾空格过滤

动态切换class

可以实现排他思想，样式切换，在循环的li里绑定样式和事件

:class="{active:isCur===idx}"

当点击的时候，在点击事件里写入

this.isCur = idx;

动态绑定style

如字体大小等都可以让Vue来监听，绑定一个对象

:style="obj"

对象里写的CSS属性

obj:{
	fontSize:16px;
}

计算属性computed

计算属性有 getter和setter，setter、完整写法：

computed: {
    fullName: {
        // getter获取时调用
        get() {
            return this.firstName + ' ' + this.lastName
        },
        // setter修改时调用
        set(newValue) {
            const names = newValue.split(' ')
            this.firstName = names[0]
            this.lastName = names[names.length - 1]
        }
    }
}

简写成函数、默认只有getter🧡：

computed:{
    fullName() {//不用写在data里了，插值语法直接使用
        return this.firstName + ' ' + this.lastName
    }
}

侦听器watch

相比computed可以执行异步操作、完整写法：

watch: {
    isHot: {
        deep:true,//监测多层值的改变
        immediate:true,//一开始执行一次
        handler(newValue,oldValue){
            ...
        }
    }
},

简写成函数🧡：

watch: {
    isHot(){
        ...
    },
    deep: true//这样也可以
},

Vue监测对象、数组的改变

Vue监测对象是通过getter和setter

如果在对象里新增一个属性，则视图不会更新，此时需要使用Vue.set()

Vue监测数组必须使用这几个Vue维护的方法(因为没有getter和setter)、不能使用中括号操作、否则视图不会更新

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

Vue.set()、this.$set()

如果在对象里新增一个属性，则视图不会更新，此时需要使用Vue.set()

向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。

Vue.set（target, propertyName/index, value）全局方法

this.$set(target, propertyName/index, value)局部方法🧡

过滤器filter

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式

局部过滤器🧡

{{ message | capitalize }}
filters: {
    capitalize: function (value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
    }
}

全局过滤器

Vue.filter('capitalize', function (value) {})

组件的使用

步骤

  1. 定义组件
  2. 注册组件
  3. 使用组件（写组件标签）

全局注册和局部注册

局部注册：靠new Vue的时候传入components选项🧡

全局注册：靠Vue.component(‘组件名’，组件)

Vue指令

常见指令：

  • v-text替换文本不能解析标签

  • v-html替换文本，可以解析标签，有安全问题，注意XSS跨站攻击、http-only字段的cookie除了在http中使用，不能在别的地方使用，所以是安全的

  • v-once初次动态渲染后，就视为静态内容

  • v-cloak解决网速慢出现{{xxx}}的问题

    [v-clok]:{display:none;}

  • v-pre跳过所在节点编译过程、利用它跳过没有使用指令语法、插值语法的节点来加快编译

自定义指令：自定义指令

有的情况下，仍然需要对普通 DOM 元素进行底层操作

// 全局在用的时候注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {//第二个参数可以简写成函数
    // 当被绑定的元素插入到 DOM 中时……
    inserted: function (el) {
    // 聚焦元素
    el.focus()
    }
})
//自己用注册局部指令
directives: {
    focus: {
    // 指令的定义
        inserted: function (el) {
          el.focus()
        }
    }
}

Scoped

作用：局部样式，防止冲突

App.vue里一般不用scoped

在JS里可以使用require引入样式

深度选择器，可改UI组件库的样式（不一定生效）

/deep/ 类名{}

ref属性🧡

也可以子传父，在下面自定义事件举例

  1. 可以获取元素的真实DOM、如果放在组件标签身上，则是组件实例对象（vc）
  2. 使用方式
//打标识:
<h1 ref="xxx">
//获取:
this.$refs.xxx

props属性（父传子、也可以子传父）🧡

子传父 需要 父组件传一个函数到子组件 子组件调用这个函数并传参

传数据<Demo name="xxx">

接收数据：

  1. 方式一（只接收）：props:['name']
  2. 方式二（限制类型）：props:{name:Number}
  3. 方式三（限制类型，限制必要性，指定默认值）：
props:{
    name:{
        type:String,//类型
        required:true,//必要性
        default:'老王'//默认值
    }
}

使用：this.name

备注：props在data前、props是只读的，如果要修改，就复制一份内容到data中，data中写name:this.name

mixin混入🧡

功能：可以把多个组件共用的配置提取成一个混入对象

第一步，定义混合，如：

export const xxx = {
	data(){...},
	methods:{...}
}

第二步使用混入，如：

import xxx from xxx
//1. 全局混入
Vue.mixin(xxx)
//局部混入
mixins:['xxx']

插件💛

功能：增强Vue

本质：包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据

定义插件：

obj.install = function (Vue,options){
//1. 添加全局过滤器
    Vue.filter(...)
//2. 添加全局指令
    Vue.directive(...)
//3. 配置全局混入
    Vue.mixin(...)
//4. 添加实例方法💚
    Vue.prototype.$myMethod = function(){...}
    Vue.prototype.$myProperty = xxx
}
export default obj;//或者export default{install(Vue){}}

使用插件：Vue.use()

$emit组件自定义事件(子传父)🧡

📢注意：

在子组件里this.$emit接收

在组件标签身上写@click也是自定义事件，只有组件使用this.$emit("click",参数)使用

通过this.$refs.xxx.$on('atguigu',回调)绑定自定义事件时，注意回调this指向，可以使用箭头函数

绑定时自定义事件：

  1. <Demo @atguigu="test"/>

  2. <Demo ref="demo"/>
...
mounted(){
    this.$refs.xxx.$on('atguigu',this.test)
}

  3. 若想让自定义事件只触发一次，可以使用once修饰符号，或$once方法

触发自定义事件：this.$emit('atguigu',数据)

解绑自定义事件：this.$off('atguigu')，解绑多个可以数组、或空括号

组件上也可以绑定原生DOM事件、使用native修饰符

全局事件总线EventBus(任意组件通信)

$on定义事件、$emit使用事件并传参、bus就是一个中间人

  1. 定义全局事件总线：

    //方式一
new Vue({
	...
    beforeCreate(){
    	Vue.prototype.$bus = this//安装全局事件总线
    }
    ...
})
//方式二、新建一个bus.js文件
import Vue from 'vue';
const bus = new Vue();
export default bus;
//然后在mian.js中
import bus from './bus'
Vue.prototype.$bus = bus;

  2. 使用：

    接收数据$on：A组件想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调留在A组件自身

    methods(){
	demo(data){...}
}
mounted(){
	this.$bus.$on('xxxx',this.demo)//注意这个方法的this，注意this.demo后面不要括号
}

    提供数据$emit

    this.$bus.$emit('xxx',数据)

    📣注意：最好在beforeDestroy钩子中，用$off去解绑当前组件所用到的事件

小知识点

template标签和v-if搭配、嵌在外层渲染到页面的时候不会渲染多余标签

v-for in 和v-for of都可以用于遍历

插值语法如果是{{undefined}}、则不Vue不渲染

收集表单数据绑定一个:value值和v-modal

一个组件实例对象就是一个Vuecomponent和vm基本相同

main.js比app.vue先执行

拆分组件的原则：一个功能一个组件、this.$destroy()销毁组件

key值使用nanoid三步：npm i nanoid、import nanoid from ‘nanoid’、nanoid()

把一些方法挂载到Vue构造函数的prototype上，组件里通过this就可以使用（Vue.prototype）

使用场景

  1. 组件用相同配置时候，使用局部混入mixins:['xxx']
  2. computed能完成的就不用watch
  3. 过滤器，过滤文本使用局部filters
  4. DOM底层操作使用ref和directive、ref拿节点、directive实现进入页面聚焦输入框
  5. 常用的只有两个生命周期，mounted发请求，拿数据等、beforeDestroy清除订阅，清除定时器等

以上是关于Vue2基础的主要内容，如果未能解决你的问题，请参考以下文章

vue3.2 基础及常用方法

vue2.0有哪些变化

vue2.0学习笔记之组件

Vue2.x基础笔记学习

[vscode]--HTML代码片段（基础版，reactvuejquery）

Vue2基础——Tap栏切换案例