vue基础知识点思维导图
2020-03-17 17:30:06 2 举报AI智能生成
vue基础知识点思维导图
作者其他创作
大纲/内容
基础代码与mvvm关系
小知识点
子主题
常见指令
v-clock
使用v-cloack能够解决插值表达式闪烁的问题
使用
v-band / :
属性绑定指令，可以写js表达式
v-on/@
事件绑定机制
v-model
在表单中实现双向数据绑定
v-for
循环遍历
普通数组
<p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p>
所遍历的对象 =》 list: [1, 2, 3, 4, 5, 6]
所遍历的对象 =》 list: [1, 2, 3, 4, 5, 6]
对象数组
<p v-for="(user, i) in list">Id：{{ user.id }} --- 名字：{{ user.name }} --- 索引：{{i}}</p>
所遍历的对象 =》 list: [{ id: 1, name: 'zs1' }]
所遍历的对象 =》 list: [{ id: 1, name: 'zs1' }]
对象
<!-- 注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引 -->
<p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
所遍历的对象 => user: {id: 1,name: '托尼·屎大颗',gender: '男'}
<p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>
所遍历的对象 => user: {id: 1,name: '托尼·屎大颗',gender: '男'}
迭代数字
<!-- in 后面我们放过 普通数组，对象数组，对象， 还可以放数字 -->
<!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->
<p v-for="count in 10">这是第 {{ count }} 次循环</p>
<!-- 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始 -->
<p v-for="count in 10">这是第 {{ count }} 次循环</p>
key属性的使用
<!-- 注意： 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>
<!-- 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，
指定 唯一的 字符串/数字 类型 :key 值 -->
<p v-for="item in list" :key="item.id">
<input type="checkbox">{{item.id}} --- {{item.name}}
</p>
v-show与v-if的区别
<!-- v-if 的特点：每次都会重新删除或创建元素 -->
<!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 -->
<!-- v-if 有较高的切换性能消耗 -->
<!-- v-show 有较高的初始渲染消耗 -->
<!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show -->
<!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if -->
<!-- v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式 -->
<!-- v-if 有较高的切换性能消耗 -->
<!-- v-show 有较高的初始渲染消耗 -->
<!-- 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show -->
<!-- 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if -->
事件修饰符
.stop
.stop 阻止冒泡 =>js event.stopPropagation()
.prevent
.prevent 阻止默认事件 =>js e.preventDefault()
.capture
.capture 使用事件捕获 =>js element.addEventListener(event, function, useCapture)
.self
.self 实现只有点击当前元素（不是子元素）的时候，才能触发事件处理函数
与stop不同的是，self只只会阻止自身冒泡行为，并不会真正阻止冒泡
与stop不同的是，self只只会阻止自身冒泡行为，并不会真正阻止冒泡
.once
.once 只触发一次
按键修饰符
已定义
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
.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
// 自定义全局按键修饰符
Vue.config.keyCodes.f2 = 113
常用操作
属性绑定样式class
<!-- 第一种方式，直接传递一个数组；注意v-bind绑定 -->
<p :class = "['red','thin']">vue使用数组 </p>
<p :class = "['red','thin']">vue使用数组 </p>
<!-- 在数组中使用三元表达式 -->
<p :class = "['red','thin' , flag?'active':'italic']">vue使用数组,三元表达式 </p>
<p :class = "['red','thin' , flag?'active':'italic']">vue使用数组,三元表达式 </p>
<!-- 在数组中使用对象来代替三元表达式 -->
<p :class = "['red','thin' , {'active' : true}]">数组中使用对象来代替三元表达式</p>
<p :class = "['red','thin' , {'active' : true}]">数组中使用对象来代替三元表达式</p>
<!--在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名， 对象的属性可带引号，也可不带引号， 属性的值 是一个标识符-->
<p :class = "{red:true,thin:true,active:true}">vue数组中使用对象</p>
也可以直接在data中写一个属性来替代上述对象
<p :class = "{red:true,thin:true,active:true}">vue数组中使用对象</p>
也可以直接在data中写一个属性来替代上述对象
属性绑定样式style
<!-- 对象就是无序键值对的集合 -->
//第一种方式
<!-- <h1 :style="styleObj1">这是一个h1</h1> -->
//第二种方式
<h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>
data: {
styleObj1: { color: 'red', 'font-weight': 200 },
styleObj2: { 'font-style': 'italic' }
}
//第一种方式
<!-- <h1 :style="styleObj1">这是一个h1</h1> -->
//第二种方式
<h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>
data: {
styleObj1: { color: 'red', 'font-weight': 200 },
styleObj2: { 'font-style': 'italic' }
}
生命周期
-创建期间的生命函数
+ beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
+ created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
+ beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
+ mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
- 运行期间的生命周期函数：
+ beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
+ updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
- 销毁期间的生命周期函数：
+ beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
+ destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
+ beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
+ created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
+ beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
+ mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
- 运行期间的生命周期函数：
+ beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
+ updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
- 销毁期间的生命周期函数：
+ beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
+ destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
过滤器
全局
子主题
私有
配合使用
指令
全局
子主题
私有
组件
创建
创建一个全局组件
方式一
方式二
方式三
创建私有组件
在html中创建模板
子主题
注意点
1. 组件可以有自己的 data 数据
2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!
2. 组件的 data 和 实例的 data 有点不一样,实例中的 data 可以为一个对象,但是 组件中的 data 必须是一个方法
3. 组件中的 data 除了必须为一个方法之外,这个方法内部,还必须返回一个对象才行;
4. 组件中 的data 数据,使用方式,和实例中的 data 使用方式完全一样!!!
组件切换
方式一
父组件向子组件传值
定义一个属性
父组件向子组件传递方法
子主题
路由
子主题
ref获取dom或组件引用
子主题
0 条评论
下一页
