目录
2.在js代码区域,创建Vue核心对象,进行数据绑定(三种方式)
4.显示效果(在input内写入文字,插值表达式会自动在旁边显示,写啥显示啥)
一.Vue概述与快速入门
概述:
1.Vue是一套前端框架,免除了原生Javascript中的DOM操作,简化书写
2.Vue基于MVVM(Model-View-ViewModel)思想,实现数据的双向绑定,将编程的关注点放在数据上
3.下面的小案例是如何实现数的绑定
1.新建HTML页面,引入Vue.js文件
<script src="js/vue.js"></script>
2.在js代码区域,创建Vue核心对象,进行数据绑定(三种方式)
方式一:
new Vue({
el:"#app", //el用来指定vue的作用范围,里面是用id选择器来选定id为app的....
data(){
return{
username:""
}
}
});
方式二:
new Vue({
el:"#app",
data:{username:""}
});
方式三:
new Vue({
el:"#app",
data:function (){
return{
username:""
}
}
});
3.编写视图
<div id="app">
<input v-model="username">
<!--插值表达式-->
{{username}}
</div>
4.显示效果(在input内写入文字,插值表达式会自动在旁边显示,写啥显示啥)
二.Vue的常用指令
1.指令:HTML标签上带有v-前缀的特殊属性,不同的指令具有不同的涵义,例如v-if,v-for
2.常用指令:
指令 作用 v-bind 为HTML标签绑定属性值,如设置href,css样式等 v-model 在表单元素上设置双向数据绑定 v-on 为HTML标签绑定事件 v-if 条件性的渲染某元素,判断true是渲染,否则不渲染 v-else 条件性的渲染某元素,判断true是渲染,否则不渲染 v-else-if 条件性的渲染某元素,判断true是渲染,否则不渲染 v-show 根据条件显示某元素,区别在于切换的是display属性的值 v-for 列表渲染,遍历容器的元素或者对象的属性
1.v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--1.引入文件-->
<script src="js/vue.js"></script>
<body>
<div id="app">
<a v-bind:href="url">点击一下</a>
<!--简化版-->
<a :href="url">再点击一下</a>
<input v-model="url"><!--实现数据的双向绑定,更改url-->
</div>
<script>
new Vue({
el:"#app",
data(){
return{
username:"",
url:"https://www.baidu.com"
}
}
});
</script>
</body>
</html>
2.v-model
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input v-model="username">
<!--插值表达式-->
{{username}}
</div>
<!--1.引入文件-->
<script src="js/vue.js"></script>
<script>
<!--2.创建vue核心对象(第一种方式)中等复杂度-->
new Vue({
el:"#app", //el用来指定vue的作用范围,里面是用id选择器来选定id为app的....
data(){
return{
username:""
}
}
});
</script>
</body>
</html>
3.v-on
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--1.引入文件-->
<script src="js/vue.js"></script>
<body>
<div id="app">
<input type="button" value="确认按钮" v-on:click="show()">
<input type="button" value="再次确认按钮" @click="show()">
</div>
<script>
new Vue({
el:"#app",
data(){
return{
username:"",
url:"https://www.baidu.com"
}
},
methods: {
show(){
alert("已点击")
}
}
});
</script>
</body>
</html>
4.v-if,v-else,v-else-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-if="count == 3">div1</div>
<div v-else-if="count == 4">div2</div>
<div v-else>div3</div>
<hr>
<div v-show="count == 3">div v-show</div>
<br>
<input v-model="count">
</div>
<script src="js/vue.js"></script>
<script>
//1. 创建Vue核心对象
new Vue({
el:"#app",
data(){
return {
username:"",
url:"https://www.baidu.com",
count:3
}
},
methods:{
show(){
alert("我被点了...");
}
}
});
</script>
</body>
</html>
5.v-for
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-for="addr in addrs">
{{addr}}
</div>
<hr>
<div v-for="(addr,i)in addrs">
<!--i表示索引-->
{{i}}+{{addr}}<br>
</div>
</div>
<script src="js/vue.js"></script>
<script>
//1. 创建Vue核心对象
new Vue({
el:"#app",
data(){
return {
username:"",
url:"https://www.baidu.com",
count:'',
addrs:[1,2,3,4,5]
}
},
methods:{
show(){
alert("我被点了...");
}
}
});
</script>
</body>
</html>
三.Vue的生命周期
生命周期的八个阶段(在后期springBoot的时候会详细学习):每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)
状态 | 阶段周期 |
beforeCreate | 创建前 |
created | 创建后 |
beforeMount | 载入前 |
mounted | 挂载完成 |
beforeUpdate | 更新前 |
updated | 更新后 |
beforeDestroy | 销毁前 |
destroyed | 销毁后 |
我们在学习Vue的时候,只需要知道一个就是mounted:挂载完成,Vue初始化成功,HTML页面渲染成功(发送异步请求,加载数据)
实例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<div v-for="addr in addrs">
{{addr}}
</div>
</div>
<script src="js/vue.js"></script>
<script>
//1. 创建Vue核心对象
//在此data与mounted的方法都是简化书写的,为了更简便的观看
new Vue({
el:"#app",
data(){
return {
username:"",
url:"https://www.baidu.com",
count:'',
addrs:[1,2,3,4,5]
}
},
methods:{
show(){
alert("我被点了...");
}
},
/* 完整书写
mounted:function (){
},*/
mounted(){
alert("加载完成...");
}
});
</script>
</body>
</html>