vue基础知识点思维导图

基础代码与mvvm关系

子主题

小知识点

使用v-cloack能够解决插值表达式闪烁的问题

使用

v-clock

属性绑定指令，可以写js表达式

v-band / :

事件绑定机制

v-on/@

在表单中实现双向数据绑定

v-model

<p v-for=\

普通数组

对象数组

对象

    <!-- in 后面我们放过 普通数组，对象数组，对象， 还可以放数字 --> <!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 --> <p v-for=\"count in 10\">这是第 {{ count }} 次循环</p>

迭代数字

循环遍历

<!-- 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值 --> <!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型  :key 值 --> <p v-for=\"item in list\" :key=\"item.id\"> <input type=\"checkbox\">{{item.id}} --- {{item.name}} </p>

key属性的使用

v-show与v-if的区别

v-for

常见指令

.stop 阻止冒泡 =>js event.stopPropagation()

.stop

.prevent 阻止默认事件 =>js e.preventDefault()

.prevent

.capture

  .self 实现只有点击当前元素（不是子元素）的时候，才能触发事件处理函数  与stop不同的是，self只只会阻止自身冒泡行为，并不会真正阻止冒泡 

.self

.once 只触发一次

.once

事件修饰符

.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right

已定义

 <input type=\"text\" class=\"form-control\" v-model=\"name\" @keyup.f2=\"add\">   // 自定义全局按键修饰符 Vue.config.keyCodes.f2 = 113

自定义

按键修饰符

  <!-- 第一种方式，直接传递一个数组；注意v-bind绑定 --> <p :class = \

    <!-- 在数组中使用三元表达式 --> <p :class = \

    <!-- 在数组中使用对象来代替三元表达式 --> <p :class = \

    <!--在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名， 对象的属性可带引号，也可不带引号， 属性的值 是一个标识符--> <p :class = \

属性绑定样式class

  <!-- 对象就是无序键值对的集合 -->//第一种方式 <!-- <h1 :style=\"styleObj1\">这是一个h1</h1> -->//第二种方式<h1 :style=\

属性绑定样式style

常用操作

-创建期间的生命函数  + beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性 + created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板 + beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中 + mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示 - 运行期间的生命周期函数： + beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点 + updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！ - 销毁期间的生命周期函数： + beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 + destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

生命周期

全局

配合使用

私有

过滤器

指令

方式一

方式二

方式三

创建一个全局组件

在html中创建模板

创建私有组件

创建

注意点

组件切换

定义一个属性

父组件向子组件传值

父组件向子组件传递方法

组件

路由

ref获取dom或组件引用

vue基础知识点思维导图