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