条件渲染
v-if='表达式’
v-else-if=‘表达式’
v-else=‘表达式’
适用于切换频率较低的场景
特点：不展示的DOM元素直接移除
以上三个一起使用时，要求结果不能被打断
v-show=‘表达式’
适用于切换频率较高的场景
特点:不展示的DOM元素未被移除，仅仅是使用样式隐藏掉（display:none）
v-if和v-show的区别：使用v-if元素不一定能够获取到，使用v-show时元素一定能获取到
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件渲染</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="root">
<h2>条件渲染</h2>
<hr>
<h3 v-show='show'>hello briup!</h3>
<h3 v-if='1==1'>你好 杰普</h3>
<h3 v-if='1==1'>你好 tom</h3>
<h3 v-if='1==1'>你好 terry</h3>
</div>
</body>
<script>
const vm=new Vue({
el:'#root',
data:{
show:true
}
})
</script>
</html>
列表渲染
v-for="(item,index) in xxx" :key=“yyy”
用于展示列表 数据
? 可以对数组遍历 、 对象遍历、 字符串遍历、 次数遍历
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>列表渲染</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h1>列表渲染--人员信息(数组的遍历)</h1>
<ul>
<li v-for='p in persons' :key='p.id'>{{p.name}}--{{p.age}}</li>
</ul>
<h1>列表渲染--汽车信息(对象的遍历)</h1>
<ul>
<li v-for='p,index,a,b in cars' :key='index'>{{p}}--{{index}}--{{a}}-{{b}}</li>
</ul>
<h2>字符串遍历</h2>
<ul>
<li v-for='(char,index) in str'>{{char}}---{{index}}</li>
</ul>
<h2>次数的遍历</h2>
<ul>
<li v-for='(item,index) in 5'>{{item}}---{{index}}</li>
</ul>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
persons:[
{id:1,name:'张三',age:12},
{id:2,name:'李四',age:13},
{id:3,name:'王五',age:14},
],
cars:{
name:'奥迪',
price:'70w',
color:'黑色'
},
str:'hello',
},
})
</script>
</html>
其他渲染
v-text 向其所在的节点中渲染文本内容
? 与插值语法的区别：v-text会替换掉节点中的内容，{{xxx}}不会
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-test</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>hello,{{name}}</h2>
<h2 v-text='name'>hello,</h2>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
name:'briup'
}
})
</script>
</html>
v-html 向其所在的节点中渲染html
? 与v-text的区别是，v-text不会解析里面的内容，v-html会解析里面的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-html</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>hello,{{name}}</h2>
<h2 v-html='name'>hello,</h2>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
name:'<h3>hello briup</h3>'
}
})
</script>
</html>
v-once v-once所在节点初次动态渲染后，就视为静态内容
? 之后的数据改变不会引起v-once所在结构的更新，可以用于优化性能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>v-once</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2 v-once>this is old {{n}}</h2>
<h2>this is {{n}}</h2>
<button @click='n++'>点击n加一</button>
<button @click='n--'>点击n减一</button>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
n:0
},
})
</script>
</html>
?
生命周期
别名：生命周期回调函数，生命周期函数，钩子函数
Vue在关键时刻帮我们调用的一些特殊名称的函数
生命周期函数的名字不能更改，但函数的具体内容是程序员根据需求编写的
生命周期函数中的this指向是vm或组件实例对象
四个阶段，八个过程
1.创建
实例创建前beforeCreate
? 无法通过vm访问到data中的数据，methods中的方法
实例创建后Created
? 可以通过vm访问到data中的数据，methods中的方法
2.挂载
? 挂载前 模板比那一完成但尚未挂载到页面
? 挂载后 编译完成并且挂载到了页面
3.更新
? 更新前 data和页面不同步
? 更新后 data和页面同步
4.销毁
? 销毁前 必须手动触发调用vm.$destroy()
? 销毁后
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue生命周期</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<h2>this is {{n}}</h2>
<button @click='add'>点击加一</button>
<button @click='bye'>销毁实例</button>
</div>
</body>
<script>
new Vue({
el: '#app',
data: {
n: 1
},
methods: {
add() {
this.n++
},
bye(){
this.$destroy()
}
},
beforeCreate() {
console.log('beforecreate');
},
created() {
console.log('created');
},
beforeMount() {
console.log('beforeMount');
},
mounted() {
console.log('mounted');
console.log(this.n);
},
beforeUpdate() {
console.log('beforeUpdate');
},
updated() {
console.log('updated');
},
beforeDestroy() {
console.log('beforeDestroy')
console.log(this.n);
},
destroyed() {
console.log('destroyed')
},
})
</script>
</html>
|