day3--常用渲染&生命周期

最新推荐文章于 2024-07-29 11:53:27 发布

qq_53446980

最新推荐文章于 2024-07-29 11:53:27 发布

阅读量130

点赞数

分类专栏： Vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/qq_53446980/article/details/120713991

版权

Vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

条件渲染

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>

qq_53446980

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
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"&gt
复制链接

扫一扫

专栏目录