Vue.js Tutorial

搭建案例演示自动刷新环境

创建一个 package.josn 文件：

npm init -y

安装 browser-sync:

# npm install --save-dev browser-sync
# 将 browser-sync 包保存到开发依赖中
# 就可以执行 npm install 的时候加入 --production 选项不安装这个包
npm i -D browser-sync

在 package.json 文件中加入以下内容：

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "browser-sync start --server --directory --files \"code/*.html\""
}

打开终端，启动开发预览服务：

npm start

安装

Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性
每个版本的更新日志见：https://github.com/vuejs/vue/releases
独立 js 文件
- 开发版本（未压缩）：http://vuejs.org/js/vue.js
- 生产版本（压缩）：http://vuejs.org/js/vue.min.js
CDN：https://unpkg.com/vue
NPM: npm install vue
Bower: bower install vue
兼容 AMD 规范
- 独立下载版本或通过 Bower 安装的版本已用 UMD 包装，因此它们可以直接用作 AMD 模块。

Vue 实例

每个 Vue.js 应用都是通过构造函数 Vue 创建的
在实例化 Vue 时，需要传入一个选项对象，它可以包含数据、模板、挂载元素、方法、生命周期钩子等选项
- data: 属性数据
- computed: 计算属性
- methods: 方法
- el: 挂载点
- directives: 自定义指令
- filters: 自定义过滤器
- ...
- 全部选项可以在 API 文档中查看：https://cn.vuejs.org/v2/api/
实例选项：data
- https://cn.vuejs.org/v2/guide/instance.html#属性与方法
- 选项/数据 - data
- 深入响应式原理
- 作用：根据视图抽象数据模型
- 注意：视图中使用的数据必须在 data 中初始化
- 每个 VUe 实例都会代理其 data 对象里所有的属性
  - 也可以通过 vue 实例的 $data 属性访问 data 中的数据
  - 建议：如果要使用 vm 读取或修改 data 中的数据，建议加上 vm.$data 去访问
- 只有被初始代理的属性是响应式的
  - 如果是在实例创建之后添加新的属性到实例上，它不会触发视图更新
- Vue 不允许在已经创建的实例上动态添加新的根级响应式属性
- Vue 不能检测到对象属性的动态添加或删除
  - 也就是说动态添加或删除的对象属性不是响应式的
  - 如果希望动态添加和删除对象的属性是响应式的则需要通过：
    - Vue.set( object, key, value )
    - 或 vm.$set( object, key, value )
  - 如果删除对象属性是响应式的：
    - Vue.delete( object, key )
    - 或 vm.$delete( object, key )
实例选项：methods
- https://cn.vuejs.org/v2/api/#methods
- 作用：为视图交互提供行为函数
- 可以在行为函数中通过 this 访问 data 中的数据成员
- 注意：methods 中的行为函数不要写箭头函数
  - 因为这样会改变内部 this 的指向
实例属性
- https://cn.vuejs.org/v2/api/#实例属性
- $data
  - Vue 实例观察的数据对象。Vue 实例代理了对其 data 对象属性的访问。
- $el
  - Vue 实例使用的根 DOM 元素
实例方法/数据
- https://cn.vuejs.org/v2/api/#实例方法-数据
- $watch
- $set Vue.set 的别名
- $delete Vue.delete 的别名

模板语法

插值

文本

响应插值：
- <span>Message: {{ msg }}</span>
- 注意： Mustache 语法不能在 HTML 属性中使用，应使用 v-bind 指令
一次性插值：
- <span v-once>This will never change: {{ msg }}</span>
- 注意：会影响该节点及内部节点所有的绑定

纯 HTML

双大括号会将数据解释为纯文本，而非 HTML 。为了输出真正的 HTML ，你需要使用 v-html 指令：

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

为什么不直接输出 HTML
什么是 XSS 攻击：跨站脚本攻击
- 后天或者后后天补课

属性

注意：Mustache 不能在 HTML 属性中使用，应使用 v-bind 指令：

<div v-bind:id="dynamicId"></div>

这对布尔值的属性也有效 —— 如果条件被求值为 false 的话该属性会被移除：

<button v-bind:disabled="someDynamicCondition">Button</button>

使用 JavaScript 表达式

Vue.js 都提供了完全的 JavaScript 表达式支持：

{{ number + 1 }}

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

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

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

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效:

<!-- 这是语句，不是表达式 -->
{{ var a = 1 }}

