1.2 Vue的核心概念MVVM——第1章 Vue起步知识

最新推荐文章于 2023-05-05 08:27:30 发布

gongyin2013

最新推荐文章于 2023-05-05 08:27:30 发布

阅读量339

点赞数

分类专栏：抹平Vue学习曲线文章标签： vue js

本文链接：https://blog.csdn.net/gongyin2013/article/details/106548599

版权

抹平Vue学习曲线专栏收录该内容

12 篇文章 2 订阅

订阅专栏

Vue的核心概念是MVVM，即View、Model和ViewModel，ViewModel是View和Model的桥梁。

视图：View

模型：Model

视图模型：ViewModel

上面的helloworld.html代码，体现的就是MVVM这种思路，如图1.1-4所示：

图1.1-4

三者之间的关系是：

View在ViewModel这个桥梁上利用DOM-listener事件绑定监听事件，将DOM节点上发生的事件传给Model，Model在ViewModel这个桥梁上利用Data-bindings数据绑定事件，将Model数据发生改变的事件传给View，这样就实现了视图层和数据层双向数据绑定。原理图如图1.1-5：

图1.1-5

1.2.1 Vue的模型

模型就是数据模型，是在js里定义的，先看一下下面的代码，主要看<script>部分，这是一个最精简的Vue代码。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="../static/vue.js"></script>
</head>
<body>
<script>
    var obj={msg:'hello'};
    var vm=new Vue({
        data:obj
    })
</script>
</body>
</html>

上面的obj是数据模型，vm是Vue的实例，就是一个ViewModel，如何访问Vue实例的数据msg呢？通过这种形式vm.data.msg访问是错误的，正确访问数据的方式是vm.msg。通过数据模型对象也能访问，下面的条件成立：

vm.msg === obj.msg

实例初始化里有data，不能通过.data访问，总感觉不爽。其实Vue里有这个$data对象，作为实例一个属性，可以访问具体的数据内容，可以按照如下写法访问：

vm.$data.msg===obj.msg

1.2.2 Vue的实例方法

Vue的实例就是类实例，面向对象中的类包含属性和方法，属性是在data里定义，实例方法是在methods里定义。代码清单如下：

<body>
<div id="app">
    <button type="button" v-on:click="sayHello">点击</button>
</div>
<script>
    var vm=new Vue({
        el:'#app',
        data:{msg:'hello'},
        methods:{
            sayHello:function(){
                console.log('hello function')
            }
        }
    })
</script>
</body>

Vue的实例方法是在methods对象里定义，和js方法的应用是一样的，需要注意的是方法的写法，正确的方法写法有两种：

（1）sayHello:function(){…}

（2）sayHello(){…}

错误的写法：

（3）function sayHello(){…}

1.2.3 Vue模板

Vue模板就是View，Vue使用了基于 HTML 的模板语法，Vue的模板都是合法的 HTML。Vue的template模板有三种写法

（1）使用字符串创建模板

<body>
<div id="app">
</div>
<script>
    new Vue({
        el:'#app',
        template:'<H2>我是模板1</H2>'
    })
</script>
</body>

直接给Vue实例的template对象赋值，'<H2>我是模板1</H2>'这个字符串就是模板。

（2）使用<script>标签创建模板（H5之前的写法）

<body>
<div id="app">
</div>
<script type="text/x-template" id="template">
    <div>
        <h1>{{message}}</h1>
    </div>
</script>

<script>
    new Vue({
        el:'#app',
        template: '#template',
        data: {
            message: 'script标签模板，HTML5标准之前的写法'
        }
    })
</script>
</body>

代码中的<script type="text/x-template" id="template">包裹的内容就是模板，H5之前的写法。

（3）使用template标签，把script标签换成template标签（H5的写法），Vue目前主要就是这种写法。

<template id="template">
    <div>
        <h1>{{message}}</h1>
    </div>
</template>

代码同上，把script替换成template，去掉type属性。

----------------------------------------------------------------------------------------------------------------
本内容为《抹平Vue学习曲线》的部分章节，需要阅读完整书籍的，可以跟作者沟通。
----------------------------------------------------------------------------------------------------------------

gongyin2013

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
1.2 Vue的核心概念MVVM——第1章 Vue起步知识

Vue的核心概念是MVVM，即View、Model和ViewModel，ViewModel是View和Model的桥梁。视图：View模型：Model视图模型：ViewModel上面的helloworld.html代码，体现的就是MVVM这种思路，如图1.1-4所示：图1.1-4三者之间的关系是：View在ViewModel这个桥梁上利用DOM-listener事件绑定监听事件，将DOM节点上发生的事件传给Model，Model在ViewModel这个桥梁上利用Data-bin
复制链接

扫一扫