文章目录
vue基础知识
1. 如何定义一个基本的Vue代码结构(创建一个vue实例)
-
导入Vue包
-
定义Vue实例控制的元素区域
这个元素区域就是MVVM中的V
- 创建一个Vue的实例
- 当导入包之后,在游览器中,就多了Vue 的构造函数
- new 出来的这个 vm对象,就是MVVM中 VM调度者
- 实例中至少有两个参数,一个是el,一个是data
- el表示: 当前我们 new 的这个 Vue实例,要控制页面上的哪个区域
- 这里的 data 就是 MVVM中的 M,专门用来保存 每个页面的数据的
2. 插值表达式和 v-text 使用和区别
- 插值表达式 –
{{}}
- 原理: 使用的是dom对象的innerText属性,所以不会做字符串解析
- 支持三目运算符、简单运算、支持数组的索引取值方法、支持对象的属性等
- 插值表达式 只会替换自己的这个占位符,不会把 整个元素的内容清空
- 插值表达式在网速较慢时,原有{{}}被动态填充数据时切换有闪烁问题
- v-text
- 默认 v-text 是没有闪烁问题的
- v-text会覆盖元素中原本的内容
- 解决插值表达式闪烁问题
- v-cloak 指令来解决屏幕闪动,v-cloak属性在页面渲染完毕后会自动移除,所以插值式一开始被隐藏就不会出现闪烁
- 给放置插值表达式的那个标签添加v-cloak属性
- 在style样式中设置:
[v-cloak]{ display: none; }
- 结论
- 插值表达式可以把Vue传递过来的数据和前台用户自己定义的数据结合在一起,但是不要忘记和“v-cloak”属性一起使用哦。
- v-text只能显示Vue对象传递过来的数据,会替换掉节点里已有的内容。
3. Vue指令之v-html
-
原理: 使用的是dom对象的innerHTML属性
-
支持解析Html标签
4. Vue指令之v-bind
-
概念: 是 Vue中,提供的用于绑定属性的指令
-
v-bind的三种用法
- 直接使用指令
v-bind
- 使用简化指令
:
- 在绑定的时候,拼接绑定内容:
:title="title + ', 这是追加的内容'"
- v-bind 中,可以写合法的JS表达式
5. Vue指令之v-on
-
Vue 中提供了 v-on: 事件绑定机制
-
v-on 可以缩写为 @
-
用于绑定事件和组件绑定函数方法
6. Vue指令之v-model
- v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V, 无法实现数据的双向绑定
- v-model 指令,可以实现 表单元素和 Model 中数据的双向数据绑定
7. Vue指令之v-if和v-show
-
v-if 的特点:每次都会重新删除或创建元素
-
v-show 的特点: 每次不会重新进行DOM的删除和创建操作,只是切换了元素的 display:none 样式
-
v-if 有较高的切换性能消耗,v-show 有较高的初始渲染消耗
-
使用场景: 如果元素涉及到频繁的切换,最好不要使用 v-if, 而是推荐使用 v-show; 如果元素可能永远也不会被显示出来被用户看到,则推荐使用 v-if
8. Vue指令之v-for
- v-for循环普通数组
<p v-for="(item, index) in list">索引值:{{index}} --- 每一项:{{item}}</p>
- v-for循环对象数组
<p v-for="(item, i) in list">Id:{{ item.id }} --- 名字:{{ item.name }} --- 索引:{{index}}</p>
- v-for循环对象
注意:在遍历对象身上的键值对的时候, 除了 有 val key ,在第三个位置还有 一个 索引
<p v-for="(val, key, i) in user">值是: {{ val }} --- 键是: {{key}} -- 索引: {{i}}</p>
- v-for 迭代数字
<p v-for="count in 5">这是第 {{ count }} 次循环</p>
1. in 后面我们放过 普通数组,对象数组,对象, 还可以放数字
2. 注意:如果使用 v-for 迭代数字的话,前面的 count 值从 1 开始
- v-for需要指定 key
- 在组件中,使用v-for循环的时候,或者在一些特殊情况中,如果 v-for 有问题,必须 在使用 v-for 的同时,指定 唯一的 字符串/数字 类型 :key 值
- 注意: v-for 循环的时候,key 属性只能使用 number获取string
- 注意: key 在使用的时候,必须使用 v-bind 属性绑定的形式,指定 key 的值
9. 事件修饰符
- 使用 .stop 阻止冒泡
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
- 使用 .prevent 阻止默认行为
<a href="http://www.baidu.com" @click.prevent="linkClick">有问题,先去百度</a>
- 使用 .capture 实现捕获触发事件的机制
<div class="inner" @click.capture="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
- 使用 .self 实现只有点击当前元素时候,才会触发事件处理函数
<div class="inner" @click.self="div1Handler">
<input type="button" value="戳他" @click="btnHandler">
</div>
- 使用 .once 只触发一次事件处理函数
<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题,先去百度</a>
- .stop 和 .self 的区别
<div class="outer" @click="div2Handler">
<div class="inner" @click="div1Handler">
<input type="button" value="戳他" @click.stop="btnHandler">
</div>
</div>
- .self 只会阻止自己身上冒泡行为的触发,并不会真正阻止 冒泡的行为
- .stop 真正阻止冒泡
10. Vue样式之class
- 第一种使用方式,直接传递一个数组,注意: 这里的 class 需要使用 v-bind 做数据绑定
<h1 :class="['thin', 'italic']">这是的H1!!!</h1>
- 在数组中使用三元表达式
<h1 :class="['thin', 'italic', flag?'active':'']">这是一个的H1!!!</h1>
- 在数组中使用 对象来代替三元表达式,提高代码的可读性
<h1 :class="['thin', 'italic', {'active':flag} ]">这是一个的H1!!!</h1>
- 在为 class 使用 v-bind 绑定 对象的时候,对象的属性是类名,由于 对象的属性可带引号,也可不带引号,所以 这里我没写引号; 属性的值 是一个标识符
11. Vue样式之style
<h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>
data {
styleObj1: { color: 'red', 'font-weight': 200 },
styleObj2: { 'font-style': 'italic' }
}