<!-- 流控制也不会生效，请使用三元表达式 -->
{{ if (ok) { return message } }}

指令

Vue 内置指令

v-text
- 和 {{}} 效果是一样
- 但是 {{}} 会闪烁
- 解决方法就是利用 v-text 绑定数据
- 如果又想用 {{}}} 还需要避免闪烁
- 使用 v-cloak 处理
v-html
- 默认 {{}} 和 v-text 会把 html 格式字符串原样输出
- 可以使用 v-html 将 html 格式字符串作为 HTML 渲染到节点中
v-show
- 是否显示和隐藏
v-if
- 是否渲染和移除
v-else
- v-if 的 else 块
v-else-if
- 是 v-if 的逻辑块
- 同样的，也必须紧跟着 v-if
v-for
- 循环遍历输出
v-on
- DOM 元素的事件绑定
- 例如：v-on:click、v-on:blur
v-bind
- 动态绑定 HTML 属性
- 例如：v-bind:title、v-bind:class
v-model
- 和表单控件进行双向数据绑定
v-pre
- 不处理指定节点及内部所有节点的 vue 规则
- 例如可以用来显示原始的 Mustache 标签
- 作用：跳过大量没有指令的节点可以加快编译速度
v-cloak
- 可以处理表达式闪烁的问题
v-once
- 一次性绑定，后续数据的更新不会响应

指令（Directives）是带有 v- 前缀的特殊属性。指令属性的值预期是单一 JavaScript 表达式（除了 v-for，之后再讨论）。指令的职责就是当其表达式的值改变时相应地将某些行为应用到 DOM 上。

<p v-if="seen">Now you see me</p>

这里， v-if 指令将根据表达式 seen 的值的真假来移除/插入

元素。

参数

一些指令能接受一个“参数”，在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

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

在这里 href 是参数，告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

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

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

在这里参数是监听的事件名：click。

修饰符

修饰符（Modifiers）是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：

<div>
  <input type="text" v-on:keyup.enter="xxx">
</div>

<form v-on:submit.prevent="onSubmit"></form>
<input type="text" v-on:keyup.enter="addTodo">

过滤器

注意：Vue 2.x 中，过滤器只能在 mustache 绑定和 v-bind 表达式（从 2.1.0 开始支持）中使用，因为过滤器设计目的就是用于文本转换。为了在其他指令中实现更复杂的数据变换，你应该使用 计算属性。

Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化
过滤器可以用在两个地方：mustache 插值 和 v-bind 表达式

全局过滤器：

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

局部过滤器：

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

过滤器使用格式：

<!-- in mustaches -->
{{ message | capitalize }}

<!-- in v-bind -->
<div v-bind:id="rawId | formatId"></div>

过滤器可以串联：

{{ message | filterA | filterB }}

过滤器是 JavaScript 函数，因此可以接受参数：

{{ message | filterA('arg1', arg2) }}

这里，字符串 'arg1' 将传给过滤器作为第二个参数，arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

缩写

v-bind 缩写

<!-- 完整语法 -->
<a v-bind:href="url"></a>
<!-- 缩写 -->
<a :href="url"></a>

v-on 缩写

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

计算属性

模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。例如：

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

在这种情况下，模板不再简单和清晰。这就是对于任何复杂逻辑，你都应当使用计算属性的原因。

基础例子：反转字符串

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }
})

你可以像绑定普通属性一样在模板中绑定计算属性。 Vue 知道 vm.reversedMessage 依赖于 vm.message ，因此当 vm.message 发生改变时，所有依赖于 vm.reversedMessage 的绑定也会被重新计算进行更新。

Class 与 Style 绑定

在 v-bind 用于 class 和 style 时， Vue.js 专门增强了它。表达式的结果类型除了 字符串 之外，还可以是对象或数组。

绑定 HTML Class

对象语法

<div v-bind:class="{ active: isActive }"></div>

<!-- v-bind:class 指令可以与普通的 class 属性共存 -->
<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>

也可以直接绑定数据里的一个对象：

<div v-bind:class="classObject"></div>
<script>
  new Vue({
    data: {
      classObject: {
        active: true,
        'text-danger': false
      }
    }
  })
</script>

数组语法

<!-- 可以把一个数组传给 v-bind:class ，以应用一个 class 列表 -->
<div v-bind:class="[activeClass, errorClass]">

data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}

<!-- 根据条件切换列表中的 class ，可以用三元表达式： -->
<div v-bind:class="[isActive ? activeClass : '', errorClass]">

