分享11个vue基础知识

vue基础知识

1. 如何定义一个基本的Vue代码结构(创建一个vue实例)

1. 导入Vue包

2. 定义Vue实例控制的元素区域

这个元素区域就是MVVM中的V

3. 创建一个Vue的实例

1. 当导入包之后,在游览器中,就多了Vue 的构造函数
2. new 出来的这个 vm对象,就是MVVM中 VM调度者
3. 实例中至少有两个参数,一个是el,一个是data
4. el表示: 当前我们 new 的这个 Vue实例，要控制页面上的哪个区域
5. 这里的 data 就是 MVVM中的 M，专门用来保存 每个页面的数据的

2. 插值表达式和 v-text 使用和区别

1. 插值表达式 – {{}}

1. 原理: 使用的是dom对象的innerText属性，所以不会做字符串解析
2. 支持三目运算符、简单运算、支持数组的索引取值方法、支持对象的属性等
3. 插值表达式 只会替换自己的这个占位符，不会把 整个元素的内容清空
4. 插值表达式在网速较慢时,原有{{}}被动态填充数据时切换有闪烁问题

2. v-text

1. 默认 v-text 是没有闪烁问题的
2. v-text会覆盖元素中原本的内容

3. 解决插值表达式闪烁问题

1. v-cloak 指令来解决屏幕闪动,v-cloak属性在页面渲染完毕后会自动移除,所以插值式一开始被隐藏就不会出现闪烁
2. 给放置插值表达式的那个标签添加v-cloak属性
3. 在style样式中设置: [v-cloak]{ display: none; }

4. 结论

1. 插值表达式可以把Vue传递过来的数据和前台用户自己定义的数据结合在一起，但是不要忘记和“v-cloak”属性一起使用哦。
2. v-text只能显示Vue对象传递过来的数据，会替换掉节点里已有的内容。

3. Vue指令之v-html

1. 原理: 使用的是dom对象的innerHTML属性

2. 支持解析Html标签

4. Vue指令之v-bind

1. 概念: 是 Vue中，提供的用于绑定属性的指令

2. v-bind的三种用法

1. 直接使用指令v-bind
2. 使用简化指令:
3. 在绑定的时候，拼接绑定内容：:title="title + ', 这是追加的内容'"

3. v-bind 中，可以写合法的JS表达式

5. Vue指令之v-on

1. Vue 中提供了 v-on: 事件绑定机制

2. v-on 可以缩写为 @

3. 用于绑定事件和组件绑定函数方法

6. Vue指令之v-model

1. v-bind 只能实现数据的单向绑定,从 M 自动绑定到 V， 无法实现数据的双向绑定
2. v-model 指令，可以实现 表单元素和 Model 中数据的双向数据绑定

7. Vue指令之v-if和v-show

1. v-if 的特点：每次都会重新删除或创建元素

2. v-show 的特点： 每次不会重新进行DOM的删除和创建操作，只是切换了元素的 display:none 样式

3. v-if 有较高的切换性能消耗,v-show 有较高的初始渲染消耗

4. 使用场景: 如果元素涉及到频繁的切换，最好不要使用 v-if, 而是推荐使用 v-show; 如果元素可能永远也不会被显示出来被用户看到，则推荐使用 v-if

8. Vue指令之v-for

1. v-for循环普通数组

<p v-for="(item, index) in list">索引值：{{index}} --- 每一项：{{item}}</p>

2. v-for循环对象数组

<p v-for="(item, i) in list">Id：{{ item.id }} --- 名字：{{ item.name }} --- 索引：{{index}}</p>

3. v-for循环对象

注意：在遍历对象身上的键值对的时候， 除了 有 val key ,在第三个位置还有 一个 索引

<p v-for="(val, key, i) in user">值是： {{ val }} --- 键是： {{key}} -- 索引： {{i}}</p>

4. v-for 迭代数字

<p v-for="count in 5">这是第 {{ count }} 次循环</p>

1. in 后面我们放过 普通数组，对象数组，对象， 还可以放数字

2. 注意：如果使用 v-for 迭代数字的话，前面的 count 值从 1 开始

5. v-for需要指定 key

1. 在组件中，使用v-for循环的时候，或者在一些特殊情况中，如果 v-for 有问题，必须 在使用 v-for 的同时，指定 唯一的 字符串/数字 类型 :key 值
2. 注意： v-for 循环的时候，key 属性只能使用 number获取string
3. 注意： key 在使用的时候，必须使用 v-bind 属性绑定的形式，指定 key 的值

9. 事件修饰符

1. 使用 .stop 阻止冒泡

<div class="inner" @click="div1Handler">
    <input type="button" value="戳他" @click.stop="btnHandler">
</div> 

2. 使用 .prevent 阻止默认行为

<a href="http://www.baidu.com" @click.prevent="linkClick">有问题，先去百度</a>

3. 使用 .capture 实现捕获触发事件的机制

<div class="inner" @click.capture="div1Handler">
    <input type="button" value="戳他" @click="btnHandler">
</div>

4. 使用 .self 实现只有点击当前元素时候，才会触发事件处理函数

<div class="inner" @click.self="div1Handler">
    <input type="button" value="戳他" @click="btnHandler">
</div>

5. 使用 .once 只触发一次事件处理函数

<a href="http://www.baidu.com" @click.prevent.once="linkClick">有问题，先去百度</a>

6. .stop 和 .self 的区别

<div class="outer" @click="div2Handler">
    <div class="inner" @click="div1Handler">
        <input type="button" value="戳他" @click.stop="btnHandler">
     </div>
</div>

1. .self 只会阻止自己身上冒泡行为的触发，并不会真正阻止 冒泡的行为
2. .stop 真正阻止冒泡

10. Vue样式之class

1. 第一种使用方式，直接传递一个数组，注意： 这里的 class 需要使用 v-bind 做数据绑定

<h1 :class="['thin', 'italic']">这是的H1！！！</h1>

2. 在数组中使用三元表达式

<h1 :class="['thin', 'italic', flag?'active':'']">这是一个的H1！！！</h1>

3. 在数组中使用 对象来代替三元表达式，提高代码的可读性

<h1 :class="['thin', 'italic', {'active':flag} ]">这是一个的H1！！！</h1>

4. 在为 class 使用 v-bind 绑定 对象的时候，对象的属性是类名，由于 对象的属性可带引号，也可不带引号，所以 这里我没写引号； 属性的值 是一个标识符

11. Vue样式之style

<h1 :style="[ styleObj1, styleObj2 ]">这是一个h1</h1>

data {
    styleObj1: { color: 'red', 'font-weight': 200 },
    styleObj2: { 'font-style': 'italic' }
}