Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式(Progressive)框架。
Vue 由Google的前员工Evan You(尤雨溪) 创建。
首次亮相于2014年2月,并在第一天就大获成功。
Vue 是目前最流行的三大前端框架之一。另外两个分别是 React,Angular。
Vue整体上遵循MVVM(Model-View-ViewModel,模型一视图-视图模型)架构。
也就是说View(用户界面或视图)和Model(模型)是独立的,ViewModel( Vue )是View和lModel交互的桥梁。
通过 Vue ,我们无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦创建了绑定,DOM 将和数据保持同步,每当变更了数据,DOM 也会相应地更新。这就叫双向绑定。
当然了,在使用 Vue 时,也可以结合其他库一起使用,比如 jQuery。
Vue 对 View 和 Model 之间的更新操作做了自动化处理,并且已经为开发者进行了优化。因此,当View的某个部分需要更新时,开发者并不需要特别指定,Vue会选择恰当的方法和时机进行更新。
ViewModel是Vue.js的核心,它是一个Vue实例。Vue实例是作用于某一个HTML元素上的,这个元素可以是HTML的body元素,也可以是指定了id的某个元素。 当创建了ViewModel后,双向绑定是如何达成的呢?
首先,我们将上图中的DOM Listeners和Data Bindings看作两个工具,它们是实现双向绑定的关键。
从View侧看,ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据;
从Model侧看,当我们更新Model中的数据时,Data Bindings工具会帮我们更新页面中的DOM元素。
如今,很多公司都在使用 Vue,如 百度,腾讯,阿里巴巴,google,小米,任天堂等。且在国内也非常流行,很多公司都要求前端开发要能掌握Vue框架的开发。
-
中文官网: https://cn.vuejs.org/
目前最新的稳定版本是 2.6.10。(截至写本文的时候,2019-9)
入门小例子:
首先,在页面中引入 vue.js。
html:
<div id="app">
{{ message }}
</div>
var app = new Vue({
el: '#app',
data: {
message: 'Hello, world!'
}
})
打开浏览器控制台并修改 app.message的值,然后按回车键:
app.message='Awesome!’
可以看到页面中的内容也发生了改变。这背后的技术称为数据绑定。
-
div#app,就是 View,“视图”,内容展示的地方。
-
let app = new Vue() ,创建了一个 Vue 对象,其实就是创建了一个 ViewModel
-
Vue() 对象的参数就是 Model。
el: '#app',
data: {
message: 'Hello, world!'
}
跟着我一起学Vue吧。系列博文不定期更新。