Vue 学习笔记

时间  2021-08-15 标签 html 前端框架 vue2.0

Vue

实例化

每一个vue与应用都需要通过实例化来实现。

<div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { site: "菜鸟教程", url: "www.runoob.com", alexa: "10000" }, methods: { details: function() { return this.site + " - 学的不仅是技术，更是梦想！"; } } }) </script> <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <script type="text/javascript"> var vm = new Vue({ el: '#vue_det', data: { site: "菜鸟教程", url: "www.runoob.com", alexa: "10000" }, methods: { details: function() { return this.site + " - 学的不仅是技术，更是梦想！"; } } }) </script>
  1. 可以看到在 Vue 构造器中有一个el参数，它是 DOM 元素中的 id。在上面实例中 id 为 vue_det。这意味着我们接下来的改动全部在以上指定的 div 内，div 外部不受影响。
<div id = "vue_det"></div> <div id = "vue_det"></div>
  1. 接下来我们看看如何定义数据对象。data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
  2. methods 用于定义的函数，可以通过 return 来返回函数值。
  3. {{ }}用于输出对象属性和函数返回值。
<div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div> <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>{{details()}}</h1> </div>
  1. 当一个 Vue 实例被创建时，它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时，html 视图将也会产生相应的变化。
<div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>Alexa : {{alexa}}</h1> </div> <script type="text/javascript"> // 我们的数据对象 var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000} var vm = new Vue({ el: '#vue_det', data: data }) // 它们引用相同的对象！ document.write(vm.site === data.site) // true document.write("<br>") // 设置属性也会影响到原始数据 vm.site = "Runoob" document.write(data.site + "<br>") // Runoob // ……反之亦然 data.alexa = 1234 document.write(vm.alexa) // 1234 </script> <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>Alexa : {{alexa}}</h1> </div> <script type="text/javascript"> // 我们的数据对象 var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000} var vm = new Vue({ el: '#vue_det', data: data }) // 它们引用相同的对象！ document.write(vm.site === data.site) // true document.write("<br>") // 设置属性也会影响到原始数据 vm.site = "Runoob" document.write(data.site + "<br>") // Runoob // ……反之亦然 data.alexa = 1234 document.write(vm.alexa) // 1234 </script>
  1. 除了数据属性，Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $，以便与用户定义的属性区分开来。例如：
<div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>Alexa : {{alexa}}</h1> </div> <script type="text/javascript"> // 我们的数据对象 var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000} var vm = new Vue({ el: '#vue_det', data: data }) document.write(vm.$data === data) // true document.write("<br>") // true document.write(vm.$el === document.getElementById('vue_det')) // true </script> <div id="vue_det"> <h1>site : {{site}}</h1> <h1>url : {{url}}</h1> <h1>Alexa : {{alexa}}</h1> </div> <script type="text/javascript"> // 我们的数据对象 var data = { site: "菜鸟教程", url: "www.runoob.com", alexa: 10000} var vm = new Vue({ el: '#vue_det', data: data }) document.write(vm.$data === data) // true document.write("<br>") // true document.write(vm.$el === document.getElementById('vue_det')) // true </script>

语法

  1. 文本数据绑定：最常见的形式就是使用 {{…}}（双大括号）的文本插值：
<div id="app"> <p>{{ message }}</p> </div> <div id="app"> <p>{{ message }}</p> </div>
  1. v-html 指令用于输出 html 代码：
<div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>菜鸟教程</h1>' } }) </script> <div id="app"> <div v-html="message"></div> </div> <script> new Vue({ el: '#app', data: { message: '<h1>菜鸟教程</h1>' } }) </script>
  1. 属性。HTML 属性中的值应使用 v-bind 指令。
    以下实例判断 class1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：以下实例判断 cls1 的值，如果为 true 使用 class1 类的样式，否则不使用该类：
<div id="app"> <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1"> <br><br> <div v-bind:class="{'class1': cls1}"> v-bind:class 指令 </div> </div> <script> new Vue({ el: '#app', data:{ cls1: false } }); </script> <div id="app"> <label for="r1">修改颜色</label><input type="checkbox" v-model="class1" id="r1"> <br><br> <div v-bind:class="{'class1': cls1}"> v-bind:class 指令 </div> </div> <script> new Vue({ el: '#app', data:{ cls1: false } }); </script>
  1. 表达式
    Vue.js 都提供了完全的 JavaScript 表达式支持。（划重点）