<!-- 可以在数组语法中使用对象语法： -->
<div v-bind:class="[{ active: isActive }, errorClass]">

绑定内联样式

<!-- CSS 属性名可以用驼峰式（camelCase）或名短横分隔命（kebab-case） -->
<div v-bind:style="{ color: activeColor, 'font-size': fontSize + 'px' }"></div>

data: {
  activeColor: 'red',
  fontSize: 30
}

<!-- 直接绑定到一个样式对象 -->
<div v-bind:style="styleObject"></div>
data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

<!-- v-bind:style 的数组语法可以将多个样式对象应用到一个元素上 -->
<div v-bind:style="[baseStyles, overridingStyles]">

条件渲染

v-if-else-elseif

<!-- 基本用法 -->
<h1 v-if="ok">Yes</h1>

<!-- 
  通过 template 包装多个元素，渲染结果不包含 template 
  v-else 元素必须紧跟在 v-if 或者 v-else-if 元素的后面——否则它将不会被识别。
-->
<template v-if="ok">
  <h1>Title</h1>
  <p>Paragraph 1</p>
  <p>Paragraph 2</p>
</template>

<!-- 使用 v-else 指令来表示 v-if 的“else 块” -->
<div v-if="Math.random() > 0.5">
  Now you see me
</div>
<div v-else>
  Now you don't
</div>

<!-- 
  v-else-if，顾名思义，充当 v-if 的“else-if 块”。可以链式地使用多次： 
  v-else,，v-else-if 必须紧跟在 v-if 或者 v-else-if 元素之后
-->
<div v-if="type === 'A'">
  A
</div>
<div v-else-if="type === 'B'">
  B
</div>
<div v-else-if="type === 'C'">
  C
</div>
<div v-else>
  Not A/B/C
</div>

列表渲染

事件处理器

表单控件绑定

组件

组件是 Vue.js 最强大的功能，组件可以扩展自定义 HTML 元素，封装可重用代码。

组件的命名

如果一个单词就只写一个单词即可
如果是多个单词组成的名字
- 建议使用短横杠的方式
如果使用的是驼峰命名
- 则在 DOM 模板中必须将驼峰命名的组件名改为短横杠的方式
- 在字符串模板中，无论是驼峰还是短横杠都行

组件基础

注册全局组件
注册局部组件
组件的模板
组件的 data

注册全局组件：`Vue.component(tagName, options)`

Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

使用：

<div id="example">
  <my-component></my-component>
</div>

渲染为：

<div id="example">
  <div>A custom component!</div>
</div>

组件的 template

组件的 template 必须具有一个根节点，否则，模板编译报错。

可以是内联模板
可以是 script 标签模板
可以是 .vue 模板

局部注册组件：实例选项的 `components`

不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：

<body>
  <div id="app">
    <!-- 渲染为 <div>局部组件</div> -->
    <my-component></my-component>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      components: {
        'my-component': {
          template: '<div>局部组件</div>'
        }
      },
      data: {
      },
    })
  </script>
</body>

在 DOM 模板中使用组件注意事项

当使用 DOM 作为模版时（例如，将 el 选项挂载到一个已存在的元素上）, 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素 <ul> ， <ol>， <table> ， <select> 限制了能被它包裹的元素， <option> 只能出现在其它元素内部。

在自定义组件中使用这些受限制的元素时会导致一些问题，例如：

<table>
  <my-row>...</my-row>
</table>

自定义组件 <my-row> 被认为是无效的内容，因此在渲染的时候会导致错误。变通的方案是使用特殊的 is 属性：

<table>
  <tr is="my-row"></tr>
</table>

应当注意，如果您使用来自以下来源之一的字符串模板，这些限制将不适用：

<script type="text/x-template">
JavaScript内联模版字符串
.vue 组件

因此，推荐使用字符串模板。

组件的 `data` 必须是函数

在组件中，data 必须是函数，下面是错误的方式：

Vue.component('my-component', {
  template: '<span>{{ message }}</span>',
  data: {
    message: 'hello'
  }
})

正确的方式：

data: function () {
  return {
    message: '组件的 data 必须是函数返回一个json字面量对象'
  }
}

组件通信

使用 prop 传递数据
props 命名规则
- camelCase 和 kebab-case
动态 prop
- v-bind
字面量语法 vs 动态语法
单向数据流

组件意味着协同工作，通常父子组件会是这样的关系：组件 A 在它的模版中使用了组件 B 。它们之间必然需要相互通信：

