07 Vue基本代码和MVVM之间对应的关系
Posted jiazhiyuan
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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控制元素中的数据。
以上是关于07 Vue基本代码和MVVM之间对应的关系的主要内容，如果未能解决你的问题，请参考以下文章