vue的基础指令与使用

一句话概括v-指令

1. v-bind 给标签设置动态属性，可以简写成:分号

2. v-on 给标签事件绑定处理函数，可以缩写为@，

3. v-model 将表单元素的value属性与vue变量双向绑定，常用来收集用户输入内容

4. v-text 解析文本

5. v-html 解析html标签

6. v-show 显示与隐藏内容

7. v-if 显示与隐藏内容

8. v-else 必须和v-if连用 不能单独使用 否则报错

9. v-for 循环数据，生成多个DOM结构

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
            })