Vue学习笔记

介绍

文本插值

<div id="app">
  {{ message }}
</div>

数据绑定:

v-bind: 可以简写成 :

 <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>

条件渲染

<p v-if="seen">现在你看到我了</p>

循环渲染

    <li v-for="todo in todos">
      {{ todo.text }}
    </li>

事件绑定

v-on: 也可以简写为 @

 <button v-on:click="reverseMessage">逆转消息</button>

 

表单输入和应用状态之间的双向绑定

 <input v-model="message">

 

几乎任意类型的应用界面都可以抽象为一个组件树

 

注册组件 (全局?)

Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

 

设置组件接受属性

Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义特性。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

 

Vue 实例

每个 Vue 应用都是通过用 Vue 函数创建一个根 Vue 实例开始的,所有的 Vue 组件都是 Vue 实例

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

 

数据

// 我们的数据对象
var data = { a: 1 }

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2

// ……反之亦然
data.a = 3
vm.a // => 3

 

只有当实例被创建时 data 中存在的属性才是响应式的,如果想后期再添加属性,需要一开始设置一些初始值

 

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 (newValue, oldValue) {
  // 这个回调将在 `vm.a` 改变后调用
})

 

实例生命周期钩子

 created 钩子可以用来在一个实例被创建之后执行代码

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

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

不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())

 

模板语法

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

<span v-once>这个将不会改变: {{ msg }}</span>

输出真正的 HTML，你需要使用 v-html指令

<span v-html="rawHtml"></span>

使用 JavaScript 表达式

{{ number + 1 }}

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

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

<div v-bind:id="'list-' + id"></div>

指令

一些指令能够接收一个“参数”，在指令名称之后以冒号表示。

<a v-bind:href="url">...</a>

<a v-on:click="doSomething">...</a>

 

从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：

<a v-bind:[attributeName]="url"> ... </a>

 

修饰符

修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。

<form v-on:submit.prevent="onSubmit">...</form>