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控制元素中的数据。
呵呵