vue声明周期及模板语法

最新推荐文章于 2024-05-08 10:00:07 发布

煎饼狗子ing

最新推荐文章于 2024-05-08 10:00:07 发布

阅读量199

点赞数

文章标签： vue.js react.js

本文链接：https://blog.csdn.net/zy123r/article/details/120734358

版权

文章目录

Vue是一套用于构建用户界面的 渐进式框架( 根据自身需求，选择框架的中的工具,VUE不强求你一次性接受并使用它的全部功能特性)。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合。另一方面，当与 现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。用来做单页面应用– index.html,页面跳转用的vue插件路由来实现跳转。

1.vue特点

1.前端三大主流框架之一
vue
数据驱动框架
渐进式框架
O Dom操作
react
框架逻辑性更加严谨，适用于大型项目
学习成本比较高，对于入门级开发者不够友好
Angular
适用于大型项目的开发
内置规则较多、较复杂
使用起来较为笨重，不够灵活
2.轻量级框架体积更小
3.生态圈广泛，适合初学者
4.基于mvvm模式，可以实现双向数据绑定

2.Vue与jquery的区别（扫地，清洁）

  原生JS
    扫把、簸箕、拖把
  Jquery(DOM驱动)
    戴森吸尘器
  Vue(数据驱动)
    扫地机器人、保姆

3.MVVM（软件设计模式）

Vue基于MVVM设计出来的
M model数据模型
V view视图层
VM View-Model视图模型

4.生命周期（钩子函数）

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.销毁阶段 this.$destroy()
beforeDestroy vue实例销毁之前，还可以访问实例
destroyed vue实例上绑定的事件、监听器、子组件销毁完毕，访问不到vue实例了

在这里插入图片描述

5.模板语法

5.1文本插值

  {{msg}} 用双大括号将data数据模型中的字段渲染到页面中
  {{ msg + 'Nihao' }} 双大括号内部可以放js表达式

5.2指令

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传入事件

5.3条件渲染

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

不推荐同时使用 v-if 和 v-for。当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

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>

5.4列表渲染

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>

5.5动态绑定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>

可以用v-model指令在表单 <input>、<textarea>及 <select>元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但 v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。使用v-model绑定了值，那么name属性就可以不用写了。

煎饼狗子ing

关注

0
点赞
踩
0

收藏

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

文章目录1.vue特点2.Vue与jquery的区别（扫地，清洁）3.MVVM（软件设计模式）4.生命周期（钩子函数）5.模板语法5.1文本插值Vue是一套用于构建用户界面的渐进式框架(根据自身需求，选择框架的中的工具,VUE不强求你一次性接受并使用它的全部功能特性)。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅容易上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。用来做单
复制链接

扫一扫