初识 vue.js

恰皮JH
1,712 阅读3分钟

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

起步

安装

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

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

绑定表达式

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

{{ number + 1 }}

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

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

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


{{ var a = 1 }}


{{ if (ok) { return message } }}
{{ message | capitalize }}//message的值通过过滤器capitalize，capitalize过滤器的作用是变换成大写，所以message的值通过过滤器capitalize的结果是返回大写化的值

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

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

指令

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

Hello!

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








Button


Button

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的值
    }
  }
})
{{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同时显示或者隐藏多个元素，可以用
avatar
文章
阅读
粉丝