![](https://i-blog.csdnimg.cn/blog_migrate/56bf6fe4853f861084e4dc787dc9dd18.jpeg)
vue概述
mvvm模式
![image-20201001110548401](https://i-blog.csdnimg.cn/blog_migrate/81816b80a1209af38cfb2e133b6a1d47.png)
-
M:即Model,模型,包括数据和一些基本操作 -
V:即View,视图,页面渲染结果 -
VM:即View-Model,模型与视图间的双向操作(无需开发人员干涉)
在MVVM之前,开发人员从后端获取需要的数据模型,然后要通过DOM操作Model渲染到View中。而后当用户操作视图,我们还需要通过DOM获取View中的数据,然后同步到Model中。
而MVVM中的VM要做的事情就是把DOM操作完全封装起来,开发人员不用再关心Model和View之间是如何互相影响的:
-
只要我们Model发生了改变,View上自然就会表现出来。 -
当用户修改了View,Model中的数据也会跟着改变。
把开发人员从繁琐的DOM操作中解放出来,把关注点放在如何操作Model上。
mvvm模式的优势:
-
低耦合
视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的"View"上,当View变化时Model可以不变,当Model变化时View也可以不变
-
可重用性
可以把一些视图逻辑放在一个ViewModel里面,让多个View重用这段视图逻辑代码
-
独立开发
开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
而我们今天要学习的,就是一款MVVM模式的框架:Vue
快速入门
安装vue
下载安装
下载地址:https://github.com/vuejs/vue
可以下载2.5.16版本https://github.com/vuejs/vue/archive/v2.5.16.zip
下载解压,得到vue.js文件。可以在页面中直接通过script引入vue.js文件
使用cdn
或者也可以直接使用公共的CDN服务:
<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者:
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
Vue 入门案例(演示用,不做讲解)
HTML模板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h2>{{name}},非常酷!</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app", // el即element,要渲染的页面元素
data: {
name: "Vue测试"
}
});
</script>
</body>
</html>
-
首先通过 new Vue()
来创建Vue
实例 -
然后构造函数接收一个对象,对象中有一些属性: -
el :是 element
的缩写,通过id
选中要渲染的页面元素,本例中是一个div
-
data:数据,数据是一个对象,里面有很多属性,都可以渲染到视图中 -
name
:这里指定了一个name
属性
-
-
-
页面中的 h2
元素中,通过{{name}}
的方式,来渲染刚刚定义的name
属性
更神奇的在于,当你修改name
属性时,页面会跟着变化。
双向绑定
对刚才的案例进行简单修改:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num">
<h2>
{{name}},非常酷!
有{{num}}个酷炫功能!
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app", // el即element,要渲染的页面元素
data: {
name: "Vue测试",
num: 1
}
});
</script>
</body>
</html>
-
在 data
中添加了新的属性:num
-
在页面中有一个 input
元素,通过v-model
与num
进行绑定 -
同时通过 {{num}}
在页面输出
可以观察到,输入框的变化引起了data
中的num
的变化,同时页面输出也跟着变化。
-
input
与num
绑定,input
的value
值变化,影响到了data
中的num
值 -
页面 {{num}}
与数据num
绑定,因此num
值变化,引起了页面效果变化。
没有任何dom
操作,这就是双向绑定的魅力。
事件处理
在页面添加一个按钮:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="num">
<button v-on:click="num++">点我</button>
<h2>
{{name}},非常酷!
有{{num}}个酷炫功能!
</h2>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app", // el即element,要渲染的页面元素
data: {
name: "Vue测试",
num: 1
}
});
</script>
</body>
</html>
-
这里用 v-on
指令绑定点击事件,而不是普通的onclick
,然后直接操作num
-
普通 onclick
是无法直接操作num
的
Vue 实例
创建Vue实例
每个 Vue
应用都是通过用 Vue
函数创建一个新的 Vue
实例开始的:
var vm = new Vue({
// 选项
})
在构造函数中传入一个对象,并且在对象中声明各种Vue需要的数据和方法,包括:
-
el -
data -
methods -
… …等
接下来,一一介绍。
模板或元素
每个Vue
实例都需要关联一段Html
模板,Vue
会基于此模板进行视图渲染;可以通过el属性来指定。
例如一段html模板:
<div id="app">
</div>
然后创建Vue
实例,关联这个div
var vm = new Vue({
el:"#app"
})
这样,Vue
就可以基于id
为 app
的div
元素作为模板进行渲染了。在这个div
范围以外的部分是无法使用vue
特性的。
数据
当Vue实例被创建时,它会尝试获取在data中定义的所有属性,用于视图的渲染,并且监视data中的属性变化,当data发生改变,所有相关的视图都将重新渲染,这就是“响应式“系统。
html:
<div id="app">
<input type="text" v-model="name"/>
</div>
js:
var vm = new Vue({
el:"#app",
data:{
name:"ZHANGSAN"
}
})
-
name
的变化会影响到input
的值 -
input
中输入的值,也会导致vm
中的name
发生改变
方法
Vue实例中除了可以定义data属性,也可以定义方法,并且在Vue的作用范围内使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click="add">点我</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {},
methods: {
add: function () {
console.log("点我了...233")
}
}
});
</script>
</body>
</html>
生命周期钩子函数
每个 Vue 实例在被创建时都要经过一系列的初始化过程 :创建实例,装载模板,渲染模板等。Vue为生命周期中的每个状态都设置了钩子函数(监听函数)。每当Vue实例处于不同的生命周期时,对应的函数就会被触发调用。
所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算。
![20200710065238953](https://i-blog.csdnimg.cn/blog_migrate/91e9a035aca3345034dd4f72ab4e749e.png)
生命周期
每个 Vue 实例在被创建之前都要经过一系列的初始化过程
生命周期函数 | 含义 |
---|---|
beforeCreate(vue对象创建前) | 组件实例刚被创建,组件属性计算之前,比如data属性等 |
created(创建后) | 模板编译、挂载之前 |
mounted(载入后) | 模板编译、挂载之后 |
beforeUpdate(更新前) | 组件更新之前 |
updated(更新后) | 组件更新之后 |
beforeDestroy(销毁前) | 组件销毁前调用 |
destroyed(销毁后) | 组件销毁后调用 |
vm.$el :Vue 实例使用的根 DOM 元素
vm.$root :当前的 Vue 实例。
Vue在实例化的过程中,会调用这些生命周期的钩子,给我们提供了执行自定义逻辑的机会。那么,在这些vue钩子中,vue实例到底执行了那些操作,我们先看下面执行的例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs生命周期</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#app",
data: {
message: 'hello world'
},
beforeCreate: function () {
console.log(this);
showData('创建vue实例前', this);
},
created: function () {
showData('创建vue实例后', this);
},
beforeMount: function () {
showData('挂载到dom前', this);
},
mounted: function () {
showData('挂载到dom后', this);
},
beforeUpdate: function () {
showData('数据变化更新前', this);
},
updated: function () {
showData('数据变化更新后', this);
},
beforeDestroy: function () {
showData('vue实例销毁前', this);
},
destroyed: function () {
showData('vue实例销毁后', this);
}
});
function showData(process, obj) {
console.log(process);
console.log('data 数据:' + obj.message)
console.log('挂载的对象:')
console.log(obj.$el)
}
</script>
</body>
</html>
钩子函数
例如:created
代表在vue实例创建后;
可以在Vue
中定义一个created
函数,代表这个时期的构造函数:
创建示例html页面如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
// 初始化为空
msg: ""
},
// 钩子函数
created() {
// this 表示Vue实例
this.msg = "hello vue.created";
console.log(this)
}
});
</script>
</body>
</html>
this
可以看下在vue内部的this变量是谁,在created的时候,打印this
var app = new Vue({
el:"#app",
data:{
msg: ""
},
//钩子函数
created() {
//this表示vue实例
this.msg = "hello vue. created.";
console.log(this);
}
});
控制台的输出; 总结: this 就是当前的Vue实例,在Vue对象内部,必须使用 this 才能访问到Vue中定义的data内属性、方法等。
应用场景
-
在beforeCreate生命周期函数运行时,可以添加loading动画
-
在created生命周期函数运行时,可以结束loading动画,还可以做一些初始化,实现函数自执行等操作
-
最经常使用的是mounted生命周期函数
可以发起后端数据请求,取回数据
可以接收页面之间传递的参数
可以子组件向父组件传递参数等
指令
什么是指令?
指令 (Directives) 是带有 v-
前缀的特殊属性。例如在入门案例中的v-model
,代表双向绑定。
插值表达式
花括号
格式:
{{表达式}}
说明:
-
该表达式支持JS语法,可以调用js内置函数( 必须有返回值) -
表达式必须有返回结果。例如 1 + 1,没有结果的表达式不允许使用,如:var a = 1 + 1; -
可以直接获取Vue实例中定义的数据或函数
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{msg}}
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
msg: "hello vue."
}
});
</script>
</body>
</html>
插值闪烁
使用{{}}
方式在网速较慢时会出现问题。在数据未加载完成时,页面会显示出原始的 {{}}
,加载完毕后才显示正确数据,称为插值闪烁。解决办法是通过v-text和v-html替换
v-text 和 v-html
使用v-text
和v-html
指令来替代 {{}}
说明:
-
v-text
:将数据输出到元素内部,如果输出的数据有HTML代码,会作为普通文本输出 -
v-html
:将数据输出到元素内部,如果输出的数据有HTML代码,会被渲染
示例,改造原页面内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--{{msg}}-->
v-text:<span v-text="msg"></span><br/>
v-html:<span v-html="msg"></span><br/>
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data: {
// msg: "hello vue."
msg: "<h2>hello vue.</h2>"
}
});
</script>
</body>
</html>
并且不会出现插值闪烁,当没有数据时,会显示空白。
v-model
刚才的v-text
和v-html
可以看做是单向绑定,数据影响了视图渲染,但是反过来就不行。
接下来学习的v-model
是双向绑定,视图(View
)和模型(Model
)之间会互相影响。
既然是双向绑定,一定是在视图中可以修改数据,这样就限定了视图的元素类型。
目前v-model
的可使用元素有:
-
input -
select -
textarea -
checkbox -
radio -
components(Vue中的自定义组件)
基本上除了最后一项,其它都是表单的输入项。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="checkbox" value="Java" v-model="language">Java<br/>
<input type="checkbox" value="PHP" v-model="language">PHP<br/>
<input type="checkbox" value="Swift" v-model="language">Swift<br/>
<h2>
你选择了:{{language.join(",")}}
</h2>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
language: []
}
});
</script>
</body>
</html>
-
多个 checkbox
对应一个model
时,model
的类型是一个数组,单个checkbox
值是boolean类型 -
radio
对应的值是input的value值 -
input
和textarea
默认对应的model是字符串 -
select
单选对应字符串,多选对应也是数组
v-on
基本用法
v-on
指令用于给页面元素绑定事件。
语法:
v-on:事件名="js片段或函数名"
简写语法:
@事件名="js片段或函数名"
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--直接写js片段-->
<button @click="num++">增加</button>
<!--使用函数名,该函数必须要在vue实例中定义-->
<button @click="decrement">减少</button>
<h2>
num={{num}}
</h2>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
decrement() {
this.num--;
}
}
});
</script>
</body>
</html>
事件修饰符
在事件处理程序中调用 event.preventDefault()
或 event.stopPropagation()
是非常常见的需求。
尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题,Vue.js 为 v-on
提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。
-
.stop
:阻止事件冒泡 -
.prevent
:阻止默认事件发生 -
.capture
:使用事件捕获模式 -
.self
:只有元素自身触发事件才执行。(冒泡或捕获的都不执行) -
.once
:只执行一次
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<!--直接写js片段-->
<button @click="num++">增加</button>
<!--使用函数名,该函数必须要在vue实例中定义-->
<button @click="decrement">减少</button>
<h2>
num={{num}}
</h2>
<hr>
事件冒泡测试:<br/>
<div style="background-color: lightblue;width: 100px;height: 100px" @click="print('div被点击了')">
<button @click.stop="print('点击了button')">点我试试</button>
</div>
<br>阻止默认事件:<br>
<a href="http://www.baidu.com" @click.prevent="print('点击了超链接')">百度</a>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
num: 1
},
methods: {
decrement() {
this.num--;
},
print(str) {
console.log(str);
}
}
});
</script>
</body>
</html>
v-for
遍历数据渲染页面是非常常用的需求,Vue中通过v-for
指令来实现。
遍历数组
语法:
v-for="item in items"
-
items
:要遍历的数组,需要在vue的data中定义好。 -
item
:循环变量
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
users: [
{"name": "小明", "age": 13, "gender": "男"},
{"name": "小红", "age": 13, "gender": "女"},
{"name": "小绿", "age": 4, "gender": "男"}
]
}
});
</script>
</body>
</html>
数组角标
在遍历的过程中,如果需要知道数组角标,可以指定第二个参数:
语法:
v-for="(item,index) in items"
-
items:要迭代的数组 -
item:迭代得到的数组元素别名 -
index:迭代到的当前元素索引,从0开始。
示例:
<div id="app">
<ul>
<li v-for="(user,index) in users">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
</div>
遍历对象
v-for
除了可以迭代数组,也可以迭代对象。语法基本类似
语法:
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
-
1个参数时,得到的是对象的值 -
2个参数时,第一个是值,第二个是键 -
3个参数时,第三个是索引,从0开始 示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<ul>
<li v-for="user in users">
{{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
<hr>
<ul>
<li v-for="(user,index) in users">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
<hr>
<ul>
<!--1个参数时,得到的是对象的值-->
<li v-for="value in person">
{{value}}
</li>
</ul>
<hr>
<ul>
<!--2个参数时,第一个是值,第二个是键-->
<li v-for="(value,key ) in person">
{{value}}--{{key}}
</li>
</ul>
<hr>
<ul>
<!--3个参数时,第三个是索引,从0开始-->
<li v-for="(value,key,index ) in person">
{{value}}--{{key}} -- {{index}}
</li>
</ul>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
users: [
{"name": "小明", "age": 13, "gender": "男"},
{"name": "小红", "age": 13, "gender": "女"},
{"name": "小绿", "age": 4, "gender": "男"}
],
person: {"name": "zhangsan", "age": 13, "gender": "男", "address": "中国"}
}
});
</script>
</body>
</html>
key
当 Vue.js 用 v-for 正在更新已渲染过的元素列表时,它默认用“就地复用”策略。如果数据项的顺序被改变,Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。
如果使用key这个功能可以有效的提高渲染的效率;key一般使用在遍历完后,又增、减集合元素的时候更有意义。
但是要实现这个功能,你需要给Vue一些提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的且唯一的 id。 也就是key是该的唯一标识。
示例:
<ul>
<li v-for="(item,index) in items" :key="index"></li>
</ul>
-
这里使用了一个特殊语法: :key=""
后面会讲到,它可以让你读取vue中的属性,并赋值给key属性 -
这里绑定的key是数组的索引,应该是唯一的
v-if 和 v-show
基本使用
v-if
,顾名思义,条件判断。当得到结果为true时,所在的元素才会被渲染。
语法:
v-if="布尔表达式"
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">点我</button>
<h2 v-if="show">
hello vuejs.
</h2>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
show: true
}
});
</script>
</body>
</html>
与 v-for 结合
当v-if
和v-for
出现在一起时,v-for
优先级更高。也就是说,会先遍历,再判断条件。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">点我</button>
<h2 v-if="show">
hello vuejs.
</h2>
<hr>
<ul>
<li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
show: true,
users: [
{"name": "北京大学", "age": 8, "gender": "男"},
{"name": "清华大学", "age": 12, "gender": "女"},
{"name": "复旦大学", "age": 4, "gender": "男"},
{"name": "南开大学", "age": 2, "gender": "女"}
]
}
});
</script>
</body>
</html>
v-else
可以使用 v-else
指令来表示 v-if
的“else 块
”:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">点我</button>
<h2 v-if="show">
hello vuejs.
</h2>
<hr>
<ul v-if="show">
<li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
<li v-else style="background-color: blue">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
show: true,
users: [
{"name": "北京大学", "age": 8, "gender": "男"},
{"name": "清华大学", "age": 12, "gender": "女"},
{"name": "复旦大学", "age": 4, "gender": "男"},
{"name": "南开大学", "age": 2, "gender": "女"}
]
}
});
</script>
</body>
</html>
v-else
元素必须紧跟在带 v-if
或者 v-else-if
的元素的后面,否则它将不会被识别。 v-else-if
,顾名思义,充当 v-if 的“else-if 块
”,可以连续使用:
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
类似于 v-else
, v-else-if
也必须紧跟在带 v-if 或者 v-else-if 的元素之后。
v-show
另一个用于根据条件展示元素的选项是 v-show
指令。用法大致一样:
<h1 v-show="ok">Hello!</h1>
不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 只是简单地切换元素的 CSS 属性display
。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vuejs测试</title>
<script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<button @click="show = !show">点我</button>
<h2 v-if="show">
hello vuejs.
</h2>
<hr>
<ul v-if="show">
<li v-for="(user,index) in users" v-if="user.gender=='女'" :key="index" style="background-color: deeppink">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
<li v-else style="background-color: blue">
{{index}} -- {{user.name}} -- {{user.age}} -- {{user.gender}}
</li>
</ul>
<hr>
<h2 v-show="show">
你好,世界!
</h2>
</div>
<script type="text/javascript">
let app = new Vue({
el: "#app",
data: {
show: true,
users: [
{"name": "北京大学", "age": 8, "gender": "男"},
{"name": "清华大学", "age": 12, "gender": "女"},
{"name": "复旦大学", "age": 4, "gender": "男"},
{"name": "南开大学", "age": 2, "gender": "女"}
]
}
});
</script>
</body>