MVVM(Model-View-ViewModel)是一种软件架构设计模式,由微软 WPF(用于替代 WinForm,以 前就是用这个技术开发桌面应用程序的)和 Silverlight(类似于 Java Applet,简单点说就是在浏览器上 运行的 WPF) 的架构师 Ken Cooper 和 Ted Peters 开发,是一种简化用户界面的事件驱动编程方式。 由 John Gossman(同样也是 WPF 和 Silverlight 的架构师)于 2005 年在他的博客上发表。
MVVM 源自于经典的 MVC(Model-View-Controller)模式。MVVM 的核心是 ViewModel 层,负责转 换 Model 中的数据对象来让数据变得更容易管理和使用,该层作用是
MVVM 模式和 MVC 模式一样,主要目的是分离视图(View)和模型(Model),有几大好处:
视图(View)可以独立于 Model 变化和修改,一个 ViewModel 可以绑定到不同的 View 上,当 View 变化的时候 Model 可以不变,当 Model 变化的时候 View 也可以不变。
你可以把一些视图逻辑放在一个 ViewModel 里面,让很多 View 重用这段视图逻辑。
开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页 面设计。
界面素来是比较难于测试的,而现在测试可以针对 ViewModel 来写。
vscode 与 Idea都可以,一个小窍门是在vs code中运行直接选中index.html->run(运行)即可。在idea中引入项目vs code的项目后,直接点浏览器的按钮即可。另外前端提示错误以vs code为准,如果vs code中没有错误提示,代码是没有问题的。
再次对照mvvm
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是, Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库 或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复 杂的单页应用提供驱动。
1、编写视图层 (使用vue的插值表达式 {{data中的变量}})
2、编写Vue对象
3、提供数据!
<!-view layer>
<div id="app">
{{message}}
div>
<script src="../lib/vue.js">script>
<script>
//view model layer
var vm = new Vue({
el:'#app',
data:{
//model layer
message:'hello, vue world'
}
})
script>
语法学习的重点:
用mustache语法跟v-bind 来进行数据的绑定。mustache语法可以将变量的值变成普通的html,v-bind用来绑定html中的默认的属性, 用于响应式地更新 HTML attribute:
Using mustaches: {{ rawHtml }}
Using v-html directive:
...
...
v-
前缀作为一种视觉提示,用来识别模板中 Vue 特定的 attribute。当你在使用 Vue.js 为现有标签添加动态行为 (dynamic behavior) 时,v-
前缀很有帮助,然而,对于一些频繁用到的指令来说,就会感到使用繁琐。同时,在构建由 Vue 管理所有模板的单页面应用程序 (SPA - single page application) 时,v-
前缀也变得没那么重要了。因此,Vue 为 v-bind
和 v-on
这两个最常用的指令,提供了特定简写:v-bind简写为:,v-on简写为@。
可以用 v-on
指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码。许多事件处理逻辑会更为复杂,所以直接把 JavaScript 代码写在 v-on
指令中是不可行的。因此 v-on
除了接受直接js代码,还可以接收一个需要调用的方法名称。
测试A
测试B
测试C
Other
v-model: [https://cn.vuejs.org/v2/guide/forms.html#%E5%80%BC%E7%BB%91%E5%AE%9A](
https://cn.vuejs.org/v2/guide/forms.html#值绑定)
npm install -g @vue/cli
# OR
yarn global add @vue/cli
vue create my-project
# OR
vue ui