[JavaScript知识库] day3--常用渲染&生命周期

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> day3--常用渲染&生命周期 -> 正文阅读

[JavaScript知识库]day3--常用渲染&生命周期

条件渲染

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>
        <!-- v-if -->
        <!-- <h3 v-if='1==2'>你好 杰普</h3>
        <h3 v-else-if='1==2'>你好 tom</h3>
        <h3 v-else>你好  terry</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>张三   12</li>
            <li>李四   13</li>
            <li>王五   14</li> -->
            <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>
        <!-- v-text会替换掉（覆盖）原本的内容 -->
        <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>
        <!-- v-html 会解析由html生成的内容 -->
        <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',
        // template: '<div>
        //     <h2>this is {{n}}</h2>
        //     <button @click='add'>点击加一</button>
        //     </div>',
        data: {
            n: 1
        },
        methods: {
            // 点击加一
            add() {
                this.n++
            },
            bye(){
                this.$destroy()
            }
        },
        //实例创建完成之前
        beforeCreate() {
            console.log('beforecreate');
            // console.log(this.n);//undefined
            // this.add()//not a function

        },
        // 实例创建完成
        created() {
            console.log('created');
            // console.log(this.n);
            // this.add();
            // debugger//页面还没有完成解析
        },
        // 模板编译完成之后但尚未挂载到页面
        beforeMount() {
            console.log('beforeMount');
            // debugger//页面尚未解析
        },
        //data,methods,真实DOM也加载完成  编译完成并且 挂载到了页面上
        mounted() {
            console.log('mounted');
            console.log(this.n);
            // debugger
        },
        // 数据更新前，data和页面不同步
        beforeUpdate() {
            console.log('beforeUpdate');
            
        },
        // 数据更新后，data和页面同步
        updated() {
            console.log('updated');
            // debugger
        },
        // 销毁前   必须手动触发调用vm.$destroy()
        beforeDestroy() {
            console.log('beforeDestroy')
            console.log(this.n);
            // debugger
        },

        // 销毁后
        destroyed() {
            console.log('destroyed')
        },


    })
</script>

</html>