vue.js快速上手。
2016-06-23 09:44
671 查看
什么是Vue.js
Vue.js是一个构建数据驱动的web界面的库。技术上,它重点集中在MVVM模式的ViewModel层,因此它非常容易学习,非常容易与其它库或已有项目整合。Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。
Vue.js 的核心是一个响应的数据绑定系统,它让数据与DOM保持同步非常简单。在使用jQuery手工操作DOM时,我们的代码常常是命令式的、重复的与易错的。Vue.js拥抱数据驱动的视图概念。通俗地讲,它意味着我们在普通HTML模板中使用特殊的语法将DOM “绑定”到底层数据。
安装
独立版本直接下载并用 < script > 标签引入,Vue会被注册为一个全局变量。如下代码,这样就可以在脚本中使用Vue.js了。
<script src="lib/vue.js"></script>
CDN
也可以在 jsdelivr或 cdnjs获取 (版本更新可能会略滞后)。
NPM
在用 Vue.js 构建大型应用时推荐使用 NPM 安装,NPM 能很好地和诸如 Webpack 或 Browserify 的 CommonJS 模块打包器配合使用。Vue.js 也提供配套工具来开发单文件组件。
$ npm install vue `# 获取CSP兼容版本: `$ npm install vue@csp `# 获取最新开发版本(来自于GitHub): $ npm install yyx990803/vue#dev
Hello World
现在就让我们来写第一个vue.js的实例。如下代码:html代码:
<div id="demo"> {{ message }} </div>
JavaScript代码:
new Vue({ el: '#demo', data: { message: 'Hello World!' } })
上面代码中div中的部分 {{ message }}为数据绑定,我们将会在后面的学习中讲到。而vue.js代码是实例化一个Vue对象。在使用vue之前必须要实例化。
构造器
每个Vue.js应用的起步都是通过构造函数Vue创建一个Vue的根实例:var vm = new Vue({ // 选项 })
一个Vue实例其实正是一个MVVM模式中所描述的 ViewModel - 因此在文档中经常会使用vm这个变量名。
属性与方法
每个Vue实例都会代理其data对象里所有的属性,如下代码:var data = { a: 1 } var vm = new Vue({ data: data }) //vm.a === data.a -> true // 设置属性也会影响到原始数据 vm.a = 2 // data.a -> 2 // ... 反之亦然 data.a = 3 //vm.a -> 3
注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。
除了前面这些数据属性,Vue 实例还有一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的数据属性区分。例如:
var data = { a: 1 } var vm = new Vue({ el: '#example', data: data }) vm.$data === data // -> true vm.$el === document.getElementById('example') // -> true // $watch 是一个实例方法 vm.$watch('a', function (newVal, oldVal) { // 这个回调将在 `vm.a` 改变后调用 })
插值
数据绑定最基础的形式是文本插值,使用 {{}} 语法(双大括号):<span>Message: {{ msg }}</span>
{{ msg }} 标签会被相应数据对象的 msg 属性的值替换。每当这个属性变化时它也会更新。
也可以只处理单次插值,今后的数据变化就不会再引起插值更新了:
<span>This will never change: {{* msg }}</span>
如下JavaScript代码:
var data={msg:'Hello Vue.js!'}; new Vue({ el: '#demo', data: data }) data.msg="Hello World!";
原始的HTML
双大括号标签将数据解析为纯文本而不是HTML。为了输出真的HTML字符串,需要用三大括号标签:<div>{{{ msg }}}</div> 如下javascript代码: var data={msg:'<p>Hello Vue.js!</p>'}; new Vue({ el: '#demo', data: data })
HTML特性
双大括号标签也可以用在 HTML 特性 (Attributes) 内:<div id="{{ id }}"></div> javascript代码如下: var data={id:'demo'}; new Vue({ el: 'div', data: data })
我们去查看HTML源码,是不是id已经变成我们设置的id了。
JavaScript表达式
Vue.js 在数据绑定内支持全功能的JavaScript表达式:{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }}
过滤器
Vue.js 允许在表达式后添加可选的“过滤器 (Filter) ”,以“管道符(|)”指示。过滤器本质上是一个函数,这个函数会接收一个值,将其处理并返回。{{ message | uppercase }}
这里我们将表达式 message 的值“管输(pipe)”到内置的 uppercase 过滤器,这个过滤器其实只是一个 JavaScript 函数,返回大写化的值。Vue.js 提供数个内置过滤器,在后面我们会谈到如何开发自己的过滤器。
可以串联多个过滤器:
{{ message | filterA | filterB }} html代码: <div id='demo'> <span>{{msg | lowercase | capitalize}}</span> </div> javaScript代码: var data={msg:'heLLO!'}; new Vue({ el: '#demo', data: data })
运行结果为:Hello
指令
Vue.js指令 (Directives) 是特殊的带有前缀 v- 的特性。本质是模板中出现的特殊标记,让处理模板的库知道需要对这里的DOM元素进行一些对应的处理。指令的职责就是当其表达式的值改变时把某些特殊的行为应用到 DOM 上。<p v-if="msg">Hello!</p>
这里 v-if 指令将根据表达式 msg 值的真假删除/插入 < p > 元素。
在Vue.js中为我们提供了一些指令:v-text,v-html,v-model,v-on,v-else等等,同学们可以去查看Vue.js的指令api(cn.vuejs.org/api/#指令)。
javascript代码:
var data={msg:0}; new Vue({ el: '#demo', data: data })
计算属性
在模板中表达式非常便利,但是它们实际上只用于简单的操作。模板是为了描述视图的结构。在模板中放入太多的逻辑会让模板过重且难以维护。这就是为什么 Vue.js 将绑定表达式限制为一个表达式。如果需要多于一个表达式的逻辑,应当使用计算属性。在 Vue.js 中,你可以通过 computed 选项定义计算属性:
<div id="example"> a={{ a }}, b={{ b }} </div> var vm = new Vue({ el: '#example', data: { a: 1 }, computed: { // 一个计算属性的 getter b: function () { // `this` 指向 vm 实例 return this.a + 1 } } })
运行结果为:a=1,b=2。
更多内容如 Class 与 Style 绑定、 渲染指令、 表单控件绑定、 自定义指令和过滤器、 方法与事件处理器、组件等请参考:
http://www.hubwiz.com/course/566e67417e7d40946afc5ddc/
最新的vue2:
[http://xc.hubwiz.com/course/592ee9b2b343f27b0ae1ba99]
(http://xc.hubwiz.com/course/592ee9b2b343f27b0ae1ba99)
相关文章推荐
- JQuery1——基础($对象,选择器,对象转换)
- Extjs4.0 最新最全视频教程
- Javascript中toFixed方法的改进
- JavaScript演示排序算法
- 2015-2016网页设计趋势分析 Web Design of Trends
- 5个常见可用性错误和解决方案
- jQuery Ajax 跨域调用
- 移动端的长按事件
- jquery教程靠边站,一分钱不花让你免费学会jquery
- JQuery+Strusts1.x无刷新登录
- js数组实现图片轮播
- $.ajax()方法详解
- jQuery ajax - ajax() 方法
- JavaScript 各种遍历方式详解
- 数组方法汇总
- jQuery Html控件基本操作(日常收集整理)
- jQuery插件实现文字无缝向上滚动效果代码
- jQuery菜单插件用法实例
- JQuery 初体验(建议学习jquery)