一. 简介
Vue 是一套前端框架,免除原生JavaScript中的DOM操作,简化书写
基于MVVM(Model-View-ViewMode)思想,实现数据的双向绑定,将编程的关注点放在数据上
二. 快速入门
创建HTML页面,引入Vue.js文件
在JS代码区域,创建Vue核心对象,进行数据绑定
<script>
//创建Vue核心对象
new Vue({
el:"#app",
data:function(){
return{
username:""
}
}
});
</script>
编写视图
<div id="app">
<input name="username" v-model="username">
<!--插值表达式-->
{{username}}
</div>
结果展示
在框内输入什么,框外视图也会实时对应改变
三.Vue的常用指令
指令: HTML标签上带有v-前缀的特殊属性, 不同指令具有不同的含义
v-bind 为HTML标签绑定属性值,如设置 href,css样式等
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<a v-bind:href="url">点击一下</a><br>
<!--简化-->
<a :href="url">点击一下</a>
</div>
<script src="js/vue.js"></script>
<script>
//创建Vue核心对象
new Vue({
el:"#app",
data:function(){
return{
username:"",
url:"https://www.baidu.com"
}
}
});
</script>
</body>
</html>
v-model 在表单元素上创建双向数据绑定
v-on 为HTML标签绑定事件
<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="button" value="按钮"v-on:click="show()"><br>
<input type="button" value="按钮"@click="show()">
</div>
<script src="js/vue.js"></script>
<script>
//创建Vue核心对象
new Vue({
el:"#app",
methods:{
show(){
alert("已点击");
}
}
});
</script>
</body>
</html>
v-if 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-else-if 条件性的渲染某元素,判定为true时渲染,否则不渲染
v-show 根据条件展示某元素,区别在于切换的是display属性的值
<!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>
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}} <br>
</div>
<hr>
<div v-for="(addr,i) in addrs">
{{i+1}}--{{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:3,
addrs:["北京","上海","西安"]
}
},
methods:{
show(){
alert("我被点了...");
}
}
});
</script>
</body>
</html>
四. Vue生命周期
生命周期的八个阶段: 每触发一个生命周期事件,会自动执行一个生命周期方法(钩子)
状态: 阶段周期
beforeCreate: 创建前
created: 创建后
beforeMount: 载入前
mounted: 挂载完成
beforeUpdate: 更新前
updated: 更新后
beforeDestroy: 销毁前
destroyed:: 销毁后
mounted: 挂载完成, Vue初始化成功, HTML页面渲染成功--->发送异步请求,加载数据
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <input name="username" v-model="username"> <!--插值表达式--> {{username}} </div> <script src="js/vue.js"></script> <script> //创建Vue核心对象 new Vue({ el:"#app", /*data:function(){ return{ username:"" } }*/ //简化 data(){ return{ username:"" } }, mounted(){ alert("加载完成") } }); </script> </body> </html>