Vue入门

目录

1.Vue数据渲染

    1.1 数据渲染的几种方式与对比

2.条件渲染

    2.1 v-if

    2.2 v-show

    2.3 v-if 与 v-show 的对比

3.v-for渲染数组和对象

---

1.1 数据渲染的几种方式与对比

1.差值表达式: {{ 变量或者表达式 }} 

 双大括号里边可以写变量名和简单的表达式

例如 : {{name}}  {{ num++ }}  {{ num<10? "0"+num : num }}

    姓名:{{username}}
    年龄:{{age}}

2.指令,以v-开头的特殊属性

v-text : v-text = "表达式", 此处的表达式同上,一般是变量,也可以是简单表达式

 v-text 就相当于 JavaScript中的innerText,只能解析纯文本,不能解析标签

3.v-html : v-html = "表达式",此处的表达式同上,一般是变量,也可以是简单表达式

  v-html 就相当于 JavaScript中的innerHTML,既可以解析文本,也可以解析标签

以上渲染数据大致分为两类 : 插值表达式和指令

 插值表达式和指令的对比

插值语法 :

写法简单,不需要依附于某个标签,可以直接使用,

动态数据和静态数据可以写在一起,灵活性高

可能出现插值闪烁问题, 可以使用 v-cloak 解决这个问题

指令 v-text 与 v- html  :

不存在插值闪烁问题,没有接收到数据就不显示,收据接收完毕,渲染页面

写法较麻烦,因为也相当于一种属性,必须搭配标签使用

使用指令渲染数据,指令中的数据会直接替换掉标签体中写的内容, *** 作不灵活,

v-text,不能渲染标签

插值闪烁 : 当我们从后端请求的数据因为网络或者某种原因延迟,页面中会显示插值表达式的语法,数据接收完毕后,页面渲染完成,这种现象称之为插值闪烁.也就是说,当数据没拿到的时候,我们会在页面上看到类似这种  {{username}} 

v-cloak 指令(没有值): 

本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉 v-cloak 属性使用css 的display:none 配合v-cloak 可以解决插值闪烁的问题

以下是用一个定时器模拟网络响应数据延迟,当不使用v-cloak时,大家可以看一下效果,会出现插值闪烁,使用了v-cloak,完美解决这个问题

    
    
    
    



    {{username}}

2.条件渲染 2.1 v-if

v-if 满足条件时,渲染数据,与JavaScript中的if条件判断类似,同样也有 v-else-if 和 v-else

    条件成立,显示
    条件不成立,显示

2.2 v-show

类似于jQuery中的show()

    条件成立,显示

2.3 v-if 与 v-show 的对比

切换时:

v-if : 如果条件成立,创建该标签,条件不成立,则销毁该标签[直接 *** 作DOM元素,切换时,不断的创建与销毁],所以,v-if有更高的切换开销v-show : 如果条件成立,则通过css属性,显示该标签,如果条件不成立,则隐藏该标签[条件切换时,不会移除和添加DOM,只是通过css属性, 控制标签的显示与隐藏]

初次渲染时: 

v-if : 如果条件不成立,则不进行任何 *** 作[v-if是惰性的],只有当条件成立时,才会创建标签v-show : 不管条件成立不成立,都会创建标签,再根据条件,进行显示或隐藏,v-show有更高的渲染开销

使用场景 :

运行时切换比较频繁,使用v-show运行时切换不频繁或条件不经常改变,使用v-if

目录3见下一篇