Vue快速入门(二：模板渲染)《快乐Vue》
2019-02-23 本文已影响0人
Negen
模板渲染
概念：从后端获取数据后，将数据按照一定的规则加载到写好的模板中，输出成浏览中显示的HTML。这个过程就称之为渲染。 Vue.js 是在前端（即浏览器内）进行的模板
渲染。
优点：
1、业务分离，后端只需要提供数据接口，能够提升开发效率。
2、计算量转移，原本需要后端渲染的任务转移给了前端，减轻了服务器的压力。
条件渲染
Vue.js 提供 v-if，v-show，v-else，v-for 这几个指令来说明模板和数据间的逻辑关系，这基本就构成了模板引擎的主要部分。
示例：
<!DOCTYPE html>
<html>
<head>
<title>Class与Style绑定</title>
<meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
<!-- v-if/v-else v-if和v-else的作用是根据数据值来判断是否输出该DOM元素，以及包含的子元素。
需要注意的是，v-else 必须紧跟 v-if，不然该指令不起作用。 -->
<h2 v-if="yes">yes</h2>
<h2 v-else>no</h2>
<!-- 除了 v-if，v-show 也是可以根据条件展示元素的一种指令。
与 v-if 不同的是，v-show 元素的使用会渲染并保持在 DOM 中。v-show 只是切换元素
的 css 属性 display。-->
<div v-show="show">v-show</div>
</div>
<script type="text/javascript">
//定义数据
var data = {
yes: true,
show: false
}
var vm = new Vue({
el: "#app",
data: data
});
</script>
</body>
</html>
列表渲染
主要用到的指令有 v-for
示例：
<!DOCTYPE html>
<html>
<head>
<title>列表渲染</title>
<meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
<!-- v-for 指令主要用于列表渲染，将根据接收到数组重复渲染 v-for 绑定到的 DOM 元素及内部的子元素，并且可以通过设置别名的方式，获取数组内数据渲染到节点中。
-->
<ul>
<!-- 其中 datas 为 data 中的属性名，item 为别名，可以通过 item 来获取当前数组遍历的每个元素 -->
<li v-for="item of datas">
name:<span>{{ item.name }}</span>
age:<span>{{ item.age }}</span>
sex:<span>{{ item.sex }}</span>
</li>
</ul>
<hr>
<table border="1">
<tr>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
<tr v-for="item of datas">
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.sex }}</td>
</tr>
</table>
<hr>
<!-- v-for 内置了 $index 变量，可以在 v-for 指令内调用，输出当前数组元素的索引。另外，我们也可以自己指定索引的别名， -->
<table border="1">
<tr>
<th>index</th>
<th>name</th>
<th>age</th>
<th>sex</th>
</tr>
<tr v-for="(item, index) of datas">
<td>{{ index }}</td>
<td>{{ item.name }}</td>
<td>{{ item.age }}</td>
<td>{{ item.sex }}</td>
</tr>
</table>
<hr>
<!-- v-for 除了可以遍历数组外，也可以遍历对象，与 $index 类似，作用域内可以访问另一 -->
<ul>
<li v-for="(key, value) in obj">
{{ key }} : {{ value }}
</li>
</ul>
</div>
<script type="text/javascript">
//定义数据
var data = {
datas: [
{name: 'Jack', age: 25, sex: 'male'},
{name: 'Tom', age: 22, sex: 'male'},
{name: 'John', age: 20, sex: 'male'},
{name: 'Monkey', age: 25, sex: 'female'},
{name: 'Davide', age: 22, sex: 'male'}
],
obj:{
key_1:'value_1',
key_2:'value_2',
key_3:'value_3'
}
}
var vm = new Vue({
el: "#app",
data: data
});
</script>
</body>
</html>
运行结果如下：
列表渲染.png
template标签用法
上述的例子中，v-show 和 v-if 指令都包含在一个根元素中，那是否有方式可以将指令作用到多个兄弟 DOM 元素上？ Vue.js 提供了 template 标签，我们可以将指令作用到这个标签上，但最后的渲染结果里不会有它。
例如：
<template>
<p>1、this is a sentence</p>
<p>2、this is a sentence</p>
<p>3、this is a sentence</p>
</template>
输出的结果为：
template.png
同样， template 标签也支持使用 v-for 指令，用来渲染同级的多个兄弟元素
