外贸网站推广运营,二手购物网站建设方案,网站搭建流程负责人,中国建设银行广东分行网站一 vue的mvvm实践者
1.1 介绍 Model#xff1a;模型层#xff0c; 在这里表示JavaScript对象 View#xff1a;视图层#xff0c; 在这里表示DOM(HTML操作的元素) ViewModel#xff1a;连接视图和数据的中间件#xff0c; Vue.js就是MVVM中的View Model层的实现者 在M…一 vue的mvvm实践者
1.1 介绍 Model模型层 在这里表示JavaScript对象 View视图层 在这里表示DOM(HTML操作的元素) ViewModel连接视图和数据的中间件 Vue.js就是MVVM中的View Model层的实现者 在MVVM架构中 是不允许数据和视图直接通信的 只能通过ViewModel来通信 而View Model就是定义了一个Observer观察者 ViewModel能够观察到数据的变化 并对视图对应的内容进行更新 ViewModel能够监听到视图的变化 并能够通知数据发生改变 至此 我们就明白了 Vue.js就是一个MV VM的实现者 他的核心就是实现了DOM监听与数据绑定
1.2 vue模板的配置
1.文件 首选项 用户代码片段 新建全局代码片段/或文件夹代码片段vue-html.code-snippets 2.使用新建一个html文件在文件中输入vue.html 则自动生成如下内容 二 vue的程序
2.1 第一个程序
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title/head
bodydiv idapp!-- {{}} 插值表达式绑定vue中的data数据 --{{ message }}/divscript srcvue.min.js/scriptscript// 创建一个vue对象
new Vue({el: #app,//绑定vue作用的范围data: {//定义页面中显示的模型数据message: Hello Vue!}
})/script/body
/html
效果
