什么是Vue
Vue是一套前端框架,免除原生JavaScript中的DOM操作,简化书写。
基于MVVM思想,实现数据的双向绑定,将编程的关注点放在数据上。
Vue.js文件的下载
Vue快速入门
1.新建HTML页面,引入Vue.js文件
2.在JS代码区域,创建Vue核心对象,定义数据模型
3.编写视图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src='js/vue.js'></script>
</head>
<body>
<div id="app">
<input type="text" v-model="message">
{{message}}
</div>
</body>
<script>
// 定义Vue
new Vue({
el:"#app",
data:{
message:"Hello"
}
})
</script>
</html>
插值表达式:{{}}
Vue常用指令
指令 | 作用 |
v-bind | 为HTML标签绑定属性值,如设置href,css样式等 |
v-model | 在表单元素上创建双向数据绑定 |
v-on | 为HTML标签绑定事件 |
v-if | |
v-else-if | 条件性的渲染某元素,判定为true时渲染,否则不渲染 |
v-else | |
v-show | 根据条件展示某元素,区别在于切换的是display属性的值 |
v-for | 列表渲染,遍历容器的元素或者对象的属性 |
<!-- v-bind v-model 的例子 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src='js/vue.js'></script>
</head>
<body>
<div id="app">
<a v-bind:href="url">1</a>
<a v-bind:href="url">2</a>
<input type="text" v-model="url">
</div>
</body>
<script>
// 定义Vue
new Vue({
el:"#app",
data:{
url:"https://www.baidu.com"
}
})
</script>
</html>
<!-- v-on -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src='js/vue.js'></script>
</head>
<body>
<div id="app">
<input type="button" value="点一下" v-on:click="handle()">
</div>
</body>
<script>
// 定义Vue
new Vue({
el:"#app",
data:{
},
methods:{
handle:function(){
alert("你~干~嘛~")
}
}
})
</script>
</html>
<!-- v-show v-if -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src='js/vue.js'></script>
</head>
<body>
<div id="app">
年龄<input type="text" v-model="age">经判定,为
<span v-if="age<=35">年轻人(小于35)</span>
<span v-else-if="age<=60&&age>35">中年人(小于35,大于60)</span>
<span v-else="age>60">老年人(大于60)</span>
</br>
年龄<input type="text" v-model="age">经判定,为
<span v-show="age<=35">年轻人(小于35)</span>
<span v-show="age<=60&&age>35">中年人(小于35,大于60)</span>
<span v-show="age>60">老年人(大于60)</span>
</div>
</body>
<script>
// 定义Vue
new Vue({
el:"#app",
data:{
age:30
},
methods:{
}
})
</script>
</html>
<!-- v-for -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src='js/vue.js'></script>
</head>
<body>
<div id="app">
<div v-for="(addr,index) in addrs">{{addr}}</div>
<hr>
<div v-for="(addr,index) in addrs">{{index+1}}:{{addr}}</div>
</div>
</body>
<script>
// 定义Vue
new Vue({
el:"#app",
data:{
addrs:["辽宁","上海","北京"]
},
methods:{
}
})
</script>
</html>
Vue生命周期
Vue对象从创建到销毁的整个过程。
生命周期的八个阶段:每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)
状态 | 阶段周期 |
beforeCreate | 创建前 |
created | 创建后 |
beforeMount | 载入前 |
mounted | 挂载完成 |
beforeUpdate | 更新前 |
updated | 更新后 |
beforeDestroy | 销毁前 |
destroyed | 销毁后 |
<!-- mounted演示 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src='js/vue.js'></script>
</head>
<body>
<div id="app">
</div>
</body>
<script>
// 定义Vue
new Vue({
el:"#app",
data:{
},
methods:{
},
mounted() {
alert("vue挂载完成,发送请求到服务端")
}
})
</script>
</html>
案例
<!-- 通过Vue完成表格数据的渲染展示 -->
<!-- gender:1男 2女 -->
<!-- score:>=85优秀 >=60及格 <60不及格 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src='js/vue.js'></script>
</head>
<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-else="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>
// 定义Vue
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>
</html>