恰皮
恰皮

初识vue.js

vue.js官网教程学习笔记和学习摘要

起步

安装

一个简单的方法，直接把一个vue.js引入你的HTML页面中，就像引入一个jq框架一样，首先你要下载js文档，然后用script标签把它引进去，然后在之前写一个

  • HTML 特性
    Mustache 标签也可以用在 HTML 特性 (Attributes) 内：

绑定表达式

双大括号内的文本称为绑定表达式，绑定表达式由一个简单的JavaScript表达式和可选的一个或者多个过滤器构成。

  • JavaScript表达式
    eg：
{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

tip:每个绑定只能包含单个表达式


{{ var a = 1 }}


{{ if (ok) { return message } }}
  • 过滤器（管道语法）
    eg：
{{ message | capitalize }}//message的值通过过滤器capitalize，capitalize过滤器的作用是变换成大写，所以message的值通过过滤器capitalize的结果是返回大写化的值

tip：管道语法不是JavaScript语法，因此不能在表达式内使用过滤器，只能添加到表达式的后面。

过滤器可以串联：{{ message | filterA | filterB }

指令

前缀：“v-”
指令的值：“绑定表达式”（JavaScript表达式、过滤器）
指令的职责：表达式的值改变式把某些特殊行为应用到DOM上
eg：

Hello!

这里，v-if是一个指令，指令的值是表达式“greeting”的值，如果值为真，就插入< p>元素，如果是假，就删除< p>元素。

  • 参数
    eg：
//v-bind 指令用于响应地更新 HTML 特性，href是参数，它告诉v-bind指令将元素的href特性跟表达式url的值绑定
//v-on 指令，它用于监听 DOM 事件
  • 修饰符
  • 以半角句号 . 开始的特殊后缀
  • 用于表示指令应当以特殊方式绑定
    eg：
//.literal 修饰符告诉指令将它的值解析为一个字面字符串而不是一个表达式
  • 缩写
    v-bind的缩写
    eg：

v-on的缩写
eg：

计算属性

eg：

var vm = new Vue({
  el: '#example',
  data: {
    a: 1
  },
  computed: {
    // 一个计算属性的 getter
    b: function () {
      // `this` 指向 vm 实例
      return this.a + 1//b的值是计算出来的，依赖于a的值
    }
  }
})
  • $watch方法：监测数据的变化
    eg：
{{fullName}}
  • 优化：因为上面的命令式回调是重复的，最好是使用计算属性
var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})
  • 也可以使用计算属性设置值：计算属性默认只是 getter，不过也可以提供一个 setter
    eg：
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

调用vm.fullName = 'John Doe' 时，setter会被调用，为firstName和lastName赋值，'John Doe' 传给参数newValue，var names = newValue.split(' ')将newValue以’ ‘为分隔符分隔为一个数组储存在names里面，所以names[0]的值为John，names[names.length - 1]即names[1]的值为Doe，然后getter被调用，为fullName计算值。

Class 与 Style 绑定

绑定 HTML Class

  • 对象语法
    可以传给 v-bind:class 一个对象，以动态地切换 class。

v-bind:class 指令可以与普通的 class 特性共存

eg：



data: {
  isA: true,
  isB: false
}

class-a是一个类名，class-b也是一个类名，通过data的isA和isB设置是否为元素绑定相应的类。渲染为：

也可以直接绑定一个对象



data: {
  classObject: {
    'class-a': true,
    'class-b': false
  }
}
  • 数组语法
    可以把一个数组传给 v-bind:class，以应用一个 class 列表：
    eg:


data: {
  classA: 'class-a',
  classB: 'class-b'
}

渲染为：

也可以：

始终添加classA类，如果isB为true，就添加classB类，如果isB为false，就不添加classB。

也可以：
eg：

始终添加classA类，根据isB的值选择是否添加classB，根据IsC选择是否添加classC。

绑定内联样式

  • 对象语法
    v-bind:style 的对象语法：
    eg：


data: {
  activeColor: 'red',
  fontSize: 30
}

直接绑定到一个样式对象通常更好：



data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}
  • 数组语法
    v-bind:style 的数组语法可以将多个样式对象应用到一个元素上：

条件渲染

  • v-if
    eg:
Yes

如果v-if的属性值——“ok”表达式的值为真，则显示“yes”，否则不显示“yes”。
eg：

Yes


No

如果v-if的属性值——“ok”表达式的值为真，则显示“yes”，否则不显示v-else对应的语句“No”。

  • template v-if
    如果想用v-if同时显示或者隐藏多个元素，可以用