vue的基础指令

v-bind:属性名="vue变量"    简写 :属性名="vue变量"

v-on:事件名="methods中的函数    简写: @事件名="methods中的函数"

传参, 通过$event指代事件对象传给事件处理函数 示例 @click="two(10, $event)"

v-on修饰符     @事件名.修饰符="methods里函数"

.stop - 阻止事件冒泡

.prevent - 阻止默认行为

.once - 程序运行期间, 只触发一次事件处理函数

v-on按键修饰符

@keyup.enter - 监测回车按键   

@keyup.esc - 监测返回按键

v-model="vue数据变量"  把value属性和vue数据变量, 双向绑定到一起

v-model修饰符  v-model.修饰符="vue数据变量"

.number 以parseFloat转成数字类型

.trim 去除首尾空白字符

.lazy 在change时触发而非inupt时

v-text和v-html   更新DOM对象的innerText/innerHTML

v-text="vue数据变量"

v-html="vue数据变量"

注意: 会覆盖插值表达式

v-show和v-if    控制标签的隐藏或出现

 v-show="vue变量"       原理 v-show 用的display:none隐藏 (频繁切换使用)

v-if="vue变量"               原理  v-if 直接从DOM树上移除    可以配合 v-else使用

v-for   列表渲染, 所在标签结构, 按照数据数量, 循环生成

 v-for="(值, 索引) in 目标结构"

动态class  用v-bind给标签class设置动态的值

:class="{类名: 布尔值}"     使用场景: vue变量控制标签是否应该有类名

动态style   给标签动态设置style的值

:style="{css属性: 值}"

vue过滤器-定义使用

 转换格式, 过滤器就是一个函数, 传入值返回处理后的值

全局过滤器 Vue.filter("过滤器名", (值) => {return "返回处理后的值"})

局部过滤器 filters: {过滤器名字: (值) => {return "返回处理后的值"}

vue过滤器-传参和多过滤器

过滤器传参: vue变量 | 过滤器(实参)

多个过滤器: vue变量 | 过滤器1 | 过滤器2

vue计算属性-computed

目标: 一个数据, 依赖另外一些数据计算而来的结果

computed: {
    "计算属性名" () {
        return "值"
    }
}

vue计算属性-完整写法

计算属性也是变量, 如果想要直接赋值, 需要使用完整写法

computed: {
    "属性名": {
        set(值){
            
        },
        get() {
            return "值"
        }
    }
}

vue侦听器-watch

可以侦听data/computed属性值改变

watch: {
    "被侦听的属性名" (newVal, oldVal){
        
    }
}

vue侦听器-深度侦听和立即执行

侦听复杂类型, 或者立即执行侦听函数

watch: {
    "要侦听的属性名": {
        immediate: true, // 立即执行
        deep: true, // 深度侦听复杂类型内变化
        handler (newVal, oldVal) {
            
        }
    }
}

vue组件_基础使用

组件内template只能有一个根标签

组件内data必须是一个函数, 独立作用域

创建后需要注册后再使用

全局 - 注册使用

全局入口在main.js, 在new Vue之上注册

import Vue from 'vue'
import 组件对象 from 'vue文件路径'

Vue.component("组件名", 组件对象)

局部 - 注册使用

import 组件对象 from 'vue文件路径'

export default {
    components: {
        "组件名": 组件对象
    }

vue组件-scoped作用  解决多个组件样式名相同, 冲突问题

<style scoped>

 vue组件通信_父向子-props

子组件不能直接修改父组件传递过来的props props是只读的

vue组件通信_子向父

父: @自定义事件名="父methods函数"

子: this.$emit("自定义事件名", 传值) - 执行父methods里函数代码

vue组件通信-EventBus

常用于跨组件通信时使用

$nextTick和$refs知识

利用 ref 和 $refs 可以用于获取 dom 元素  

<h1 id="h" ref="myH">我是一个孤独可怜又能吃的h1</h1>

console.log(this.$refs.myH); // h1

$nextTick使用    Vue更新DOM-异步的

    this.$nextTick(() => {
                console.log(this.$refs.myP.innerHTML); // 1
            })