vue生命周期及模板语法

最新推荐文章于 2022-11-20 21:26:21 发布

蜡笔小连

最新推荐文章于 2022-11-20 21:26:21 发布

阅读量209

点赞数 1

文章标签： vue.js javascript

本文链接：https://blog.csdn.net/jyyqxrm/article/details/120693472

版权

什么是vue的生命周期

从vue实例创建到虚拟dom产生再到数据绑定数据监听数据渲染以及销毁的整个过程
生命周期有八个阶段：
beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed
官方图示：
在这里插入图片描述

生命周期钩子函数

1.实例初始化阶段
beforeCreate vue实例初始化完成之前，完成了vue事件、属性的初始化，此时还访问不到vue实例中的data，methods。
created vue实例初始化完成，可以访问实例内部的数据和方法
2.挂载阶段
beforeMount 完成了模板的解析，但是数据/dom节点没有绑定到模板上
mounted vm.$el虚拟dom替换el dom，完成了数据绑定、dom渲染
3.更新阶段
beforeUpdate 数据已经修改，虚拟dom也构建完毕，但是没有渲染到页面上
updated 更新过后的虚拟dom节点，成功渲染到页面上
4.销毁阶段
beforeDestroy vue实例销毁之前，还可以访问实例
destroyed vue实例上绑定的事件、监听器、子组件销毁完毕，访问不到vue实例了

模板语法

文本插值
{{msg}} 用双大括号将data数据模型中的字段渲染到页面中
{{ msg + ‘Nihao’ }} 双大括号内部可以放简单的js表达式

常用指令
1）v-once 元素和组件只渲染一次，不会随着数据的改变而改变；该指令后面不需要跟任何表达式
2）v-html 直接通过{{}}会将html代码一起输出，如果需要显示标签语义，则使用v-html
该指令后面往往会跟一个string类型，会将string的html解析出来并且渲染

<!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="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <p>{{msg}}</p>
        <p v-html="msg"></p>
        <p>{{url}}</p>
        <p v-html="url"></p>
    </div>
    <script>
        let vm=new Vue({
            el:'#app',
            data:{
                msg:'<h3>hello world</h3>',
                url:'<a href="http://www.baidu.com">百度一下</a>',
            },
        })
    </script>
</body>
</html>

运行结果
3）v-text 作用与{{}}相似，都是用于将数据显示在界面中，用法同v-html
4）v-bind 动态绑定属性（缩写为:）
比如：动态绑定a元素的href属性，动态绑定img元素的src属性…

<!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="../js/vue.js"></script>
</head>
<body>
    <div id="app">
    	<!--动态绑定-->
        <a v-bind:href="aHref">百度一下</a>
        <div :title="title">div</div>
    </div>
    <script>
        let vm=new Vue({
            el:'#app',
            data:{
                msg:'你好啊',
                aHref:'https://www.baidu.com',
                title:'hello world'
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
5）v-on 动态绑定事件监听（简写@）
例如：鼠标事件，键盘事件…

	<div id="app">
        <h3>{{counter}}</h3>
        <button v-on:click="counter++">+</button>
        <!-- 复杂的事件可以写在methods中 -->
        <button @click="decrement">-</button>
    </div>
    <script>
        let vm=new Vue({
            el:'#app',
            data:{
                counter:0
            },
            methods:{
                decrement(){
                    this.counter--;
                }
            }
        })
    </script>

v-on参数：当通过methods中定义方法供@click调用时，需要注意参数问题
如果该方法不需要参数，则方法后的()可以不添加
如果需要同时传入某个参数，同时需要event时，可以通过$event传入事件

条件渲染
v-if 表达式为false时，压根不会有对应的元素在DOM中，表达式为true的时候渲染使用v-if属性的元素，否则使用v-else渲染
v-show v-show（切换css样式中display属性，表达式为false时display为none而已），频繁切换css样式，使用v-show

v-show 与 v-if 的区别 :
v-show 不支持 v-else
v-show 不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做；直到条件第一次变为真时，才会开始渲染条件块。
v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

<!-- v-if对应的是元素的添加或删除，满足条件添加元素，不满足条件删除元素 -->
<!--v-show满足条件对应的是元素的显示display:block;不满足条件对应的是元素的隐藏display:none-->
	<div id="app">
        <h3 v-if="isLogin">登录成功，欢迎你</h3>
        <h3 v-else>请登录</h3>
        <div>
            <button v-if="isLogin" @click="isLogin=false">退出</button>
            <button v-else @click="isLogin=true">登录</button>
        </div>
        <div>
            <button v-show='false' @click='isLogin=false'>退出</button>
            <button v-show='true' @click='isLogin=true'>登录</button>
        </div>
    </div>
    <script>
        let vm=new Vue({
            el:'#app',
            data:{
                isLogin:false
            },
        })
    </script>

列表渲染
v-for 用于将列表数据进行渲染。
v-for 指令需要使用 item in items 形式的特殊语法，相当于js中的for

	<div id="app">
        <ul>
        	<!--数组-->
            <li v-for="(item,index) in categories">
                索引:{{index}}
                编号:{{item.id}}
                名称:{{item.name}}
            </li>
        </ul>
        <ul>
        	<!--获取对象时，如果只获取一个值，则获取的为value-->
        	<!--获取key和value，格式(value,key)-->
            <li v-for="item in obj">
                {{item}}
            </li>
        </ul>    
    </div>
    <script>
        let vm=new Vue({
            el:'#app',
            data:{
                categories:[
                    {id:1,name:'a'},
                    {id:2,name:'b'},
                    {id:3,name:'c'},
                    {id:4,name:'d'}
                ],
                obj:{
                    name:'zs',
                    age:12,
                    gender:'男'
                }
            },            
        })
    </script>

动态绑定class和style
style绑定
操作元素的class列表和内联样式是数据绑定的一个常见需求，因为它们都是attribute，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，Vue做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。
class绑定
操作元素的class列表和内联样式是数据绑定的一个常见需求，因为它们都是attribute，所以我们可以用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将v-bind用于class和style时，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="../js/vue.js"></script>
    <style>
        .box1{
            width: 100px;
            height: 100px;
            border: 1px solid #333;
        }
        .box2{
            border-radius: 5px;
            box-shadow: 0 0 10px #5ebe63;
            font-size: 24px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="box1 box2">盒子一</div><br>
        <div :class="{box1:isActive}">盒子二</div><br>
        <div :class="[class1,class2]">盒子三</div><br>
        <div :style="style1">盒子四</div><br>
        <div :style="[style1,style2]">盒子四</div>
    </div>
</body>
<script>
    let vm=new Vue({
        el:'#app',
        data:{
            isActive:true,
            class1:'box1',
            class2:'box2',
            style1:{
                width:'200px',
                height:'100px',
                fontSize:'24px',
                border:'1px solid #333'
            },
            style2:{
                width:'100px',
                height:'100px',
            }
        },
    })
</script>
</html>

蜡笔小连

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue生命周期及模板语法

什么是vue的生命周期从vue实例创建到虚拟dom产生再到数据绑定数据监听数据渲染以及销毁的整个过程生命周期有八个阶段：beforeCreate created beforeMount mounted beforeUpdate updated beforeDestroy destroyed生命周期钩子函数1.实例初始化阶段beforeCreate vue实例初始化完成之前，完成了vue事件、属性的初始化，此时还访问不到vue实例中的data，methods。created vue实例初始化完
复制链接

扫一扫