目前很火的一个JavaScript MVVM 库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js 提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js
如果你之前已经习惯了用jQuery 操作DOM,学习Vue.js 时请先抛开手动操作DOM 的思维,因为Vue.js 是数据驱动的,你无需手动操作DOM。它通过一些特殊的HTML 语法,将DOM 和数据绑定起来。一旦你创建了绑定,DOM 将和数据保持同步,每当变更了数据,DOM 也会相应地更新。
1.什么是MVVM?
Mvvm 模式广泛应用在WPF 项目开发中,使用此模式可以把UI 和业务逻辑分离开,使UI 设计人员和业务逻辑人员能够分工明确。
Wpf:Windows Presentation Foundation (WINDOW 呈现基础)
首先,我们将上图中的ViewModel 和Model 看作两个工具,它们是实现双向绑定的关键。
从View 侧看,ViewModel 中的DOM 监听器工具会帮我们监测页面上DOM 元素的变化,如果有变化,则更改Model
中的 数据;从Model 侧看,当我们更新Model 中的数据时,ViewModel 会帮我们更新页面中的DOM 元素,并适时反馈到View 中。
2.使用VUE 框架
- 方法1:
<!-- 开发环境版本,包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
或者
<!-- 生产环境版本,优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
- 方法2:
使用vue-cli 方法构建,需熟悉nodeJs 构建工具
3.如何应用MVVM 思想来解决问题?
现在有一个功能:用户填入姓名,年龄,选择最喜欢的颜色,然后点击确定按钮提交。就是这样简单的一个调查表。
a.首先设计UI,UI 看起来可能是这样的:
b.根据UI 去设计对应的ViewModel 层需要那些属性,数据和命令:[核心]
Name:string
Age:int
FavoriteColor:string
Submit:Command
c.在ViewModel 层的SubmitCommand 命令中,调用Model 层的Submit 方法进行逻辑处理。Model 层看起来可能是这样的:
public string Name { get; set; }
public int Age { get; set; }
public string FavoriteColor { get; set; }
public void Submit() { ... }
VUE 的核心:数据绑定 和 视图组件
**Vue的数据驱动:**数据改变驱动了视图的自动更新,传统的做法你得手动改变DOM来改变视图,vuejs只需要改变数据,就会自动改变视图
**视图组件化:**把整一个网页的拆分成一个个区块,每个区块我们可以看作成一个组件。
注:vue.js 不兼容IE8
⭐Vue 数据双向绑定
数据可以驱动视图,视图也可以驱动数据
用户输入的内容(VIEW)会实时的更新至数据(MODEL),而不需要用代码去监听input 的变化
⭐Vue 组件化
4.其它特性:
- 绑定元素特性
<div id="app-2"> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息! </span> </div> var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() } })
- 条件与循环
条件
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
var app3 = new Vue({
el: '#app-3',
data: { seen: true }
})
循环
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{ text: '学习 JavaScript' },
{ text: '学习 Vue' },
{ text: '整个牛项目' }
]
}
})
- 处理用户输入
为了让用户和你的应用进行交互,我们可以用 v-on 指令添加一个事件监听器,通过它调用在 Vue 实例中定义的方法:
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: { message: 'Hello Vue.js!' },
methods: {
reverseMessage: function () {
this.message =this.message.split('').reverse().join('')
}
}
})