Vue.js 学习笔记一:Vue实例与模板语法

Vue.js是一套构建用户界面的渐进式框架。他的 Virtual DOM 实现相对更为轻量一些,是一款强大的MVVM框架。这篇是学习官方教程后的一些总结。对于想要学习Vue的人,上官网看教程还是最快的。官网

Vue实例

构造器

每个 Vue.js 应用都是通过构造函数 Vue 创建一个 Vue 的根实例 启动的。

var vm = new Vue({
  // 选项
})
var MyComponent = Vue.extend({
  // 扩展选项
})
// 所有的 `MyComponent` 实例都将以预定义的扩展选项被创建
var myComponentInstance = new MyComponent()

所有的 Vue.js 组件其实都是被扩展的 Vue 实例。

属性与方法

每个 Vue 实例都会代理其 data 对象里所有的属性

var data = { a: 1 }
var vm = new Vue({
  data: data
})
vm.a === data.a // true

注意只有这些被代理的属性是响应的。如果在实例创建之后添加新的属性到实例上,它不会触发视图更新。

Vue 实例暴露了一些有用的实例属性与方法。这些属性与方法都有前缀 $,以便与代理的 data 属性区分。

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`  改变后调用
})
实例生命周期

每个 Vue 实例在被创建之前都要经过一系列的初始化过程。例如,实例需要配置数据观测(data observer)、编译模版、挂载实例到 DOM ,然后在数据变化时更新 DOM 。在这个过程中,实例也会调用一些 生命周期钩子 ,这就给我们提供了执行自定义逻辑的机会。

var vm = new Vue({
  data: {
    a: 1
  },
  created: function () {
    // `this` 指向 vm 实例
    console.log('a is: ' + this.a)
  }
})
// a is: 1

也有一些其它的钩子,在实例生命周期的不同阶段调用,如 mounted、 updated 、destroyed 。钩子的 this 指向调用它的 Vue 实例。

模板语法

插值
  1. 文本
    双大括号会将数据解释为纯文本,而非 HTML。
    无论何时,绑定的数据对象上 msg 属性发生了改变,插值处的内容都会更新
    <span>Message: {{ msg }}</span>
    一次性地插值,当数据改变时,插值处的内容不会更新。
    <span v-once>This will never change: {{ msg }}</span>
  2. 纯 HTML
    被插入的内容都会被当做 HTML —— 数据绑定会被忽略。
    <div v-html="rawHtml"></div>
    你的站点上动态渲染的任意 HTML 可能会非常危险,因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值,绝不要对用户提供的内容插值。
  3. 属性
    <div v-bind:id="dynamicId"></div>
    <button v-bind:disabled="someDynamicCondition">Button</button>
  4. 使用 JavaScript 表达式
    有个限制就是,每个绑定都只能包含单个表达式
    {{ number + 1 }}
    {{ ok ? 'YES' : 'NO' }}
    {{ message.split('').reverse().join('') }}
    <div v-bind:id="'list-' + id"></div>
    模板表达式都被放在沙盒中,只能访问全局变量的一个白名单,如 Math 和
指令

指令(Directives)是带有 v- 前缀的特殊属性。职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。
<p v-if="seen">Now you see me</p>
1. 一些指令能接受一个“参数”,在指令后以冒号指明。
v-bind 指令被用来响应地更新 HTML 属性
<a v-bind:href="url"></a>
v-on 指令,它用于监听 DOM 事件,参数是监听的事件名
<a v-on:click="doSomething">
2. 修饰符
.prevent 修饰符告诉 v-on 指令对于触发的事件调用
<form v-on:submit.prevent="onSubmit"></form>

过滤器

可被用作一些常见的文本格式化。过滤器可以用在两个地方:mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部,由“管道”符指示

<!-- in mustaches -->
{{ message | capitalize }}
<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})

过滤器可以串联
{{ message | filterA | filterB }}
{{ message | filterA('arg1', arg2) }}
字符串 ‘arg1’ 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

缩写

Vue.js 为两个最为常用的指令提供了特别的缩写。
1. v-bind 缩写
完整语法
<a v-bind:href="url"></a>
缩写
<a :href="url"></a>
2. v-on 缩写
完整语法
<a v-on:click="doSomething"></a>
缩写
<a @click="doSomething"></a>

参考资料

  1. 介绍
  2. Vue实例
  3. 模板语法

发表评论

电子邮件地址不会被公开。 必填项已用*标注