<div id="app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id">菜鸟教程</div> </div> <script> new Vue({ el: '#app', data: { ok: true, message: 'RUNOOB', id : 1 } }) </script> <div id="app"> {{5+5}}<br> {{ ok ? 'YES' : 'NO' }}<br> {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id">菜鸟教程</div> </div> <script> new Vue({ el: '#app', data: { ok: true, message: 'RUNOOB', id : 1 } }) </script>
  1. 指令
    指令是带有v- 前缀的特殊属性。
    指令用于在表达式的值改变时，将某些行为应用到 DOM 上。如下例子：
<div id="app"> <p v-if="seen">现在你看到我了</p> </div> <script> new Vue({ el: '#app', data: { seen: true } }) </script> <div id="app"> <p v-if="seen">现在你看到我了</p> </div> <script> new Vue({ el: '#app', data: { seen: true } }) </script>

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。
6. 参数
参数在指令后以冒号指明。例如， v-bind 指令被用来响应地更新 HTML 属性：

<div id="app"> <pre><a v-bind:href="url">菜鸟教程</a></pre> </div> <script> new Vue({ el: '#app', data: { url: 'http://www.runoob.com' } }) </script> <div id="app"> <pre><a v-bind:href="url">菜鸟教程</a></pre> </div> <script> new Vue({ el: '#app', data: { url: 'http://www.runoob.com' } }) </script>

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

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

<a v-on:click="doSomething"> 在这里参数是监听的事件名。 <a v-on:click="doSomething"> 在这里参数是监听的事件名。
  1. 修饰符
    修饰符是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
<form v-on:submit.prevent="onSubmit"></form> <form v-on:submit.prevent="onSubmit"></form>
  1. 用户输入
    在 input 输入框中我们可以使用 v-model 指令来实现双向数据绑定：
<div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> new Vue({ el: '#app', data: { message: 'Runoob!' } }) </script> <div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> <script> new Vue({ el: '#app', data: { message: 'Runoob!' } }) </script>

v-model 指令用来在 input、select、text、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
v-model用在表单控件上的，用于实现双向数据绑定，所以如果你用在除了表单控件以外的标签是没有任何效果的。

按钮的事件我们可以使用 v-on 监听事件，并对用户的输入进行响应。

以下实例在用户点击按钮后对字符串进行反转操作：

<div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转字符串</button> </div> <script> new Vue({ el: '#app', data: { message: 'Runoob!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script> <div id="app"> <p>{{ message }}</p> <button v-on:click="reverseMessage">反转字符串</button> </div> <script> new Vue({ el: '#app', data: { message: 'Runoob!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } } }) </script>
  1. 过滤器
    Vue.js 允许你自定义过滤器，被用作一些常见的文本格式化。由"管道符"指示, 格式如下：
<!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bind 指令中 --> <div v-bind:id="rawId | formatId"></div> <!-- 在两个大括号中 --> {{ message | capitalize }} <!-- 在 v-bind 指令中 --> <div v-bind:id="rawId | formatId"></div>

过滤器函数接受表达式的值作为第一个参数。

以下实例对输入的字符串第一个字母转为大写

<div id="app"> {{ message | capitalize }} </div> <script> new Vue({ el: '#app', data: { message: 'runoob' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script> <div id="app"> {{ message | capitalize }} </div> <script> new Vue({ el: '#app', data: { message: 'runoob' }, filters: { capitalize: function (value) { if (!value) return '' value = value.toString() return value.charAt(0).toUpperCase() + value.slice(1) } } }) </script>

过滤器可以串联：

{{ message | filterA | filterB }}

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

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

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

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

v-on 缩写

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

条件与循环

  1. v-if。在元素 和 template 中使用 v-if 指令：
<div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> <p>学的不仅是技术，更是梦想！</p> <p>哈哈哈，打字辛苦啊！！！</p> </template> </div> <script> new Vue({ el: '#app', data: { seen: true, ok: true } }) </script> <div id="app"> <p v-if="seen">现在你看到我了</p> <template v-if="ok"> <h1>菜鸟教程</h1> <p>学的不仅是技术，更是梦想！</p> <p>哈哈哈，打字辛苦啊！！！</p> </template> </div> <script> new Vue({ el: '#app', data: { seen: true, ok: true } }) </script>

这里， v-if 指令将根据表达式 seen 的值(true 或 false )来决定是否插入 p 元素。

在字符串模板中，如 Handlebars ，我们得像这样写一个条件块：

<!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1> {{/if}} <!-- Handlebars 模板 --> {{#if ok}} <h1>Yes</h1> {{/if}}
  1. v-else
    可以用 v-else 指令给 v-if 添加一个 “else” 块：
    随机生成一个数字，判断是否大于0.5，然后输出对应信息：
<div id="app"> <div v-if="Math.random() > 0.5"> Sorry </div> <div v-else> Not sorry </div> </div> <script> new Vue({ el: '#app' }) </script> <div id="app"> <div v-if="Math.random() > 0.5"> Sorry </div> <div v-else> Not sorry </div> </div> <script> new Vue({ el: '#app' }) </script>
  1. v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用：
    判断 type 变量的值：
<div id="app"> <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> </div> <script> new Vue({ el: '#app', data: { type: 'C' } }) </script> <div id="app"> <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> </div> <script> new Vue({ el: '#app', data: { type: 'C' } }) </script>
  1. v-show
    我们也可以使用 v-show 指令来根据条件展示元素：
<h1 v-show="ok">Hello!</h1> <h1 v-show="ok">Hello!</h1>

循环语句

  1. 循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表：

<div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script> <div id="app"> <ol> <li v-for="site in sites"> {{ site.name }} </li> </ol> </div> <script> new Vue({ el: '#app', data: { sites: [ { name: 'Runoob' }, { name: 'Google' }, { name: 'Taobao' } ] } }) </script>

模板中使用 v-for：

<ul> <template v-for="site in sites"> <li>{{ site.name }}</li> <li>--------------</li> </template> </ul> <ul> <template v-for="site in sites"> <li>{{ site.name }}</li> <li>--------------</li> </template> </ul>
  1. v-for 迭代对象
    v-for 可以通过一个对象的属性来迭代数据：
<div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script> new Vue({ el: '#app', data: { object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术，更是梦想！' } } }) </script> <div id="app"> <ul> <li v-for="value in object"> {{ value }} </li> </ul> </div> <script> new Vue({ el: '#app', data: { object: { name: '菜鸟教程', url: 'http://www.runoob.com', slogan: '学的不仅是技术，更是梦想！' } } }) </script>

你也可以提供第二个的参数为键名：

<div id="app"> <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul> </div> <div id="app"> <ul> <li v-for="(value, key) in object"> {{ key }} : {{ value }} </li> </ul> </div>

第三个参数为索引：

<div id="app"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div> <div id="app"> <ul> <li v-for="(value, key, index) in object"> {{ index }}. {{ key }} : {{ value }} </li> </ul> </div>

v-for 迭代整数
v-for 也可以循环整数

<div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div> <div id="app"> <ul> <li v-for="n in 10"> {{ n }} </li> </ul> </div>

Vue.js 计算属性

  1. 计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

可以看下以下反转字符串的例子：
实例1

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

实例 1 中模板变的很复杂起来，也不容易看懂理解。
接下来我们看看使用了计算属性的实例：

<div id="app"> <p>原始字符串: {{ message }}</p> <p>计算后反转字符串: {{ reversedMessage }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Runoob!' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }) </script> <div id="app"> <p>原始字符串: {{ message }}</p> <p>计算后反转字符串: {{ reversedMessage }}</p> </div> <script> var vm = new Vue({ el: '#app', data: { message: 'Runoob!' }, computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例 return this.message.split('').reverse().join('') } } }) </script>

实例 2 中声明了一个计算属性 reversedMessage 。

提供的函数将用作属性 vm.reversedMessage 的 getter 。

vm.reversedMessage 依赖于 vm.message，在 vm.message 发生改变时，vm.reversedMessage 也会更新。

  1. computed vs methods
    我们可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
    实例 3
methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

可以说使用 computed 性能会更好，但是如果你不希望缓存，你可以使用 methods 属性。

  1. computed setter
    computed 属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
    实例 4
var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.runoob.com';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

Vue.js 监听属性

本章节，我们将为大家介绍 Vue.js 监听属性 watch，我们可以通过 watch 来响应数据的变化。

  1. 以下实例通过使用 watch 实现计数器：
<div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click = "counter++" style = "font-size:25px;">点我</button> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#app', data: { counter: 1 } }); vm.$watch('counter', function(nval, oval) { alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!'); }); </script> <div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click = "counter++" style = "font-size:25px;">点我</button> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#app', data: { counter: 1 } }); vm.$watch('counter', function(nval, oval) { alert('计数器值的变化 :' + oval + ' 变为 ' + nval + '!'); }); </script>
  1. 以下实例进行千米与米之间的换算：
<div id = "computed_props"> 千米 : <input type = "text" v-model = "kilometers"> 米 : <input type = "text" v-model = "meters"> </div> <p id="info"></p> <script type = "text/javascript"> var vm = new Vue({ el: '#computed_props', data: { kilometers : 0, meters:0 }, methods: { }, computed :{ }, watch : { kilometers:function(val) { this.kilometers = val; this.meters = val * 1000; }, meters : function (val) { this.kilometers = val/ 1000; this.meters = val; } } }); // $watch 是一个实例方法 vm.$watch('kilometers', function (newValue, oldValue) { // 这个回调将在 vm.kilometers 改变后调用 document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue; }) </script> <div id = "computed_props"> 千米 : <input type = "text" v-model = "kilometers"> 米 : <input type = "text" v-model = "meters"> </div> <p id="info"></p> <script type = "text/javascript"> var vm = new Vue({ el: '#computed_props', data: { kilometers : 0, meters:0 }, methods: { }, computed :{ }, watch : { kilometers:function(val) { this.kilometers = val; this.meters = val * 1000; }, meters : function (val) { this.kilometers = val/ 1000; this.meters = val; } } }); // $watch 是一个实例方法 vm.$watch('kilometers', function (newValue, oldValue) { // 这个回调将在 vm.kilometers 改变后调用 document.getElementById ("info").innerHTML = "修改前值为: " + oldValue + "，修改后值为: " + newValue; }) </script>

Vue.js 样式绑定

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

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

  1. class 属性绑定
    我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:
    实例中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示：
<div v-bind:class="{ active: isActive }"></div> <div v-bind:class="{ active: isActive }"></div>

以上实例 div class 为：

<div class="active"></div> <div class="active"></div>

我们也可以在对象中传入更多属性用来动态切换多个 class 。
text-danger 类背景颜色覆盖了 active 类的背景色：

<div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> <script> new Vue({ el: '#app', data: { isActive: true, hasError: true } }) </script> <div class="static" v-bind:class="{ active: isActive, 'text-danger': hasError }"> </div> <script> new Vue({ el: '#app', data: { isActive: true, hasError: true } }) </script>

以上实例 div class 为：

<div class="static active text-danger"></div> <div class="static active text-danger"></div>

我们也可以直接绑定数据里的一个对象：
text-danger 类背景颜色覆盖了 active 类的背景色：

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

此外，我们也可以在这里绑定返回对象的计算属性。这是一个常用且强大的模式：

new Vue({
  el: '#app',
  data: {
  isActive: true,
  error: null
  },
  computed: {
    classObject: function () {
      return {
        active: this.isActive && !this.error,
        'text-danger': this.error && this.error.type === 'fatal',
      }
    }
  }
})
  1. 数组语法
    我们可以把一个数组传给 v-bind:class ，实例如下：
<div v-bind:class="[activeClass, errorClass]"></div> <div v-bind:class="[activeClass, errorClass]"></div>

以上实例 div class 为：

<div class="active text-danger"></div> <div class="active text-danger"></div>

我们还可以使用三元表达式来切换列表中的 class ：
errorClass 是始终存在的，isActive 为 true 时添加 activeClass 类：

<div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div> <div v-bind:class="[errorClass ,isActive ? activeClass : '']"></div>
  1. Vue.js style(内联样式)
    我们可以在 v-bind:style 直接设置样式：
<div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div> </div> <div id="app"> <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">菜鸟教程</div> </div>

以上实例 div style 为：

<div style="color: green; font-size: 30px;">菜鸟教程</div> <div style="color: green; font-size: 30px;">菜鸟教程</div>

也可以直接绑定到一个样式对象，让模板更清晰：

<div id="app"> <div v-bind:style="styleObject">菜鸟教程</div> </div> <div id="app"> <div v-bind:style="styleObject">菜鸟教程</div> </div>

v-bind:style 可以使用数组将多个样式对象应用到一个元素上：

<div id="app"> <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div> </div> <script> new Vue({ el: '#app', data: { baseStyles: { color: 'green', fontSize: '30px' }, overridingStyles: { 'font-weight': 'bold' } } }) </script> <div id="app"> <div v-bind:style="[baseStyles, overridingStyles]">菜鸟教程</div> </div> <script> new Vue({ el: '#app', data: { baseStyles: { color: 'green', fontSize: '30px' }, overridingStyles: { 'font-weight': 'bold' } } }) </script>

Vue.js 事件处理器

事件监听可以使用 v-on 指令：

<div id="app"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p> </div> <script> new Vue({ el: '#app', data: { counter: 0 } }) </script> <div id="app"> <button v-on:click="counter += 1">增加 1</button> <p>这个按钮被点击了 {{ counter }} 次。</p> </div> <script> new Vue({ el: '#app', data: { counter: 0 } }) </script>

通常情况下，我们需要使用一个方法来调用 JavaScript 方法。

v-on 可以接收一个定义的方法来调用。

<div id="app"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button> </div> <script> var app = new Vue({ el: '#app', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function (event) { // `this` 在方法里指当前 Vue 实例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } } }) // 也可以用 JavaScript 直接调用方法 app.greet() // -> 'Hello Vue.js!' </script> <div id="app"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button> </div> <script> var app = new Vue({ el: '#app', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function (event) { // `this` 在方法里指当前 Vue 实例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } } }) // 也可以用 JavaScript 直接调用方法 app.greet() // -> 'Hello Vue.js!' </script>

除了直接绑定到一个方法，也可以用内联 JavaScript 语句：

<div id="app"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> <script> new Vue({ el: '#app', methods: { say: function (message) { alert(message) } } }) </script> <div id="app"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> <script> new Vue({ el: '#app', methods: { say: function (message) { alert(message) } } }) </script>
  1. 事件修饰符
    Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节，如：event.preventDefault() 或 event.stopPropagation()。

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

  • stop
  • prevent
  • capture
  • self
  • once
<!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件侦听器时使用事件捕获模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <div v-on:click.self="doThat">...</div> <!-- click 事件只能点击一次，2.1.4版本新增 --> <a v-on:click.once="doThis"></a> <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件侦听器时使用事件捕获模式 --> <div v-on:click.capture="doThis">...</div> <!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 --> <div v-on:click.self="doThat">...</div> <!-- click 事件只能点击一次，2.1.4版本新增 --> <a v-on:click.once="doThis"></a>
  1. 按键修饰符
    Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit"> <!-- 只有在 keyCode 是 13 时调用 vm.submit() --> <input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit"> <!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit">

全部的按键别名：

  • enter
  • tab
  • delete (捕获 “删除” 和 “退格” 键)
  • esc
  • space
  • up
  • down
  • left
  • right
  • ctrl
  • alt
  • shift
  • meta
<p><!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div> <p><!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div>

Vue.js 表单

这节我们为大家介绍 Vue.js 表单上的应用。

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。
v-model 会根据控件类型自动选取正确的方法来更新元素。

  1. 输入框
    实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定：
<div id="app"> <p>input 元素：</p> <input v-model="message" placeholder="编辑我……"> <p>消息是: {{ message }}</p> <p>textarea 元素：</p> <p style="white-space: pre">{{ message2 }}</p> <textarea v-model="message2" placeholder="多行文本输入……"></textarea> </div> <script> new Vue({ el: '#app', data: { message: 'Runoob', message2: '菜鸟教程\r\nhttp://www.runoob.com' } }) </script> <div id="app"> <p>input 元素：</p> <input v-model="message" placeholder="编辑我……"> <p>消息是: {{ message }}</p> <p>textarea 元素：</p> <p style="white-space: pre">{{ message2 }}</p> <textarea v-model="message2" placeholder="多行文本输入……"></textarea> </div> <script> new Vue({ el: '#app', data: { message: 'Runoob', message2: '菜鸟教程\r\nhttp://www.runoob.com' } }) </script>
  1. 复选框
    复选框如果是一个为逻辑值，如果是多个则绑定到同一个数组：
    以下实例中演示了复选框的双向数据绑定：
<div id="app"> <p>单个复选框：</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>多个复选框：</p> <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames"> <label for="runoob">Runoob</label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label> <br> <span>选择的值为: {{ checkedNames }}</span> </div> <script> new Vue({ el: '#app', data: { checked : false, checkedNames: [] } }) </script> <div id="app"> <p>单个复选框：</p> <input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> <p>多个复选框：</p> <input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames"> <label for="runoob">Runoob</label> <input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label> <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label> <br> <span>选择的值为: {{ checkedNames }}</span> </div> <script> new Vue({ el: '#app', data: { checked : false, checkedNames: [] } }) </script>
  1. 单选按钮
    以下实例中演示了单选按钮的双向数据绑定：
<div id="app"> <input type="radio" id="runoob" value="Runoob" v-model="picked"> <label for="runoob">Runoob</label> <br> <input type="radio" id="google" value="Google" v-model="picked"> <label for="google">Google</label> <br> <span>选中值为: {{ picked }}</span> </div> <script> new Vue({ el: '#app', data: { picked : 'Runoob' } }) </script> <div id="app"> <input type="radio" id="runoob" value="Runoob" v-model="picked"> <label for="runoob">Runoob</label> <br> <input type="radio" id="google" value="Google" v-model="picked"> <label for="google">Google</label> <br> <span>选中值为: {{ picked }}</span> </div> <script> new Vue({ el: '#app', data: { picked : 'Runoob' } }) </script>
  1. select 列表
    以下实例中演示了下拉列表的双向数据绑定：
<div id="app"> <select v-model="selected" name="fruit"> <option value="">选择一个网站</option> <option value="www.runoob.com">Runoob</option> <option value="www.google.com">Google</option> </select> <div id="output"> 选择的网站是: {{selected}} </div> </div> <script> new Vue({ el: '#app', data: { selected: '' } }) </script> <div id="app"> <select v-model="selected" name="fruit"> <option value="">选择一个网站</option> <option value="www.runoob.com">Runoob</option> <option value="www.google.com">Google</option> </select> <div id="output"> 选择的网站是: {{selected}} </div> </div> <script> new Vue({ el: '#app', data: { selected: '' } }) </script>
  1. 修饰符

.lazy
在默认情况下， v-model 在 input 事件中同步输入框的值与数据，但你可以添加一个修饰符 lazy ，从而转变为在 change 事件中同步：

<!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" > <!-- 在 "change" 而不是 "input" 事件中更新 --> <input v-model.lazy="msg" >

.number
如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值），可以添加一个修饰符 number 给 v-model 来处理输入值：
这通常很有用，因为在 type=“number” 时 HTML 中输入的值也总是会返回字符串类型。

.trim
如果要自动过滤用户输入的首尾空格，可以添加 trim 修饰符到 v-model 上过滤输入：

<input v-model.trim="msg"> <input v-model.trim="msg">

Vue.js 组件

组件（Component）是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素，封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树。
注册一个全局组件语法格式如下：

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

<tagName></tagName> <tagName></tagName>
  1. 全局组件
    所有实例都能用全局组件。
    注册一个简单的全局组件 runoob，并使用它：
<div id="app"> <runoob></runoob> </div> <script> // 注册 Vue.component('runoob', { template: '<h1>自定义组件!</h1>' }) // 创建根实例 new Vue({ el: '#app' }) </script> <div id="app"> <runoob></runoob> </div> <script> // 注册 Vue.component('runoob', { template: '<h1>自定义组件!</h1>' }) // 创建根实例 new Vue({ el: '#app' }) </script>
  1. 局部组件
    我们也可以在实例选项中注册局部组件，这样组件只能在这个实例中使用：
    注册一个简单的局部组件 runoob，并使用它：
<div id="app"> <runoob></runoob> </div> <script> var Child = { template: '<h1>自定义组件!</h1>' } // 创建根实例 new Vue({ el: '#app', components: { // <runoob> 将只在父模板可用 'runoob': Child } }) </script> <div id="app"> <runoob></runoob> </div> <script> var Child = { template: '<h1>自定义组件!</h1>' } // 创建根实例 new Vue({ el: '#app', components: { // <runoob> 将只在父模板可用 'runoob': Child } }) </script>
  1. Prop
    prop 是父组件用来传递数据的一个自定义属性。

父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 “prop”：

<div id="app"> <child message="hello!"></child> </div> <script> // 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 "this.message" 这样使用 template: '<span>{{ message }}</span>' }) // 创建根实例 new Vue({ el: '#app' }) </script> <div id="app"> <child message="hello!"></child> </div> <script> // 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 "this.message" 这样使用 template: '<span>{{ message }}</span>' }) // 创建根实例 new Vue({ el: '#app' }) </script>
  1. 动态 Prop
    类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：
<div id="app"> <div> <input v-model="parentMsg"> <br> <child v-bind:message="parentMsg"></child> </div> </div> <script> // 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 "this.message" 这样使用 template: '<span>{{ message }}</span>' }) // 创建根实例 new Vue({ el: '#app', data: { parentMsg: '父组件内容' } }) </script> <div id="app"> <div> <input v-model="parentMsg"> <br> <child v-bind:message="parentMsg"></child> </div> </div> <script> // 注册 Vue.component('child', { // 声明 props props: ['message'], // 同样也可以在 vm 实例中像 "this.message" 这样使用 template: '<span>{{ message }}</span>' }) // 创建根实例 new Vue({ el: '#app', data: { parentMsg: '父组件内容' } }) </script>

注意: prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。

  1. Prop 验证
    组件可以为 props 指定验证要求。

prop 是一个对象而不是字符串数组时，它包含验证要求：

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 也可以是一个自定义构造器，使用 instanceof 检测。

  1. 自定义事件

父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，就需要使用自定义事件！

我们可以使用 v-on 绑定自定义事件, 每个 Vue 实例都实现了事件接口(Events interface)，即：

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

另外，父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。

以下实例中子组件已经和它外部完全解耦了。它所做的只是触发一个父组件关心的内部事件。

<div id="app"> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment="incrementTotal"></button-counter> <button-counter v-on:increment="incrementTotal"></button-counter> </div> </div> <script> Vue.component('button-counter', { template: '<button v-on:click="incrementHandler">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { incrementHandler: function () { this.counter += 1 this.$emit('increment') } }, }) new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function () { this.total += 1 } } }) </script> <div id="app"> <div id="counter-event-example"> <p>{{ total }}</p> <button-counter v-on:increment="incrementTotal"></button-counter> <button-counter v-on:increment="incrementTotal"></button-counter> </div> </div> <script> Vue.component('button-counter', { template: '<button v-on:click="incrementHandler">{{ counter }}</button>', data: function () { return { counter: 0 } }, methods: { incrementHandler: function () { this.counter += 1 this.$emit('increment') } }, }) new Vue({ el: '#counter-event-example', data: { total: 0 }, methods: { incrementTotal: function () { this.total += 1 } } }) </script>

如果你想在某个组件的根元素上监听一个原生事件。可以使用 .native 修饰 v-on 。例如：

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

Vue.js 自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点：

<div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <input v-focus> </div> <script> // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() } }) // 创建根实例 new Vue({ el: '#app' }) </script> <div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <input v-focus> </div> <script> // 注册一个全局自定义指令 v-focus Vue.directive('focus', { // 当绑定元素插入到 DOM 中。 inserted: function (el) { // 聚焦元素 el.focus() } }) // 创建根实例 new Vue({ el: '#app' }) </script>

我们也可以在实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用：

<div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <input v-focus> </div> <script> // 创建根实例 new Vue({ el: '#app', directives: { // 注册一个局部的自定义指令 v-focus focus: { // 指令的定义 inserted: function (el) { // 聚焦元素 el.focus() } } } }) </script> <div id="app"> <p>页面载入时，input 元素自动获取焦点：</p> <input v-focus> </div> <script> // 创建根实例 new Vue({ el: '#app', directives: { // 注册一个局部的自定义指令 v-focus focus: { // 指令的定义 inserted: function (el) { // 聚焦元素 el.focus() } } } }) </script>
  1. 钩子

钩子函数
指令定义函数提供了几个钩子函数（可选）：

bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。

inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。

update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。

componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。

unbind: 只调用一次， 指令与元素解绑时调用。

  1. 钩子函数参数

钩子函数的参数有：

el: 指令所绑定的元素，可以用来直接操作 DOM 。

binding: 一个对象，包含以下属性：

  • name: 指令名，不包括 v- 前缀。
  • value: 指令的绑定值， 例如： v-my-directive=“1 + 1”, value 的值是2。
  • oldValue: 指令绑定的前一个值，仅在 update 和 componentUpdated钩子中可用。无论值是否改变都可用。
  • expression: 绑定值的表达式或变量名。 例如 v-my-directive=“1 + 1” ， expression 的值是 “1 + 1”。
  • arg: 传给指令的参数。例如 v-my-directive:foo， arg 的值是"foo"。
  • modifiers: 一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象modifiers 的值是 { foo: true, bar: true }。
  • vnode: Vue 编译生成的虚拟节点。
  • oldVnode: 上一个虚拟节点，仅在 update 和componentUpdated 钩子中可用。

以下实例演示了这些参数的使用：

<div id="app" v-runoob:hello.a.b="message"> </div> <script> Vue.directive('runoob', { bind: function (el, binding, vnode) { var s = JSON.stringify el.innerHTML = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ') } }) new Vue({ el: '#app', data: { message: '菜鸟教程!' } }) </script> <div id="app" v-runoob:hello.a.b="message"> </div> <script> Vue.directive('runoob', { bind: function (el, binding, vnode) { var s = JSON.stringify el.innerHTML = 'name: ' + s(binding.name) + '<br>' + 'value: ' + s(binding.value) + '<br>' + 'expression: ' + s(binding.expression) + '<br>' + 'argument: ' + s(binding.arg) + '<br>' + 'modifiers: ' + s(binding.modifiers) + '<br>' + 'vnode keys: ' + Object.keys(vnode).join(', ') } }) new Vue({ el: '#app', data: { message: '菜鸟教程!' } }) </script>

有时候我们不需要其他钩子函数，我们可以简写函数，如下格式：

Vue.directive('runoob', function (el, binding) {
  // 设置指令的背景颜色
  el.style.backgroundColor = binding.value.color
})

指令函数可接受所有合法的 JavaScript 表达式，以下实例传入了 JavaScript 对象：

<div id="app"> <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div> </div> <script> Vue.directive('runoob', function (el, binding) { // 简写方式设置文本及背景颜色 el.innerHTML = binding.value.text el.style.backgroundColor = binding.value.color }) new Vue({ el: '#app' }) </script> <div id="app"> <div v-runoob="{ color: 'green', text: '菜鸟教程!' }"></div> </div> <script> Vue.directive('runoob', function (el, binding) { // 简写方式设置文本及背景颜色 el.innerHTML = binding.value.text el.style.backgroundColor = binding.value.color }) new Vue({ el: '#app' }) </script>

Vue.js 过渡 & 动画

过渡
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。

Vue 提供了内置的过渡封装组件，该组件用于包裹要实现过渡效果的组件。

语法格式

<transition name = "nameoftransition"> <div></div> </transition> <transition name = "nameoftransition"> <div></div> </transition>

我们可以通过以下实例来理解 Vue 的过渡是如何实现的：

<style> /* 可以设置不同的进入和离开动画 */ /* 设置持续时间和动画函数 */ .fade-enter-active, .fade-leave-active { transition: opacity 2s } .fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ { opacity: 0 } </style> <div id = "databinding"> <button v-on:click = "show = !show">点我</button> <transition name = "fade"> <p v-show = "show" v-bind:style = "styleobj">动画实例</p> </transition> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { show:true, styleobj :{ fontSize:'30px', color:'red' } }, methods : { } }); </script> <style> /* 可以设置不同的进入和离开动画 */ /* 设置持续时间和动画函数 */ .fade-enter-active, .fade-leave-active { transition: opacity 2s } .fade-enter, .fade-leave-to /* .fade-leave-active, 2.1.8 版本以下 */ { opacity: 0 } </style> <div id = "databinding"> <button v-on:click = "show = !show">点我</button> <transition name = "fade"> <p v-show = "show" v-bind:style = "styleobj">动画实例</p> </transition> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#databinding', data: { show:true, styleobj :{ fontSize:'30px', color:'red' } }, methods : { } }); </script>

实例中通过点击 “点我” 按钮将变量 show 的值从 true 变为 false。如果为 true 显示子元素 p 标签的内容。

下面这段代码展示了 transition 标签包裹了 p 标签：

<transition name = "fade"> <p v-show = "show" v-bind:style = "styleobj">动画实例</p> </transition> <transition name = "fade"> <p v-show = "show" v-bind:style = "styleobj">动画实例</p> </transition>

过渡其实就是一个淡入淡出的效果。Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换：

  • v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。

  • v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。

  • v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。

  • v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。

  • v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。

  • v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
    在这里插入图片描述
    对于这些在过渡中切换的类名来说，如果你使用一个没有名字的 ，则 v- 是这些类名的默认前缀。如果你使用了 ，那么 v-enter 会替换为 my-transition-enter。

v-enter-active 和 v-leave-active 可以控制进入/离开过渡的不同的缓和曲线，在下面章节会有个示例说明。
CSS 过渡
通常我们都使用 CSS 过渡来实现效果。

如下实例：

<div id = "databinding"> <button v-on:click = "show = !show">点我</button> <transition name="slide-fade"> <p v-if="show">hello</p> </transition> </div> <script type = "text/javascript"> new Vue({ el: '#databinding', data: { show: true } }) </script> <div id = "databinding"> <button v-on:click = "show = !show">点我</button> <transition name="slide-fade"> <p v-if="show">hello</p> </transition> </div> <script type = "text/javascript"> new Vue({ el: '#databinding', data: { show: true } }) </script>

CSS 动画
CSS 动画用法类似 CSS 过渡，但是在动画中 v-enter 类名在节点插入 DOM 后不会立即删除，而是在 animationend 事件触发时删除。

<div id = "databinding"> <button v-on:click = "show = !show">点我</button> <transition name="bounce"> <p v-if="show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p> </transition> </div> <script type = "text/javascript"> new Vue({ el: '#databinding', data: { show: true } }) </script> <div id = "databinding"> <button v-on:click = "show = !show">点我</button> <transition name="bounce"> <p v-if="show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p> </transition> </div> <script type = "text/javascript"> new Vue({ el: '#databinding', data: { show: true } }) </script>

自定义过渡的类名
我们可以通过以下特性来自定义过渡类名：

  • enter-class
  • enter-active-class
  • enter-to-class (2.1.8+)
  • leave-class
  • leave-active-class
  • leave-to-class (2.1.8+)
    自定义过渡的类名优先级高于普通的类名，这样就能很好的与第三方（如：animate.css）的动画库结合使用。
<div id = "databinding"> <button v-on:click = "show = !show">点我</button> <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p> </transition> </div> <script type = "text/javascript"> new Vue({ el: '#databinding', data: { show: true } }) </script> <div id = "databinding"> <button v-on:click = "show = !show">点我</button> <transition name="custom-classes-transition" enter-active-class="animated tada" leave-active-class="animated bounceOutRight" > <p v-if="show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p> </transition> </div> <script type = "text/javascript"> new Vue({ el: '#databinding', data: { show: true } }) </script>

同时使用过渡和动画
Vue 为了知道过渡的完成，必须设置相应的事件监听器。它可以是 transitionend 或 animationend ，这取决于给元素应用的 CSS 规则。如果你使用其中任何一种，Vue 能自动识别类型并设置监听。

但是，在一些场景中，你需要给同一个元素同时设置两种过渡动效，比如 animation 很快的被触发并完成了，而 transition 效果还没结束。在这种情况中，你就需要使用 type 特性并设置 animation 或 transition 来明确声明你需要 Vue 监听的类型。

显性的过渡持续时间
在很多情况下，Vue 可以自动得出过渡效果的完成时机。默认情况下，Vue 会等待其在过渡效果的根元素的第一个 transitionend 或 animationend 事件。然而也可以不这样设定——比如，我们可以拥有一个精心编排的一系列过渡效果，其中一些嵌套的内部元素相比于过渡效果的根元素有延迟的或更长的过渡效果。

在这种情况下你可以用 组件上的 duration 属性定制一个显性的过渡持续时间 (以毫秒计)：

<transition :duration="1000">...</transition> <transition :duration="1000">...</transition>

你也可以定制进入和移出的持续时间：

<transition :duration="{ enter: 500, leave: 800 }">...</transition> <transition :duration="{ enter: 500, leave: 800 }">...</transition>

JavaScript 钩子
可以在属性中声明 JavaScript 钩子:

<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > <!-- ... --> </transition> <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v-on:before-leave="beforeLeave" v-on:leave="leave" v-on:after-leave="afterLeave" v-on:leave-cancelled="leaveCancelled" > <!-- ... --> </transition>

JavaScript 代码：

// ...
methods: {
  // --------
  // 进入中
  // --------
 
  beforeEnter: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  enter: function (el, done) {
    // ...
    done()
  },
  afterEnter: function (el) {
    // ...
  },
  enterCancelled: function (el) {
    // ...
  },
 
  // --------
  // 离开时
  // --------
 
  beforeLeave: function (el) {
    // ...
  },
  // 此回调函数是可选项的设置
  // 与 CSS 结合时使用
  leave: function (el, done) {
    // ...
    done()
  },
  afterLeave: function (el) {
    // ...
  },
  // leaveCancelled 只用于 v-show 中
  leaveCancelled: function (el) {
    // ...
  }
}

这些钩子函数可以结合 CSS transitions/animations 使用，也可以单独使用。

当只用 JavaScript 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。

推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=“false”，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。

一个使用 Velocity.js 的简单例子：

<div id = "databinding"> <button v-on:click = "show = !show">点我</button> <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false" > <p v-if="show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p> </transition> </div> <script type = "text/javascript"> new Vue({ el: '#databinding', data: { show: false }, methods: { beforeEnter: function (el) { el.style.opacity = 0 el.style.transformOrigin = 'left' }, enter: function (el, done) { Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 }) Velocity(el, { fontSize: '1em' }, { complete: done }) }, leave: function (el, done) { Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 }) Velocity(el, { rotateZ: '100deg' }, { loop: 2 }) Velocity(el, { rotateZ: '45deg', translateY: '30px', translateX: '30px', opacity: 0 }, { complete: done }) } } }) </script> <div id = "databinding"> <button v-on:click = "show = !show">点我</button> <transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:leave="leave" v-bind:css="false" > <p v-if="show">菜鸟教程 -- 学的不仅是技术，更是梦想！！！</p> </transition> </div> <script type = "text/javascript"> new Vue({ el: '#databinding', data: { show: false }, methods: { beforeEnter: function (el) { el.style.opacity = 0 el.style.transformOrigin = 'left' }, enter: function (el, done) { Velocity(el, { opacity: 1, fontSize: '1.4em' }, { duration: 300 }) Velocity(el, { fontSize: '1em' }, { complete: done }) }, leave: function (el, done) { Velocity(el, { translateX: '15px', rotateZ: '50deg' }, { duration: 600 }) Velocity(el, { rotateZ: '100deg' }, { loop: 2 }) Velocity(el, { rotateZ: '45deg', translateY: '30px', translateX: '30px', opacity: 0 }, { complete: done }) } } }) </script>

初始渲染的过渡
可以通过 appear 特性设置节点在初始渲染的过渡

<transition appear> <!-- ... --> </transition> <transition appear> <!-- ... --> </transition>

这里默认和进入/离开过渡一样，同样也可以自定义 CSS 类名。

<transition appear appear-class="custom-appear-class" appear-to-class="custom-appear-to-class" (2.1.8+) appear-active-class="custom-appear-active-class" > <!-- ... --> </transition> <transition appear appear-class="custom-appear-class" appear-to-class="custom-appear-to-class" (2.1.8+) appear-active-class="custom-appear-active-class" > <!-- ... --> </transition>

自定义 JavaScript 钩子：

<transition appear v-on:before-appear="customBeforeAppearHook" v-on:appear="customAppearHook" v-on:after-appear="customAfterAppearHook" v-on:appear-cancelled="customAppearCancelledHook" > <!-- ... --> </transition> <transition appear v-on:before-appear="customBeforeAppearHook" v-on:appear="customAppearHook" v-on:after-appear="customAfterAppearHook" v-on:appear-cancelled="customAppearCancelledHook" > <!-- ... --> </transition>

多个元素的过渡
我们可以设置多个元素的过渡，一般列表与描述：

需要注意的是当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容。

<transition> <table v-if="items.length > 0"> <!-- ... --> </table> <p v-else>抱歉，没有找到您查找的内容。</p> </transition> <transition> <table v-if="items.length > 0"> <!-- ... --> </table> <p v-else>抱歉，没有找到您查找的内容。</p> </transition>

如下实例：

<transition> <button v-if="isEditing" key="save"> Save </button> <button v-else key="edit"> Edit </button> </transition> <transition> <button v-if="isEditing" key="save"> Save </button> <button v-else key="edit"> Edit </button> </transition>

在一些场景中，也可以通过给同一个元素的 key 特性设置不同的状态来代替 v-if 和 v-else，上面的例子可以重写为：

<transition> <button v-bind:key="isEditing"> {{ isEditing ? 'Save' : 'Edit' }} </button> </transition> <transition> <button v-bind:key="isEditing"> {{ isEditing ? 'Save' : 'Edit' }} </button> </transition>

使用多个 v-if 的多个元素的过渡可以重写为绑定了动态属性的单个元素过渡。例如：

<transition> <button v-if="docState === 'saved'" key="saved"> Edit </button> <button v-if="docState === 'edited'" key="edited"> Save </button> <button v-if="docState === 'editing'" key="editing"> Cancel </button> </transition> <transition> <button v-if="docState === 'saved'" key="saved"> Edit </button> <button v-if="docState === 'edited'" key="edited"> Save </button> <button v-if="docState === 'editing'" key="editing"> Cancel </button> </transition>

可以重写为：

<transition> <button v-bind:key="docState"> {{ buttonMessage }} </button> </transition> // ... computed: { buttonMessage: function () { switch (this.docState) { case 'saved': return 'Edit' case 'edited': return 'Save' case 'editing': return 'Cancel' } } } <transition> <button v-bind:key="docState"> {{ buttonMessage }} </button> </transition> // ... computed: { buttonMessage: function () { switch (this.docState) { case 'saved': return 'Edit' case 'edited': return 'Save' case 'editing': return 'Cancel' } } }

Vue.js 混入

混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

来看一个简单的实例：

var vm = new Vue({
    el: '#databinding',
    data: {
    },
    methods : {
    },
});
// 定义一个混入对象
var myMixin = {
    created: function () {
        this.startmixin()
    },
    methods: {
        startmixin: function () {
            document.write("欢迎来到混入实例");
        }
    }
};
var Component = Vue.extend({
    mixins: [myMixin]
})
var component = new Component();

选项合并
当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。

比如，数据对象在内部会进行浅合并 (一层属性深度)，在和组件的数据发生冲突时以组件数据优先。

以下实例中，Vue 实例与混入对象包含了相同的方法。从输出结果可以看出两个选项合并了。

var mixin = {
    created: function () {
        document.write('混入调用' + '<br>')
    }
}
new Vue({
    mixins: [mixin],
        created: function () {
        document.write('组件调用' + '<br>')
    }
});

输出结果为：
混入调用
组件调用
如果 methods 选项中有相同的函数名，则 Vue 实例优先级会较高。如下实例，Vue 实例与混入对象的 methods 选项都包含了相同的函数：

var mixin = {
    methods: {
        hellworld: function () {
            document.write('HelloWorld 方法' + '<br>');
        },
        samemethod: function () {
            document.write('Mixin：相同方法名' + '<br>');
        }
    }
};
var vm = new Vue({
    mixins: [mixin],
    methods: {
        start: function () {
            document.write('start 方法' + '<br>');
        },
        samemethod: function () {
            document.write('Main：相同方法名' + '<br>');
        }
    }
});
vm.hellworld();
vm.start();
vm.samemethod();

输出结果为：
HelloWorld 方法
start 方法
Main：相同方法名

以上实例，我们调用了以下三个方法：

vm.hellworld();
vm.start();
vm.samemethod();

从输出结果 methods 选项中如果碰到相同的函数名则 Vue 实例有更高的优先级会执行输出。

全局混入
也可以全局注册混入对象。注意使用！ 一旦使用全局混入对象，将会影响到 所有 之后创建的 Vue 实例。使用恰当时，可以为自定义对象注入处理逻辑。

// 为自定义的选项 'myOption' 注入一个处理器。
Vue.mixin({
  created: function () {
    var myOption = this.$options.myOption
    if (myOption) {
      console.log(myOption)
    }
  }
})
 
new Vue({
  myOption: 'hello!'
})
// => "hello!"

谨慎使用全局混入对象，因为会影响到每个单独创建的 Vue 实例 (包括第三方模板)。

联系我们 沪ICP备13005482号-10