vue框架

最新推荐文章于 2024-08-04 21:39:31 发布

Karley_baby

最新推荐文章于 2024-08-04 21:39:31 发布

阅读量1.5k

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/Karley_baby/article/details/130330736

版权

vue是什么？

vue是用于构建用户界面的渐进式JavaScript框架(自底向上逐层开发的一个框架)

vue特点：组件化、虚拟dom、单页面应用、是一个MVVM框架、轻量化

MVVM：

M --- model 模型==数据==变量

V --- view 视图==页面==用户可以看见的界面

VM --- viewModel 视图模型==用来关联数据与视图之前的桥梁

view和model没有直接的联系，而是通过viewModel进行交互，model层数据通过数据绑定，绑定到页面上；view页面的数据改变通过dom监听反应到数据上

指令：在vue中给html标签添加的带有v-前缀的特殊属性

v-model:给表单元素进行数据的双向数据绑定

双向绑定原理：借助数据劫持和发布者订阅模式

数据劫持：数据拦截，在data中的数据在初始化的时候通过object.defineProperty进行监听，当数据改变setter后，VM就会知道，在视图改变getter，模型就会改变，模型变视图也会发生相应改变

发布者订阅模式：一对多的关系，发布者就是数据数据提供者，订阅者就是页面展示的，发布者改变，订阅者也会有相应改变

v-show和v-if区别：

相同点：都是控制元素的显示和隐藏

不同点：原理上：v-show是通过改变display的值来控制显示和隐藏

v-if是通过元素的创建和删除来控制显示和隐藏

安全性：v-if比v-show安全

性能消耗：v-show初次显示消耗一次

v-if切换一次消耗一次

使用时候：v-show用于频繁切换时候

v-if用于不频繁切换时候

作用标签：v-if支持写在template标签上，v-show不支持

v-model与v-show小案例：点击edit me，输入框消失，文本内容清空为edit me

<!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="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2 @click="chenge()">{{content}}</h2>
        <input type="text" v-model="content" v-show="isColles">
    </div>
</body>
</html>
<script>
    new Vue({
        el:'#app',
        data:{
            isColles:true,
            content:'edit me'
        },
        methods: {
            chenge(){
                this.isColles = !this.isColles
                this.content = 'edit me'
            }
        }
    })
</script>

Karley_baby

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
vue框架

数据劫持：数据拦截，在data中的数据在初始化的时候通过object.defineProperty进行监听，当数据改变setter后，VM就会知道，在视图改变getter，模型就会改变，模型变视图也会发生相应改变。发布者订阅模式：一对多的关系，发布者就是数据数据提供者，订阅者就是页面展示的，发布者改变，订阅者也会有相应改变。v-model与v-show小案例：点击edit me，输入框消失，文本内容清空为edit me。V --- view 视图==页面==用户可以看见的界面。
复制链接

扫一扫