Vue.js 新手入门:遍历、判断、属性绑定、计算属性和事件监听

2020-02-22 0 By admin

Vue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。
另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

一、创建Vue对象

在编写Vusjs代码过程中,会首先创建一个Vue对象。
const app = new Vue({
el: "#app",
data: {}
})

创建Vue对象的时候,传入了一些选项options:{}

  1. el属性:Vue实例会管理哪一个DOM。
  2. data属性:Vue实例对应的数据对象。
  3. methods 属性:定义Vue的一些方法,可以在其他地方调用,也可以在指令中使用。
  4. computed 属性:设定对象的计算属性。

二、Vue 的基本语言

插值操作:将 data属性中的数据插入到HTML中,使用两个大括号。
对插入操作设置属性:

  1. v-once:将HTML中的内容初始化后,和DATA中的数据解除绑定。
  2. v-html:将DATA 的变量的字面量按照html语言解析。
  3. v-text:和使用两个大括号插入操作相似。
  4. v-pre:对内容不做VUE解析,执行显示内容。
  5. v-clock:斗篷的思想,用于解决data中没有设定变量,但是HTML中使用大括号引用的情况。

三、v-for 遍历

遍历数组

语法格式:<li v-for="item in items">{{item}}</li>
如果遍历过程中使用索引值的话
语法格式:<li v-for=(item, index) in items>{{item}}</li>

PS: v-for 也可以用于遍历对象。
Vue中包含了一组观察数组编译的方法,使用它们改变数组也会触发视图的更新。

  1. push:在数组后面添加元素。
  2. pop:将数组最后一个元素删除。
  3. shift:将数组对一个元素删除。
  4. unshift:在数组前面添加元素。
  5. splice:删除并向数组中添加新的元素。
  6. sort:数组排序。
  7. reverse:颠倒数据的顺序。

四、v-if、v-else-if、v-else条件判断

这三个指令与JavaScript的条件语句if、else、else if类似。Vue 的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件。

4.1、v-if的原理

v-if后面的条件为false时,对应的元素以及其子元素不会渲染。也就是根本不会有对应的标签出现在DOM中。

4.2、元素复用的问题

如果我们在有输入内容的情况下切换了类型,会发现文字依然显示之前的输入的内容。
但是按道理讲,我们应该切换到另外一个input元素中了;在另一个input元素中,我们并没有输入内容。
问题解答:
这是因为Vue在进行DOM渲染时,出于性能考虑,会尽可能的复用已经存在的元素,而不是重新创建新的元素。
在上面的案例中,Vue内部会发现原来的input元素不再使用,直接作为else中的input来使用了。
解决方案:
如果我们不希望Vue出现类似重复利用的问题,可以给对应的input添加key,并且我们需要保证key的不同。

4.3、v-if和v-show对比

v-if和v-show都可以决定一个元素是否渲染,那么开发中我们如何选择呢?
v-if当条件为false时,压根不会有对应的元素在DOM中。
v-show当条件为false时,仅仅是将元素的display属性设置为none而已。

五、v-bind绑定属性

v-bind语法糖
在页面中除了HTML元素内容需要动态来决定外,某些属性我们也希望动态来绑定。
比如动态绑定a元素的href属性,动态绑定img元素的src属性;这个时候,我们可以使用v-bind指令。

5.1、绑定Class 对象方法

用法一:直接通过{}绑定一个类。
<h2 :class="{'active': isActive}">Hello World</h2>
用法二:也可以通过判断,传入多个值
<h2 :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法三:和普通的类同时存在,并不冲突
注:如果isActive和isLine都为true,那么会有title/active/line三个类
<h2 class="title" :class="{'active': isActive, 'line': isLine}">Hello World</h2>
用法四:如果过于复杂,可以放在一个methods或者computed中
注:classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

5.2、绑定Class 数组方法

用法一:直接通过{}绑定一个类
<h2 :class="['active']">Hello World</h2>
用法二:也可以传入多个值
<h2 :class=“[‘active’, 'line']">Hello World</h2>
用法三:和普通的类同时存在,并不冲突
注:会有title/active/line三个类
<h2 class="title" :class=“[‘active’, 'line']">Hello World</h2>
用法四:如果过于复杂,可以放在一个methods或者computed中
注:classes是一个计算属性
<h2 class="title" :class="classes">Hello World</h2>

5.3、v-bind 绑定Style

在写CSS属性名的时候,比如font-size
我们可以使用驼峰式 (camelCase) fontSize
或短横线分隔 (kebab-case,记得用单引号括起来) ‘font-size’
绑定方式一:对象语法
:style="{color: currentColor, fontSize: fontSize + 'px'}"
style后面跟的是一个对象类型
对象的key是CSS属性名称;对象的value是具体赋的值,值可以来自于data中的属性。
绑定方式二:数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
style后面跟的是一个数组类型,多个值以,分割即可。

六、computed 计算属性

computed 计算属性是对数据进行转化处理和 methods 相似;功能上都可以实现。
computed 计算属性和 methods 方法不同的地方是:计算属性会进行缓存,如果多次使用时,计算属性只会调用一次。

七、v-on 事件监听

在前端开发中,我们需要经常和用户交互;这个时候,我们就必须监听用户发生的时间,比如点击、拖拽、键盘事件等等
在Vue中如何监听事件呢?使用v-on指令。
当通过methods中定义方法,以供@click调用时,需要注意参数问题:
情况一:如果该方法不需要额外参数,那么方法后的()可以不添加。
但是注意:如果方法本身中有一个参数,那么会默认将原生事件event参数传递进去。
情况二:如果需要同时传入某个参数,同时需要event时,可以通过$event传入事件。

7.1、v-on 监听事件的修饰符

在某些情况下,我们拿到event的目的可能是进行一些事件处理。
Vue提供了修饰符来帮助我们方便的处理一些事件:

  1. .stop – 调用 event.stopPropagation()。
  2. .prevent – 调用 event.preventDefault()。
  3. .{keyCode | keyAlias} – 只当事件是从特定键触发时才触发回调。
  4. .native – 监听组件根元素的原生事件。
  5. .once – 只触发一次回调。