父组件要给子组件传递数据
子组件需要将它内部发生的事情告知给父组件

然而，在一个良好定义的接口中尽可能将父子组件解耦是很重要的。这保证了每个组件可以在相对隔离的环境中书写和理解，也大幅提高了组件的可维护性和可重用性。

在 Vue.js 中，父子组件的关系可以总结为 props down, events up:

父组件通过 props 向下传递数据给子组件
子组件通过 events 给父组件发送消息

使用 prop 传递数据

组件实例的作用域是孤立的。这意味着不能(也不应该)在子组件的模板内直接引用父组件的数据。要让子组件使用父组件的数据，我们需要通过子组件的props选项。

子组件要显式地用 props 选项声明它期待获得的数据：

Vue.component('child', {
  // 声明 props
  props: ['message'],
  // 就像 data 一样，prop 可以用在模板内
  // 同样也可以在 vm 实例中像 “this.message” 这样使用
  template: '<span>{{ message }}</span>'
})

然后我们可以这样向它传入一个普通字符串：

<child message="hello!"></child>

camelCase 和 kabab-case 命名规则

动态 prop

字面量语法 vs 动态语法

单向数据流

prop 是单向绑定的：

当父组件的属性发生变化时，将传导给子组件
- 子组件动态绑定的 prop，当父组件更新，子组件所有的 prop 都会得到更新
但是不会反过来
- 也就是说，在子组件内部修改 prop 数据
  - 子组件内部会响应更新
  - 更新不会传导给父组件
  - 同时 Vue 会在控制台发出警告
  - 对象和数组除外
  - 如果 prop 是一个对象或数组，在子组件内部修改它会影响父组件的状态
  - 如果直接给 prop 中的对象或数组类型数据重新赋值，父组件也不会得到更新
- 这是为了防止子组件无意间修改了父组件的状态
- 这会让数据流的走向变得混乱而难以理解

为什么我们会有修改 prop 中数据的冲动呢？

prop 作为初始值传入后，子组件想要把它当作局部数据来用
prop 作为初始值传入后，由子组件处理成其它数据输出

对于这两种原因，正确的方式是：

定义一个局部变量，并用 prop 的值初始化它

props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter 
  }
}

定义一个计算属性，处理 prop 的值并返回

props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

Prop 验证

我们可以为组件的 props 指定验证规格。如果传入的数据不符合规格，Vue 会发出警告。当组件给其他人使用时，这就很有用了。

要指定验证规格，需要使用对象的形式，而不能用字符串数组：

