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>Document</title>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
</head>
<body>
<!-- 宿主文件 -->
<div id="app">
{{tx}}
</div>
<script src="./js/vue.js"></script>
<script>
// 1、创建Vue实例
const app = new Vue({
el: "#app", //指定宿主文件
data:{
tx: "Hello Vue！"
}
})
setTimeout(()=>{
app.tx = "你好 Vue"
},1000)
</script>
</body>
</html>
1、vue设计思想
数据驱动模式
MVVM模式的践行者
MVVM模式三要素：响应式、模板引擎、渲染
响应式：如何监听数据变化？
模板引擎：如何编写和解析？
渲染：如何将模板转换为html？
二、基本插值表达式
1、数据基本类型和字符串
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue语法</title>
</head>
<body>
<div id="container">
编号：{{code}}
欢迎：{{str}}
</div>
</body>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el:"#container",
data:{
code: 10,
str:"Hello Vue"
}
})
</script>
</html>
2、对象类型
<body>
<div id="container">
成员：姓名：{{stu.name}}
年龄：{{stu.age}}
</div>
</body>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el:"#container",
data:{
code: 10,
str:"Hello Vue",
stu:{
name:"张三",
age:25,
sex:'0', //0表示女 1表示男
}
}
})
</script>
3、条件与循环
3.1、条件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue语法</title>
</head>
<body>
<div id="container">
<!-- s- 条件判断 -->
<p v-if="stu.sex=='F'">女</p>
<!-- <p v-if="stu.sex=='M'">男</p> -->
<p v-else>男</p>
<!-- e - 条件判断 -->
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#container",
data: {
stu: {
name: "张三",
age: 25,
sex: 'M', //M表示男 F表示女
},
}
})
</script>
</html>
v-if与v-show
v-show的条件条件判断如果不存在控制的是样式的display样式
3.2、循环
v-for
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue语法</title>
</head>
<body>
<div id="container">
<!-- s-循环 -->
<table border="1" cellspacing="0">
<tr>
<th>编号</th>
<th>学号</th>
<th>姓名</th>
<th>头像</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr v-for="i,index in stus">
<td>{{index}}</td>
<td>{{i.stuNum}}</td>
<td>{{i.stuName}}</td>
<td>
<img v-bind:src="i.img" alt="" style="width: 100px;height: 100px;">
</td>
<td>
<p v-if="i.stuSex=='M'">男</p>
<p v-if="i.stuSex=='F'">女</p>
</td>
<td>
{{i.stuAge}}
</td>
</tr>
</table>
<!-- e-循环 -->
</div>
</body>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#container",
data: {
stus: [{
stuNum: "001",
stuName: "张三",
stuSex: "M",
stuAge: 25,
img: "img/01.jpg"
},
{
stuNum: "002",
stuName: "李四",
stuSex: "M",
stuAge: 22,
img: "img/03.jpg"
},
{
stuNum: "001",
stuName: "王五",
stuSex: "F",
stuAge: 20,
img: "img/03.jpg"
},
]
}
})
</script>
</html>
4、数组下标
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue语法</title>
</head>
<body>
<div id="container">
爱好：{{hobby[0]}}
</div>
</body>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#container",
data: {
hobby:['篮球','游泳','足球'],
}
})
</script>
</html>
5、运算
直接运算
- {{age+10}}
三元表达式
- {{age>16?'成年'：'未成年'}}
6、从方法中获取
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue语法</title>
</head>
<body>
<div id="container">
{{say()}}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var vm = new Vue({
el: "#container",
data: {
},
methods:{
say(){
return "方法"
}
}
})
</script>
</html>
三、Vue指令
数据双向绑定
- v-model
- 只能使用在表单输入标签 v-model:value 可简写为v-model
- v-once
- 在created(),和beforeMount()中改变data中初始化值时， v-once绑定的数据也相应变化
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue语法</title>
</head>
<body>
<div id="container">
欢迎：{{str}} <br />
<!-- s-数据双向绑定 -->
<input type="text" name="" id="" v-model:value="str" />
<p v-once>{{str}}</p>
<!-- e-数据双向绑定 -->
</body>
<script src="./js/vue.js"></script>
<script>
var vm = new Vue({
el: "#container",
data: {
str: "Hello Vue",
}
})
</script>
</html>
属性绑定 v-bind： 简写 ：
数据值绑定 v-text v-html
事件绑定 v-on 简写 ： @
四、Vue实例
每个使用vue进行数据渲染的网页文档都需要创建一个vue实例--viewModel
1、vue实例的生命周期
及实例从创建到销毁的过程
- 创建vue实例（初始化data、加载el）
- 数据挂载（将vue实例data中的数据渲染到网页html标签））
- 重新渲染（当vue的data数据发生变化时，重新渲染到html标签）
- 销毁实例
2、钩子函数
为了便于开发者在vue实例生命周期的不同阶段进行特定的操作，vue在生命周期的四个阶段前后分别提供了一个函数，这个函数开发者无需调用，当vue实例到达生命周期的指定阶段会自动调用对应的函数
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<div id="container">
<label v-once>{{str}}</label><br />
<label>{{str}}</label><br/>
<input type="text" v-model="str" />
</div>
<script type="text/javascript">
var vm = new Vue({
el: "#container",
data: {
str:'从前有座山'
},
beforeCreate: function() {
//1.data初始化之前执行，不能操作data
},
created: function() {
//2.data初始化之后执行，模板加载之前，可以修改/获取data中的值
console.log(this.str);
//this.str = "山里有座庙";
},
beforeMount: function() {
//3.模板加载之后，数据初始渲染（挂载）之前，可以修改/获取data中的值
// this.str = "庙里有口井";
},
mounted: function() {
//4.数据初始渲染（挂载）之后，可以对data中的变量进行修改，但是不会影响v-once的渲染
// this.str = "井里有只蛙";
},
beforeUpdate: function() {
//5.数据渲染之后，当data中的数据发生变化触发重新渲染，渲染之前执行此函数
// data数据被修改之后，重新渲染到页面之前
// console.log("-----" + this.str);
// this.str = "从前有座山2";
},
updated: function() {
//6.data数据被修改之后，重新渲染到页面之后
// this.str = "从前有座山3";
},
beforeDestroy: function() {
//7.实例销毁之前
},
destroyed: function() {
//8.实例销毁之后
}
});
</script>
</body>
</html>
