1.介绍:
vue.js是什么
Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。
vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。
MVVM(Model-View-ViewModel),在常用的MVC(Model-View-Controller)模式的基础上,增加了一层ViewModel,核心,它能够实现数据驱动,也是常说的双向绑定的前提:不仅View的更改可以反映到Model,Model的更改也可以反映到View,二者实现的前提也就是ViewModel把二者联系起来了。
2.特点:
(1) 简洁 (2) 轻量 (3)快速 (4) 数据驱动 (5) 模块友好 (6) 组件化
3.响应的数据绑定:
Vue.js 的核心是一个响应的数据绑定系统,它让数据与 DOM 保持同步非常简单。
二、使用vue.js
简单的hello world的示例,让你看清双向绑定使用Vue.js的好处!
{{message}}
// 这是model
var model={
message:"hello vue.js"
};
// 这是ViewModel,vue实例
// 连接view和model
new Vue({
el: '#app',//Vue实例挂载到id为app标签上
data: model//数据来源于model对象
});
使用Vue的过程就是定义MVVM各个组成部分的过程的过程,如图中注释所示。
定义View
定义Model
创建一个View实例或"ViewModel",它用于连接View和Model
双向绑定演示:
1、从View改变,绑定更新到Model,如图所示:
2、从Model改变,绑定更新到View,如图所示:
三、Vue.js常用指令
Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribute)。
Vue.js提供了一些常用的内置指令,接下来我们将介绍以下几个内置指令:
v-if指令
v-show指令
v-else指令
v-for指令
v-bind指令
v-on指令
v-model指令
v-if条件渲染
Yes
No
hello