Vue学习笔记8--MVVM

总结：MVVM

M:模型Model，对应data种的数据
V：视图View，模版
VM:视图模型ViewModel,Vue实例对象

观察发现：

data种所有的属性，最后都出现在vm身上。
vm身上所有的属性及Vue原型上所有属性，在Vue模版种都可以直接使用。

示例如下所示：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue el data</title>
    <script type="text/javascript" src="../Js/vue.js"></script>
</head>

<body>
    <!-- View -->
    <div id="root">
        <h2> {{mydata.nickname}}</h2>
        <h2> {{mydata.address}}</h2>
        <hr />
        <h2>
            1.M:模型Model，对应data种的数据<br />
            2.V：视图View，模版<br />
            3.VM:视图模型ViewModel,Vue实例对象<br />
        </h2>
        <hr />
        <h2> 表达式可应用vm种所有的内容信息，如下示例：</h2>
        <h5> {{_c}}</h5>
        <h5> {{$emit}}</h5>
        <h5> {{1+2+3}}</h5>
    </div>

</body>

</html>

<script type="text/javascript">
    Vue.config.productionTip = false

    // ViewModel 方式三：data的第二种书写方式，函数式
    const vm = new Vue({
        el: '#root',
        data() {
            return {
                // Model
                name: 'vue',
                mydata:
                {
                    nickname: 'vue.js',
                    address: 'xxx/前端js框架'
                }
            }
        },
    })
    console.log(vm) //输出vm
    vm.$mount('#root')

</script>

posted on 2024-02-22 14:02 sunwugang 阅读(20) 评论(0) 收藏举报

刷新页面返回顶部

欢迎莅临 SUN WU GANG 的园子！！！

公告