0%

Vue 基础文档

发表于 更新于

Vue 实例

创建一个 Vue 实例

1
2
3
var vm = new Vue({
  // 选项
})

数据与方法

Object.freeze()

Object.freeze()，这会阻止修改现有的属性，也意味着响应系统无法再追踪变化

1
2
3
4
5
<div id="app">
  <p>{{ foo }}</p>
  <!-- 这里的 `foo` 不会更新！ -->
  <button v-on:click="foo = 'baz'">Change it</button>
</div>
1
2
3
4
5
6
7
8
9
10
var obj = {
  foo: 'bar'
}

Object.freeze(obj)

new Vue({
  el: '#app',
  data: obj
})

实例生命周期钩子

生命周期钩子就好像是为了方便在不同的阶段中选择一个阶段去干该干的事

有 created、mounted、updated 和 destroyed等。

生命周期钩子的 this 上下文指向调用它的 Vue 实例,所以不要在选项属性上或回调上使用箭头函数

模板语法

也可以不使用，直接用 render()

文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

原始 HTML

1
2
3
4
<div id="app">
 <p>Using mustaches: {{ rawHtml }}</p>
 <p>Using v-html directive: <span v-html="rawHtml"></span></p>
</div>
1
2
3
4
5
6
new Vue({
  el: '#app',
  data: {
    rawHtml: '<span style="color:red">Hello Vue.js!</span>'
  }
})

你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值。

特性

1
2
3
<div id="app">
 <button v-bind:disabled="isButtonDisabled">Button</button>
</div>
1
2
3
4
5
6
new Vue({
  el: '#app',
  data: {
  	isButtonDisabled: undefined,
  }
})

指令

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。例如，v-bind 指令可以用于响应式地更新 HTML 特性

另一个例子是 v-on 指令，它用于监听 DOM 事件

.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()

1
2
3
4
5
6
7
8
9
10
11
<!-- 完整语法 -->
<a v-bind:href="url">...</a>

<!-- 缩写 -->
<a :href="url">...</a>

<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>

<!-- 缩写 -->
<a @click="doSomething">...</a>

计算属性缓存 vs 方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }，
  methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}
})

同名的函数是不可以的，开始的时候他会直接找到methods中的函数，就不会找到，computed的同名函数，这是要注意的。

不同的是计算属性是基于它们的依赖进行缓存的

计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。

我对侦听器的了解感觉还不够

Class 与 Style 绑定

表达式结果的类型除了字符串之外，还可以是对象或数组。

组件基础

组件是可复用的 Vue 实例，且带有一个名字

1
2
3
4
5
6
7
8
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。

data 必须是一个函数

1
2
3
4
5
data: function () {
  return {
    count: 0
  }
}