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

Vue 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，方便与第三方库或既有项目整合。

另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

一、创建Vue对象

在编写Vusjs代码过程中，会首先创建一个Vue对象。

const app = new Vue({

el: "#app",

data: {}

})

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

el属性：Vue实例会管理哪一个DOM。

data属性：Vue实例对应的数据对象。

methods 属性：定义Vue的一些方法，可以在其他地方调用，也可以在指令中使用。

computed 属性：设定对象的计算属性。

二、Vue 的基本语言

插值操作：将 data属性中的数据插入到HTML中，使用两个大括号。

对插入操作设置属性：

v-once：将HTML中的内容初始化后，和DATA中的数据解除绑定。

v-html：将DATA 的变量的字面量按照html语言解析。

v-text：和使用两个大括号插入操作相似。

v-pre：对内容不做VUE解析，执行显示内容。

v-clock：斗篷的思想，用于解决data中没有设定变量，但是HTML中使用大括号引用的情况。

三、v-for 遍历

遍历数组

语法格式：

{{item}}

如果遍历过程中使用索引值的话

语法格式：

{{item}}

PS: v-for 也可以用于遍历对象。

Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新。

push：在数组后面添加元素。

pop：将数组最后一个元素删除。

shift：将数组对一个元素删除。

unshift：在数组前面添加元素。

splice：删除并向数组中添加新的元素。

sort：数组排序。

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 对象方法

用法一：直接通过{}绑定一个类。

Hello World

用法二：也可以通过判断，传入多个值

Hello World

用法三：和普通的类同时存在，并不冲突

注：如果isActive和isLine都为true，那么会有title/active/line三个类

Hello World

用法四：如果过于复杂，可以放在一个methods或者computed中

注：classes是一个计算属性

Hello World

5.2、绑定Class 数组方法

用法一：直接通过{}绑定一个类

Hello World

用法二：也可以传入多个值

Hello World

用法三：和普通的类同时存在，并不冲突

注：会有title/active/line三个类

Hello World

用法四：如果过于复杂，可以放在一个methods或者computed中

注：classes是一个计算属性

Hello World

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中的属性。

绑定方式二：数组语法

style后面跟的是一个数组类型，多个值以，分割即可。

六、computed 计算属性

computed 计算属性是对数据进行转化处理和 methods 相似；功能上都可以实现。

computed 计算属性和 methods 方法不同的地方是：计算属性会进行缓存，如果多次使用时，计算属性只会调用一次。

七、v-on 事件监听

在前端开发中，我们需要经常和用户交互；这个时候，我们就必须监听用户发生的时间，比如点击、拖拽、键盘事件等等

在Vue中如何监听事件呢？使用v-on指令。

当通过methods中定义方法，以供@click调用时，需要注意参数问题：

情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。

但是注意：如果方法本身中有一个参数，那么会默认将原生事件event参数传递进去。

情况二：如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件。

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

在某些情况下，我们拿到event的目的可能是进行一些事件处理。

Vue提供了修饰符来帮助我们方便的处理一些事件：

.stop – 调用 event.stopPropagation()。

.prevent – 调用 event.preventDefault()。

.{keyCode | keyAlias} – 只当事件是从特定键触发时才触发回调。

.native – 监听组件根元素的原生事件。

.once – 只触发一次回调。