@xiaoqq 2016-08-29T12:07:44.000000Z 字数 3662 阅读 1053

Vue学习笔记——Guide

Vue

一、概述

Vue.js（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue只是一个视图框架。

响应的数据绑定

Vue的核心是一个响应的数据绑定系统。每当修改了数据，DOM便相应的更新。

组件系统

组件系统是 Vue.js 另一个重要概念，因为它提供了一种抽象，让我们可以用独立可复用的小组件来构建大型应用。如果我们考虑到这点，几乎任意类型的应用的界面都可以抽象为一个组件树。

二、Vue语法

1. 插值

Vue使用{{}}标签绑定数据，这个标签称为Mustache（大胡子）标签，放在Mustache中的文本称为绑定表达式，这个表达式可以由JavaScript表达式和一个或多个可选的过滤器组成。

注意：在html特性中可以使用Mustache表达式，但是在指令和特殊特性中不能使用该表达式

我们使用|来表示管道符，后面跟随过滤器。

2. 指令（Directives）

定义：指令是特殊的带有v-前缀的特性 (Vue中指令默认是特性)

个人理解：指令是特性，它的作用是把DOM和data连接起来，当data改变时更新DOM。组件是一套自定义的HTML元素。

指令的职责是当其值改变时，将某些特殊的行为应用在DOM上
指令的值限定为绑定表达式：JavaScript表达式 + 过滤器
有些指令的后面可以带一个参数，用冒号:隔开。 <a v-bind:href="url"></a>等效于href="{{url}}"
修饰符 (Modifiers) 是以半角句号 . 开始的特殊后缀
v-bind:xxx可以缩写为:xxx，v-on:xxx可以缩写为@xxx

3. 计算属性(computed)

当模板的逻辑难以维护时，就需要这样一个计算属性。

计算属性可以代替$watch

4. Class与Style绑定

v-bind:class中可以传入一个对象，对象的值是布尔值，来控制样式的显示与否
也可以传入一个数组，同时显示两个样式
可以使用v-bind:style绑定一个内联样式

5. 条件渲染

v-if

<h1 v-if="ok">Yes</h1>
<h1 v-else>No</h1>

v-show

v-show只是简单地切换display属性

<h1 v-show="ok">Hello!</h1>

v-if vs. v-show

v-if 是真实的条件渲染，因为它会确保条件块在切换当中合适地销毁与重建条件块内的事件监听器和子组件。v-show 简单得多——元素始终被编译并保留，只是简单地基于 CSS 切换。

一般来说，v-if 有更高的切换消耗而 v-show 有更高的初始渲染消耗。因此，如果需要频繁切换 v-show 较好，如果在运行时条件不大可能改变 v-if 较好。

6. 列表渲染

在 v-for 块内我们能完全访问父组件作用域内的属性，另有一个特殊变量 $index

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>

数组变动检测

Vue.js 包装了被观察数组的变异方法，故它们能触发视图更新。被包装的方法有：push/pop/shift/unshift/splice/sort/reverse
而filter/concat/slice则不会触发

track-by ($index)

当替换整个数组的时候可以变得高效

7. 方法与事件处理器

使用v-on:click可以直接绑定一个方法:<button v-on:click="greet">Greet</button>
也可以内联JS语句：<button v-on:click="say('hi')">Say Hi</button>

8. 表单控件绑定

可以用 v-model 指令在表单控件元素上创建双向数据绑定。

9. 过渡

通过 Vue.js 的过渡系统，可以在元素从 DOM 中插入或移除时自动应用过渡效果。
为了应用过渡效果，需要在目标元素上使用 transition 特性：

<div v-if="show" transition="my-transition"></div>

transition 特性可以与下面资源一起用：

v-if
v-show
v-for （只在插入和删除时触发，使用 vue-animated-list 插件）
动态组件
在组件的根节点上，并且被 Vue 实例 DOM 方法（如 vm.$appendTo(el)）触发。

示例

<div v-if="show" transition="expand">hello</div>
然后为 .expand-transition, .expand-enter 和 .expand-leave 添加 CSS 规则.

如果 transition 特性没有值，类名默认是
.v-transition 始终保留在元素上
.v-enter 定义进入过渡的开始状态。只应用一帧然后立即删除
.v-leave 定义离开过渡的结束状态。在离开过渡开始时生效，在它结束后删除

三、组件

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

1. 使用组件

注册

通过Vue.extend()创建一个组件构造函数，然后再使用Vue.component(tag, constructor) 注册。
组件在注册之后，便可以在父实例的模块中以自定义元素 <my-component> 的形式使用。

局部注册

不需要全局注册每个组件。可以让组件只能用在其它组件内，用实例选项 components 注册：

var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
  template: '...',
  components: {
    // <my-component> 只能用在父组件模板内
    'my-component': Child
  }
})
/*************注册语法糖****************/
// 在一个步骤中扩展与注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})
// 局部注册也可以这么做
var Parent = Vue.extend({
  components: {
    'my-component': {
      template: '<div>A custom component!</div>'
    }
  }
})

组件选项

组件中的data和el必须是函数，该函数返回一个对象
如果直接赋值为一个对象，则所有组件共用一个属性，这是不合理的

2. Props

组件实例的作用域是孤立的。可以使用 props 把数据传给子组件。

可以用 v-bind 绑定动态 Props 到父组件的数据。

prop 默认是单向绑定。可以使用 .sync 或 .once 绑定修饰符显式地强制双向或单次绑定

3. 父子组件的通信

父组件向子组件传递

子组件可以用 this.$parent 访问它的父组件。根实例的后代可以用 this.$root 访问它。父组件有一个数组 this.$children，包含它所有的子元素。

父组件向子组件传递消息可以通过props。一般来说不建议在子组件中修改父组件的状态。

自定义事件

从子组件向父组件传递参数一般通过事件的方式

每个 Vue 实例都是一个事件触发器：

使用 $on() 监听事件；
使用 $emit() 在它上面触发事件；
使用 $dispatch() 派发事件，事件沿着父链冒泡；
使用 $broadcast() 广播事件，事件向下传导给所有的后代。

在子组件中通过执行this.$dispatch('child-msg', this.msg)方法，把msg通过冒泡的方式往上传，
父组件中events属性中定义child-msg方法，来接收msg数据。

使用 v-on 绑定自定义事件

<child v-on:child-msg="handleIt"></child>

当子组件触发了 "child-msg" 事件，父组件的 handleIt 方法将被调用。所有影响父组件状态的代码放到父组件的 handleIt 方法中；子组件只关注触发事件。

子组件索引

可以使用 v-ref 为子组件指定一个索引 ID，从而直接访问子组件

<div id="parent">
  <user-profile v-ref:profile></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile

4. 使用 Slot 分发内容

内容分发，在Angular中的意思是transclusion，就是保留组件内部的元素。

编译作用域

父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译

5. 动态组件

多个组件可以使用同一个挂载点，然后动态地在它们之间切换。使用保留的元素，动态地绑定到它的 is 特性：