Vue.component('example', {
  props: {
    // 基础类型检测 （`null` 意思是任何类型都可以）
    propA: Number,
    // 多种类型
    propB: [String, Number],
    // 必传且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组／对象的默认值应当由一个工厂函数返回
    propE: {
      type: Object,
      default: function () {
        return { message: 'hello' }
      }
    },
    // 自定义验证函数
    propF: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

type 可以是下面原生的数据类型：

String
Number
Boolean
Function
Object
Array

type 也可以是一个自定义构造器函数（例如 Person）， Vue 会使用 instanceof 对数据进行检测。

当 prop 验证失败，Vue会在抛出警告 (如果使用的是开发版本)。

自定义事件（父子通信）

使用 v-on 绑定自定义事件
使用自定义事件的表单输入组件
非父子组件通信

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！

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

每个 Vue 实例都实现了事件接口：

使用 $on(eventName) 监听事件
使用 $emit(eventName) 触发事件

父组件可以在使用子组件的地方直接使用 v-on 监听子组件发射的事件。注意：不能使用 $on 侦听子组件抛出的事件，而必须在模板里直接使用 v-on 绑定。

<body>
  <div id="app">
    <p>{{ total }}</p>
    <child v-on:increment="incrementTotal"></child>
    <child v-on:increment="incrementTotal"></child>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    Vue.component('child', {
      template: `
      <div>
        <span>{{ counter }}</span>
        <button @click="increment">increment</button>
      </div>`,
      data () {
        return {
          counter: 0
        }
      },
      methods: {
        increment () {
          this.counter += 1
          this.$emit('increment')
        }
      }
    })
    new Vue({
      el: '#app',
      data: {
        total: 0
      },
      methods: {
        incrementTotal () {
          this.total += 1
        }
      }
    })
  </script>
</body>

在本示例中，子组件已经和它外部完全解耦了。它所做的只是报告自己的内部事件，至于父组件是否关心则与它无关。

有时候，可能想要在某个组件的根元素上绑定一个原生事件。可以使用 .native 修饰 v-on。例如：

<my-component v-on:click.native="doTheThing"></my-component>

非父子组件通信

有时候两个组件也需要通信(非父子关系)。在简单的场景下，可以使用一个空的 Vue 实例作为**事件总线：

<body>
  <div id="app">
    <child-a></child-a>
    <child-b></child-b>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    const bus = new Vue()
    Vue.component('child-a', {
      template: `
      <div>
        <p>组件 child A</p>
        <button @click="emitDataToB">发射数据到</button>
      </div>
      `,
      methods: {
        emitDataToB() {
          // 在组件 A 中通过 $emit 发射 data 事件，组件 B 中的钩子监听了 data 事件
          bus.$emit('data', '组件a传递过来的数据')
        }
      }
    })
    Vue.component('child-b', {
      template: `
      <div>
        <p>组件 child B</p>
        <p>{{ message }}</p>
      </div>
      `,
      created() {
        const vm = this
          // 在组件 B 的钩子中通过 bud 的 $on 监听事件
        bus.$on('data', function (data) {
          vm.message = data
        })
      },
      data() {
        return {
          message: 'hello child b'
        }
      }
    })
    new Vue({
      el: '#app',
      data: {},
    })
  </script>
</body>

使用 Slot 分发内容

编译作用域
单个 Slot
具名 Slot
作用域插槽

在使用组件的时候，我们常常要像这样组合它们：

<app>
  <app-header></app-header>
  <app-footer></app-footer>
</app>

注意两点：

<app> 组件不知道它的挂载点会有什么内容。挂载点的内容是由 <app> 的父组件决定的
<app> 组件很可能有它自己的模板

为了让组件可以组合，我们需要一种方式来混合父组件的内容和子组件自己的模板。这个过程被称为 内容分发（或 “transclusion”）。

Vue.js 实现了一个内容分发 API，参照了当前 Web 组件规范草案，使用特殊的 <slot> 元素作为原始内容的插槽。

编译作用域

单个 Slot

如果子组件没有 <slot> 插口，否则父组件的内容会被丢弃
当子组件模板只有一个没有属性的 slot 时
- 父组件整个内容片段都将插入到 slot 所在的 DOM 位置
- 并替换掉 slot 标签本身
- 在 slot 标签中的任何内容都被视为备用内容
- 备用内容在子组件的作用域内编译
- 并且只有宿主元素为空的时候，备用内容才会被编译显示出来

示例如下：

<body>
  <div id="app">
    <bs-panel title="面板1">
      面板1的内容
    </bs-panel>
    <bs-panel title="面板2">
      面板2的内容
    </bs-panel>
    <bs-panel title="没有分发内容的面板">
    </bs-panel>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    Vue.component('bs-panel', {
      template: `
      <div class="panel panel-default">
        <div class="panel-heading">
          <h3 class="panel-title">{{ title }}</h3>
        </div>
        <div class="panel-body">
          <slot>
            只有才没有分发的内容时才会显示
          </slot>
        </div>
      </div>
      `,
      props: {
        title: { type: String, required: true }
      }
    })
    new Vue({
      el: '#app',
      data: {},
    })
  </script>
</body>

具名 slot

在组合组件时，内容分发 API 是非常有用的机制
<slot> 元素可以用一个特殊的属性 name 来配置如何分发内容
多个 slot 可以有不同的名字。
具名 slot 将匹配内容片段中有对应 slot 特性的元素
仍然可以有一个匿名 slot，它是默认 slot
- 作为找不到匹配的内容片段的备用插槽
- 如果没有默认的 slot，这些找不到插槽的内容片段将被抛弃

<body>
  <div id="app">
    <app-layout>
      <h1 slot="header">顶部</h1>
      <p>内容段落</p>
      <p>内容段落</p>
      <p slot="footer">底部信息</p>
    </app-layout>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    Vue.component('app-layout', {
      template: `
        <div class="container">
          <header>
            <slot name="header"></slot>
          </header>
          <main>
            <slot></slot>
          </main>
          <footer>
            <slot name="footer"></slot>
          </footer>
        </div>
      `
    })
    new Vue({
      el: '#app',
      data: {},
    })
  </script>
</body>

作用域插槽

目的：作用域插槽的目的就是可以将子组件内部的数据传递到外部
在子组件中，在 slot 标签上通过属性的方式将 prop 数据传递到外部
在父组件中，通过具有特殊属性 scope 的 <template> 元素，表示它是作用域插槽的模板
- scope 的值对应一个临时变量名
- 该变量接收来自子组件中通过 slot 元素属性传递的 prop 数据

示例如下：

<body>
  <div id="app">
    <child>
      <template scope="props">
        <p>hello from parent</p>
        <p>{{ props.text }}</p>
        <p>{{ props.message }}</p>
      </template>
    </child>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    Vue.component('child', {
      template: `
        <div class="child">
          <input v-model="message" />
          <slot text="hello from child" :message="message"></slot>
        </div>
      `,
      data () {
        return {
          message: 'child message'
        }
      }
    })
    new Vue({
      el: '#app',
      data: {
      },
    })
  </script>
</body>

作用域插槽更具代表性的用例是列表组件，允许组件自定义应该如何渲染列表每一项：

<body>
  <div id="app">
    <my-awesome-list :todos="todos">
      <template slot="item" scope="props">
        <li class="my-fancy-item">{{ props.text }}</li>
      </template>
    </my-awesome-list>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    Vue.component('my-awesome-list', {
      props: ['todos'],
      template: `
        <ul>
          <slot name="item"
            v-for="item in todos"
            :text="item.title">
            <!-- fallback content here -->
          </slot>
        </ul>
      `
    })
    new Vue({
      el: '#app',
      data: {
        todos: [
          { id: 1, title: '吃饭' },
          { id: 2, title: '睡觉' },
          { id: 3, title: '打豆豆' },
        ]
      },
    })
  </script>
</body>

动态组件

通过保留的 <component> 元素，动态的绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点：

简单示例

<body>
  <div id="app">
    <select v-model="currentView">
      <option value="home">home</option>
      <option value="posts">posts</option>
      <option value="archive">archive</option>
    </select>
    <component v-bind:is="currentView"></component>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        currentView: 'home'
      },
      components: {
        home: {
          template: '<div>home</div>',
        },
        posts: {
          template: '<div>posts</div>',
        },
        archive: {
          template: '<div>archive</div>',
        }
      }
    })
  </script>
