理解Vue

Vue.js是JavaScript MVVM（Model-View-ViewModel）库，十分简洁，Vue核心只关注视图层，相对AngularJS提供更加简洁、易于理解的API。Vue尽可能通过简单的API实现响应的数据绑定和组合的视图组件。

Vue和MVVM模式

MVVM模式即Model-View-ViewModel。

Vue是以数据为驱动的，Vue自身将DOM和数据进行绑定，一旦创建绑定，DOM和数据将保持同步，每当数据发生变化，DOM会跟着变化。

ViewModel是Vue的核心，它是Vue的一个实例。Vue实例时作用域某个HTML元素上的，这个HTML元素可以是body，也可以是某个id所指代的元素。

DOM Listeners和Data Bindings是实现双向绑定的关键。DOM Listeners监听页面所有View层DOM元素的变化，当发生变化，Model层的数据随之变化；Data Bindings监听Model层的数据，当数据发生变化，View层的DOM元素随之变化。

Vue.js特点

简洁：页面由HTML模板+Json数据+Vue实例组成
数据驱动：自动计算属性和追踪依赖的模板表达式
组件化：用可复用、解耦的组件来构造页面
轻量：代码量小，不依赖其他库
快速：精确有效批量DOM更新
模板友好：可通过npm，bower等多种方式安装，很容易融入

Vue.js入门小例子

声明式渲染

本例子由HTML模板（View）+Json数据（Model）+Vue实例（ViewModel）组成。

创建Vue的实例，需传入一个选项对象，如：数据、挂载元素、方法、模生命周期钩子等。本例子中，选项对象的el属性为#app，表示Vue实例挂载在<div id="app">...</div>元素上，data属性为exampleData，表示Model为exampleData。View中{{message}}是Vue的一种数据绑定语法，在运行时，{{message}}会被数据对象的message属性替换。

双向绑定

在Vue中使用v-model在表单元素上实现双向绑定。

Vue指令

Vue指令以v-开头，可将指令视作特殊的HTML属性（attribute），用于扩展html标签功能。

v-for

v-show

v-if

v-bind

v-on

Vue组件

组件可以扩展HTML元素，封装可重用的代码。

动态组件

多个组件可以使用同一个挂载点，然后动态的在他们之间切换。

嵌套组件
组件本身也可以包含组件

=========================================================

// 定义组件
var MyComponent = {
　　template: '<div>这是自定义组件</div>'
}

// 注册全局组件
Vue.component('aaa', MyComponent)

// 创建根实例
new Vue({
　　el: '#box'
})

//使用组件
<div id="box">
　　<aaa></aaa>
</div>

自定义元素的作用只是作为一个挂载点

=============================================================

// 定义组件
var MyComponent = {
　　template: '<div>A custom component!</div>'
}

// 创建根实例
new Vue({
　　el: '#example'
　　　　components:{　　　　　　//注册局部组件
　　　　　　"aaa":MyComponent

　　}
})

//使用组件
<div id="example">
　　<aaa></aaa>
</div>

巴特西

理解Vue

最新文章

热门文章