zoukankan      html  css  js  c++  java
  • 07 Vue基本代码和MVVM之间对应的关系

    Model是从后端中取出来的数据,view是前端html代码,vm是vue实例是model和view的调度者。

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <text>从vue的代码中理解mvvm模型</text>
            <!-- 1.首先导入一个vue.js的包, //当我们导入包之后,在浏览器中内存中,就多一个vue的构造函数。 --> 
            <script src="https://unpkg.com/vue/dist/vue.js"></script>
        </head>
        <body>
            <!-- 将来new一个vue实例,会根据id值会控制页面的所有内容 -->
            <div id="vue">
                <p></p>
            </div>
            <script>
                //2.创建一个vue实例,
                var vm = new Vue({
                    el:"#vue",   //el即element,el属性告诉Vue要控制哪个页面元素。
                    data:{       //data属性中,存放的是el中要用的数据。
                        message:"你好"   //通过vue提供的指令,很方便就能把数据渲染到页面上,
                        //程序员不在手动操作dom元素。前端vue框架不在提倡我们手动操作dom
                    }
                })     
            </script>
        </body>
    </html>
    注:el属性的值用来告诉vue实例要控制哪个页面的元素,如果元素只有id,则用‘#id’。如果元素只有class,则用‘.class’

    V:Vue实例所控制的这个元素的区域就是我们的V

    vm:我们new出来的这个对象,就是我们mvvm中vm的调度者。

    m:vue中的data属性就是我们mvvm中的M,专门用来保存每个vue控制元素中的数据。

    呵呵
  • 相关阅读:
    面试常见问题
    Servlet上传下载
    Java五大框架
    Jquery
    JavaEE
    Html学习
    JavaSE高级
    面向过程基础
    Java开发软件安装及配置
    JAVA的类加载机制和Class类
  • 原文地址:https://www.cnblogs.com/jiazhiyuan/p/12824585.html
Copyright © 2011-2022 走看看