JavaWeb开发学习笔记_Vue
- Vue快速入门
- 常用指令
- v-bind和v-model
- v-on
- vif和vshow
- vfor
- 案例
- 生命周期
- 参考
Vue快速入门
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue-快速入门</title>
<!-- 引入vue.js文件 -->
<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", // vue接管区域
// 定义数据模型
data:{
message: "Hello Vue"
}
})
</script>
</html>
常用指令
v-bind和v-model
<body>
<div id="app">
<!-- 通过v-bind或v-model绑定的变量, 必须在数据模型中声明 -->
<a v-bind:href="url">链接1</a>
<!-- 简写 -->
<a :href="url">链接2</a>
<input type="text" v-model="url">
</div>
</body>
<script>
new Vue({
el: "#app",
data:{
url: "https://www.baidu.com"
},
})
</script>
v-on
<body>
<div id="app">
<input type="button" value="按钮1" v-on:click="handle()">
<!-- 简写 -->
<input type="button" value="按钮2" @click="handle()">
</div>
</body>
<script>
new Vue({
el: "#app",
methods: {
handle: function(){
alert("我被点击了");
}
}
})
</script>
vif和vshow
- v-else-if: 根据条件渲染元素
- v-show: 根据条件切换元素的display属性
<body>
<div id="app">
<input type="text" v-model="age"> <br>
<span v-if=" age<=35 ">年轻人</span>
<span v-else-if=" age<=60 ">中年人</span>
<span v-else>老年人</span> <br>
<span v-show=" age<=35 ">年轻人</span>
<span v-show=" age>35&&age<=60 ">中年人</span>
<span v-show=" age>60 ">老年人</span>
</div>
</body>
<script>
new Vue({
el: "#app",
data:{
age:20
}
})
</script>
vfor
<body>
<div id="app">
<div v-for="addr in addrs"> {{addr}} </div>
<hr>
<div v-for="(addr,index) in addrs"> {{index+1}}: {{addr}} </div>
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
addrs: ['北京', '上海', '广州', '深圳', '成都', '杭州']
}
})
</script>
案例
...
<head>
...
<script src="js/vue.js"></script>
<style>
td {
text-align: center;
}
</style>
</head>
<body>
<div id="app">
<table border="1px" cellspacing="0" width="600px">
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
<th>成绩</th>
<th>等级</th>
</tr>
<tr 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>女</span>
</td>
<td>{{user.score}}</td>
<td>
<span v-if="user.score >= 85">优秀</span>
<span v-else-if="user.score >= 60">及格</span>
<span v-else style="color: red;">不及格</span>
</td>
</tr>
</table>
</div>
</body>
<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
}]
}
})
</script>
</html>
生命周期
vue的生命周期有8个阶段:
- beforeCreate: 创建前
- created: 创建后
- beforeMount: 载入前
- mounted: 挂载完成
- beforeUpdate: 更新前
- updated: 更新后
- beforeDestroy: 销毁前
- destroyed: 销毁后
<body>
<div id="app">
</div>
</body>
<script>
new Vue({
el: "#app",
data: {
},
mounted() {
alert("Vue挂载完毕, 发送请求获取数据")
},
methods: {
},
})
</script>
参考
黑马程序员. JavaWeb开发教程
