Vue的数据渲染
Vue.js 的语法非常简洁,要使用它,我们可以通过两种方式,一种是将 Vue.js 当做一个单独的库,在HTML中引入,然后使用其中封装好的各种语法,一种是,利用Node.js提供的服务器,安装 Vue-cli 脚手架,然后在此基础上开发。
我们先使用第一种方式,熟悉Vue的基础语法。
<!-- vue-1.html -->
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<!-- 引入vue.js -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script type="text/javascript">
// 当前页面的逻辑代码
</script>
</body>
</html>
在传统的开发模式中,要将复杂的数据渲染在DOM中,需要使用各种DOM操作方式,对于DOM节点的增、删、改、查操作非常的频繁,代码冗长,且容易产生各种冗余。
框架的数据渲染非常方便,代码简洁,清晰,而且就开发角度而言,大大提高了开发效率,降低了代码冗余。
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统。
但是Vue的 DOM 操作系统,只针对 Vue 实例中按照指定方式声明的数据和允许使用 Vue 语法的DOM区域,普通数据无法使用Vue语法渲染。
<div id="app">
<!-- 想要在这个区域中使用Vue语法 -->
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
// 在Vue实例的data对象中,以键值对的形式声明数据,这些数据可以被Vue语法渲染在DOM节点上
}
});
接下来,我们就看Vue提供的具体的渲染DOM的方式。
一、声明式的渲染
<div id="app">
<h2>{{ message }}</h2>
</div>
// vue-1.js
let app = new Vue({
// el声明当前Vue实例中的数据作用的DOM区域
el: '#app',
data: {
message: 'Hello World'
}
});
这种渲染方式看起来跟模板字符串比较相似,但是实际上现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。只要 app 中的 message数据改变,页面中的渲染会立刻随之改变。
二、条件渲染
1. v-if
Vue 提供了条件渲染,用来控制切换一个元素是否显示。
<div id="app">
<!-- 当flag为true时,h2标签在页面上可见,flag为false则不可见 -->
<h2 v-if="flag">Hello World</h2>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
flag: true
}
});
这里我们遇到了一点新东西。h2标签上的 v-if 特性被称为指令。指令带有前缀 v-,以表示它们是 Vue 提供的特殊特性。每个指令,都会在渲染的 DOM 上应用特殊的响应式行为。
指令其实就是 Vue 下达给DOM的命令,不同的指令代表代码的不同行为模式。v-if 指令代表的就是条件渲染,根据绑定的值决定要不要渲染这个 DOM 节点。
2. v-else
除了根据一个值,确定要不要渲染某个节点之外,我们还可以根据一个值确定要不要两个节点交替互斥的显示(比如购物类的app中,当购物车中有货物时,就显示购物车,否则显示其他的提示信息)。
<div id="app">
<!-- 当flag为true时,显示Hello,为false显示World -->
<h2 v-if="flag">Hello</h2>
<h2 v-else="flag">World</h2>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
flag: true
}
});
v-else指令也可以不用写具体的数据:
<h2 v-if="flag">Hello</h2>
<h2 v-else>World</h2>
效果不变,else 总会找到它之前最近的未被匹配的if,与之共用一个判断值。
3. v-else-if
我们还可以使用数据,做多个元素的切换展示。
<div id="app">
<!-- num < 0 时显示 -->
<h2 v-if="num < 0 ">I</h2>
<!-- num == 0时显示 -->
<h2 v-else-if="num == 0 ">am</h2>
<!-- num为其他值时显示 -->
<h2 v-else>tom</h2>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
num: 0
}
});
注:
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后。
4. v-show
也可以根据v-show指令确定要不要显示元素。
<div id="app">
<!-- flag为true时显示,为false隐藏 -->
<h2 v-show="flag">Hello World</h2>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
flag: true
}
});
注:
v-if系列是控制要不要创建元素,v-show系列是控制要不要显示元素。如果这个元素在页面中是不断地被显示/隐藏,就使用v-show,如果这个元素在某次操作之后就确定要不要渲染,之后也不会更改,就使用v-if。
三、循环渲染
Vue 提供 v-for 指令来渲染列表类的数据到DOM节点。
1. 渲染数组
<div id="app">
<!-- user是自定义声明的一个局部变量,只作用当前这个循环内部,代表每次循环到的userList中的数据 -->
<div v-for="user in userList">
<strong>{{ user.name }}</strong>
<span>{{ user.age }}</span>
</div>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
userList: [{
name: 'tom',
age: 18
},{
name: 'jerry',
age: 17
},
{
name: 'jim',
age: 19
}]
}
});
除了可以循环到数组中的元素之外,还可以循环到当前元素的下标。
<div id="app">
<div v-for="(user,index) in userList">
<!-- index就是下标 -->
<i>{{ index }}</i>
<strong>{{ user.name }}</strong>
<span>{{ user.age }}</span>
</div>
</div>
2. 渲染对象
可以使用 v-for 指令渲染对象。
<div id="app">
<div v-for="(val, key, i) in user">
<!-- 键值对在对象中的顺序 -->
<i>{{ i }}</i>
<!-- 值 -->
<strong>{{ val }}</strong>
<!-- 键 -->
<span>{{ key }}</span>
</div>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
user: {
name: 'tom',
age: 19,
sex: '女'
}
}
});
3. 渲染字符串
可以使用v-for指令渲染字符串。
<div id="app">
<div v-for="(val, i) in str">
<!-- 字符 -->
<strong>{{ val }}</strong>
<!-- val在str中的位置 -->
<span>{{ i }}</span>
</div>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
str: 'hello'
}
});
4. 根据数字循环渲染指定数量的节点
<div id="app">
<!-- img会被渲染5次 -->
<img src="star.png" v-for="n in 5">
</div>
四、使用指令渲染
除了 {{ }} 之外,指令也可以将数据渲染在DOM节点上。
1. v-html
<div id="app">
<div v-html="str"></div>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
str: 'hello'
}
});
注:
- v-html 是以 innerHTML的方式渲染数据的。
- v-html 绑定的好处是当vue.js文件没有被加载出来时,浏览器会认为v-html指令只是一个普通的自定义属性,不会将代码暴露在浏览器中。
2. v-bind
前面的几种渲染方式都是将数据渲染在标签内,但是有时候我们需要动态的为某些元素的属性绑定一些数据。要使用 v-bind。
<div id="app">
<!-- 当flag为true时,div 会添加一个 'active-box'的类名 -->
<div v-bind:class="{{ flag ? 'active-box' : '' }}"></div>
</div>
// vue-1.js
let app = new Vue({
el: '#app',
data: {
flag: true
}
});
v-bind 可以简写:
<div :class="{{ flag ? 'active-box' : '' }}"></div>
注:
使用v-bind时,属性内的执行代码需要用 {{ }} 包括。