vue.js快速上手

什么是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)

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小樱的经验随笔

php实现图形计算器

存档: index.php 1 <html> 2 <head> 3 <title>图形计算器开发</title> 4 ...

5454
来自专栏木子昭的博客

模拟Vue数据的双向绑定

Vue的数据双向绑定功能一直为人称道, Vue数据的双向数据绑定主要依赖了Object.defineProperty,这里尝试用最简单的代码, 实现数据的双向...

3615
来自专栏达摩兵的技术空间

js事件委托

事件委托也叫事件代理,事件委托就是利用事件冒泡,只指定一个事件处理程序,就可以管理某一类型的所有事件。

1232
来自专栏Java帮帮-微信公众号-技术文章全总结

JSP简单入门(3)

3、<jsp:param>标签 当使用<jsp:include>标签和<jsp:forward>标签引入或将请求转发给的资源是一个能动态执行的程序时,还可以使用...

3114
来自专栏技术博客

Knockout.Js官网学习(value绑定)

value绑定是关联DOM元素的值到view model的属性上。主要是用在表单控件<input>,<select>和<textarea>上。

771
来自专栏软件开发

前端MVC Vue2学习总结(五)——表单输入绑定、组件

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇,但 v-model 本质上不过是语法...

1153
来自专栏liulun

自己动手写客户端UI库——事件机制(设计思路大放送)

在上一篇文章中我们创建了一个Button控件,并把这个控件显示在界面上, 在这一篇文章中,我们将为这个控件增加一个事件和一个方法 一:怎么绑定事件的问题 ...

2089
来自专栏前端说吧

vue - 父组件数据变化控制子组件类名切换

先说当时的思路和实现 核心是父子组件传值和v-bind指令动态绑定class实现

1421
来自专栏Lambda

【第一季】Vue2.0内部指令

学习这套课程你需要的前置知识: HTML的基础知识,你需要达到中级水平,写前端页面的结构代码完全没有问题。 CSS的基础知识,最好做过半年以上的切图和布局,最...

2099
来自专栏CIT极客

【奇淫巧技】Javascript入门笔记,打造最绚丽网页特效!

3976

扫码关注云+社区

领取腾讯云代金券