</body>

登陆注册示例：

<body>
  <div id="app">
    <ul>
      <li><a href="JavaScript:void(0)" @click="defaultView = 'register'">注册</a></li>
      <li><a href="JavaScript:void(0)" @click="defaultView = 'login'">登陆</a></li>
    </ul>
    <div>
      <component :is="defaultView"></component>
    </div>
    <hr><hr><hr><hr>
    <div>
      <!-- 可以使用 keep-alive 保持组件状态 -->
      <keep-alive>
        <component :is="defaultView"></component>
      </keep-alive>
    </div>
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <script>
    new Vue({
      el: '#app',
      components: {
        login: {
          template: `
            <form action="">
              <div>
                <label for="">用户名</label>
                <input type="text" />
              </div>
              <div>
                <label for="">密码</label>
                <input type="password" />
              </div>
              <div>
                <input type="submit" value="点击登陆" />
              </div>
            </form>
          `
        },
        register: {
          template: `
            <form action="">
              <div>
                <label for="">用户名</label>
                <input type="text" />
              </div>
              <div>
                <label for="">密码</label>
                <input type="password" />
              </div>
              <div>
                <label for="">确认密码</label>
                <input type="password" />
              </div>
              <div>
                <label for="">验证码</label>
                <input type="password" />
              </div>
              <div>
                <input type="submit" value="点击注册" />
              </div>
            </form>
          `
        }
      },
      data: {
        defaultView: 'login'
      },
    })
  </script>
</body>

使用 Vue 的一些经验

解决表达式闪烁

将所有 {{}} 通过 v-text 替换
使用 v-cloak 解决

第一，在要渲染处理的 DOM 节点上添加一个指令 v-cloak：

<div id="app" ng-cloak>
  {{ message }}
</div>

第二，在 style 中加入一个属性选择器样式：

[v-cloak] { 
  display: none; 
}

第三，解析执行机制：

当浏览器解析处理到添加了 v-cloak 属性的节点的时候，属性样式被作用上来，也就是说默认这个容器就是隐藏着的
然后当 Vue 程序解析渲染完HTML模板的时候，自动将容器上的 v-cloak 属性移除

kevinkingback / vuejs_tutorial Goto Github PK

vuejs_tutorial's Introduction