什么是Vue?
- Vue 是一套前端框架,免除原生JavaScript中的DOM操作,简化书写
- 基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上
- 官网: Vue.js
MVVM思想:
本质上是MVC的改进版,分离视图和模型
框架:是一个半成品软件,是一套可重用的、通用的、软件基础代码模型。基于框架进行开发,更加快捷、更加高效
Vue快速入门
- 新建HTML页面,引入Vue.js文件
<script src="js/vue.js"></script>
- 在JS代码区域,创建Vue核心对象,定义数据模型
<script> new Vue({ el: "#app", data: { message: "Hello Vue!" } }) </script>
- 编写视图
<div id="app"> <input type="text" v-model="message"> {{ message }} </div>
插值表达式
形式:{{ 表达式 }}
内容可以是: 变量 三元运算符 函数调用 算术运算
常用指令
指令:HTML 标签上带有 v- 前缀 的特殊属性,不同指令具有不同含义。例如:v-if,v-for…
v-bind、v-model
v-bind:可省略成:
注意事项:通过v-bind或者v-model绑定的变量,必须在数据模型中声明
v-on
v-on:可省略成@
v-if、v-else-if、v-else
v-show
v-for
通过Vue完成表格数据的渲染展示
示例:
<body>
<div id="app">
<table border="1" cellspacing="0" width="60%">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr align="center" v-for="(user, index) in users">
<td>{{index + 1}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td><span v-if="user.gender == 1">男</span>
<span v-if="user.gender == 2">女</span></td>
<td>{{user.score}}</td>
<td>
<span v-if="user.score >= 85">优秀</span>
<span v-else-if="user.score >= 60">及格</span>
<span style="color: red;" v-else>不及格</span>
</td>
</tr>
</table>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
users: [{
name: "Tom",
age: 20,
gender: 1,
score: 78
}, {
name: "Rose",
age: 18,
gender: 2,
score: 86
}, {
name: "Jerry",
age: 26,
gender: 1,
score: 90
}, {
name: "Tony",
age: 30,
gender: 1,
score: 52
}]
},
methods: {
},
})
</script>
效果:
Vue生命周期
- 生命周期:指一个对象从创建到销毁的整个过程
- 生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)
mounted生命周期方法
mounted:挂载完成,Vue初始化成功,HTML页面渲染成功。(发送请求到服务端,加载数据)