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