hello vue随笔(一)

最新推荐文章于 2024-07-19 07:15:00 发布

linskyTu

最新推荐文章于 2024-07-19 07:15:00 发布

阅读量190

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/wwennxx/article/details/105981589

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

这篇博客介绍了Vue框架的MVVM模式，探讨了View层作为用户展示信息的视图，Model层作为数据层，以及VueModel层作为两者沟通的桥梁，详细阐述了数据绑定和DOM监听的功能。

摘要由CSDN通过智能技术生成

hello vue体验

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 交给实例管理 -->
    <div id="app">
        {{message}}
    </div>
    <!-- 没交给实例管理 没有实现双向绑定 所以不显示-->
    <div>
        {{message}}
    </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    //var会越界 let有作用域,不会越界 const常量
    new Vue({
        el: '#app', //用于挂载要管理的元素
        data() { //定义数据
            return {
                message: 'hello linskyTu'
            }
        }
    })

    //以前js的做法 是命令式编程
    //现在vue这种是属于 声明式编程
</script>

</html>

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in movies">{{item}}</li>
        </ul>
    </div>
</body>
<script src="../js/vue.js"></script>
<script>
    const vue = new Vue({
        el: '#app',
        data() {
            return {
                movies: ['a', 'b', 'c']
            }
        }
    })
</script>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<div id="app">
    计数器：{{count}}
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <!-- v-on:click = @click该指令用于监听某个元素的点击事件，并且指定当发生点击时，指定方法（通常是methods中定义的方法）-->
</div>
</body>
<script src="../js/vue.js"></script>
<script>
    const vue = new Vue({
        el: '#app',
        data() {
            return {
                count: 0
            }
        },
        methods: {
            increment() {
                this.count++; //在实例对象内需要用this表示当前对象中的变量 不加this会去找全局变量
            }, decrement() {
                this.count--;
            }
        }
    })
</script>
</html>

Vue的MVVM

在这里插入图片描述
View层：视图层
在我们前端开发中，通常就是DOM层。
主要的作用是给用户展示各种信息。
Model层：数据层
数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。
在我们计数器的案例中，就是后面抽取出来的obj，当然，里面的数据可能没有这么简单。
VueModel层：视图模型层
视图模型层是View和Model沟通的桥梁。
一方面它实现了Data Binding，也就是数据绑定，将Model的改变实时的反应到View中
另一方面它实现了DOM Listener，也就是DOM监听，当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。
在这里插入图片描述
当你model有数据需要展示的时候 ViewModel会把数据绑定到View上
当View上面有一些事件/一些操作时也需要通过ViewModel
vue解析完increment方法后再回调到methods的increment中

linskyTu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
hello vue随笔(一)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
复制链接

扫一扫

专栏目录