Vue 学习归纳

2021-04-21  本文已影响0人  想聽丿伱說衹愛我

一、简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，易于上手。
Vue 有个特点是响应式，当数据发生变化时，视图会自动响应，元素会匹配新的数据。
在 JS 中，需要text = "hello world"; document.getElementById("id").innerHTML = text;才能改变元素的值；
而 Vue 中，只需要text = "hello world"，元素的值就会自动改变。
参考了Vue教程和Vue API。

二、使用 Vue

  1. 使用html
    需要先使用<script></script>引入Vue，再在之后的<script></script>中使用new Vue()创建 Vue。
<body>
        <!-- 最新版本 -->
        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <!-- 指定版本 -->
        <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> -->
        <div id="div">
            
        </div>
        <script type="text/javascript">
            var vm = new Vue({
                el: "#div"
            })
        </script>
    </body>

el: "#div"表示将 Vue 挂载到id = "div"的元素上。

  1. 使用 main.js
    先使用npm install vue下载 Vue，在 main.js 中使用new Vue()初始化。
import Vue from 'vue'
import App from './App.vue'

new Vue({
    el: "#app",
    render: h => h(App)
})

App.vue是主页面，render: h => h(App)表示用主页面来渲染 Vue，el: "#app"表示将该 Vue 挂载到id="app"的元素上，该元素一般在 index.html 里。
注：通常使用第二种方式创建 Vue，界面代码写在.vue文件中，通过 Vue Router 跳转界面。

  1. 使用.vue文件
<template>
    <div>
    </div>
</template>

<script>
    export default {

    }
</script>

<style scoped="scoped">
</style>

.vue文件叫做单文件组件，<template></template>中为 html 语句。要在 div 中写界面代码，不然会报错，因为每个组件必须只有一个根元素。
<script></script>中为 JS 语句，export default { }中为 Vue 语句。
<style></style>中为 CSS 语句，通常添加scoped="scoped"，表示样式只在当前组件中生效。
注：后面的介绍语法都是在单文件组件使用的，而不是官方教程那样在 html 中使用。

三、模板语法

1、修改文本
使用{{ }}为一个元素添加动态的内容。里面是一个变量，变量为data选项中的key。

<template>
    <div>
        <div>{{ name }}</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                name: "zhangsan",
            };
        }
    }
</script>

<template>
    <div>
        <div v-html="age"></div>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                age: "<b>20</b>"
            };
        }
    }
</script>
<style scoped="scoped">
    b {
        color: red;
    }
</style>

修改了 DOM 中的element.innerHTML。此时相当于<div><b>20</b></div>。
注：scoped的样式不能应用于v-html指令中的元素。如上面的 b 元素字体不会变为红色。

  1. 修改属性
    在 html 中，通常元素的属性会赋值为字符串。使用v-bind指令，可为属性绑定一个表达式。
<template>
    <div>
        <div v-bind:title="detailAderss">{{ adress }}</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                adress: "cd",
                detailAderss: "成都成华区"
            };
        }
    }
</script>

鼠标指着cd时


v-bind指令可简写成:，如<div :title="detailAderss">{{ adress }}</div>。
  1. 指令
    指令(Directives)是带有v-前缀的特殊属性，如v-bind。
    指令的值通常是一个表达式，除了v-for，如v-bind:title="detailAderss"后面的detailAderss。
    指令也有参数，在:后面，如v-bind:title="detailAderss"后面的title就是指令的参数。
    查看全部指令。
<template>
    <div>
        <div v-bind:[attName]="detailAderss">{{ adress }}</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                adress: "cd",
                detailAderss: "成都成华区",
                attName: "title"
            };
        }
    }
</script>

此时相当于<div v-bind:title="detailAderss">{{ adress }}</div>。
指令参数的值通常是一个字符串，值为null则可以被显性地用于移除绑定。

四、事件

  1. 绑定事件
    在 html 中，使用<div onclick="clickAction()"></div>来绑定 DOM 事件。
    在 Vue 中，使用v-on指令绑定 DOM 事件，如<div v-on:click="clickAction">。

    • 要注意的是，要删除原事件前面的on，如onclick -> click。
    • 当表达式是一个函数调用时，在 html 中要使用()，如onclick="clickAction()"。
    • 而在 Vue 中可以不用，但当需要传入参数时，则必须添加()，如v-on:click="clickAction"、v-on:click="clickAction('a', 'b')"。
    • 函数传入的参数可为$event，即为事件对象，如v-on:click="clickAction('a', $event)"。

    v-on指令可简写成@，如<div @click="clickAction">。

<template>
    <div>
        <div @click="clickAction">{{ funName }}</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                funName: "click me"
            };
        },
        methods: {
            clickAction: function(a) {
                alert(event.type +" " + this.$data.funName)
            }
        }
    }
</script>

方法要写在methods选项中，它是一个对象，而每个方法则是对象中的一组键值对。
函数有两个写法，如clickAction: function() { }、clickAction() { }。
若函数有参数，则写成clickAction: function(a, b) { }、clickAction(a, b) { }。

  1. 键盘事件
    使用@keydown、@keyup、@keypress绑定键盘事件，分别为按键按下、按键抬起、按键按下并抬起。
    在 JS 中，在函数中使用事件对象的key或keyCode属性判断按下了哪一个按键；在 Vue 中，使用修饰符判断按键，如<input @keyup.enter=""></input>，表示在按下回车键时触发。
<template>
    <div>
        <input @keyup.enter="keyupAction"></input>
    </div>
</template>

<script>
    export default {
        methods: {
            keyupAction: function() {
                alert(event.key + " " + event.keyCode)
            }
        }
    }
</script>

有些旧浏览器的key与keyCode的对应关系可能与新的不一致，可以使用全局属性Vue.config.keyCodes修改，如Vue.config.keyCodes.f1 = 112。

  1. 鼠标事件
    在 JS 中，使用事件对象的button属性判断哪个鼠标按键被按下，012分别表示左键、中键、右键。
    在 Vue 中，使用修饰符.left .right .middle判断哪个鼠标按键被按下，如@click.right=""。

  2. 绑定多个方法
    v-on指令的值可以是一个对象，可用于绑定多个方法，如v-on="{ click: clickAction, dblclick: dblclickAction }"。
    但这种方式不支持修饰符，也不支持给函数传入参数。

五、计算属性

模板语法插值时，可向里面传入一个表达式，表达式可为一个变量，可为一个方法，也可为一个计算属性。
<div>{{ name }}</div>，name是一个变量，值通常是一个简单的值，如{name: "zhangsan"}。
<div>{{ getName() }}</div>，getName()是一个方法，可在函数里实现复杂的运算，最后返回一个值。

      methods: {
            getName: function() {
                //一系列运算
                return "zhangsan"
            }
        }

<div>{{ getName1 }}</div>，getName1是一个计算属性，也可在里面实现复杂的运算，最后返回一个值。

        computed: {
            getName1: function() {
                //一系列运算
                return "zhangsan"
            }
        }

  1. 计算属性与方法
    计算属性与方法实际上都是函数，但方法是写在methods选项中，而计算属性写在computed选项中，选项是一个对象。
    在调用方法时，每调用一次都会执行一次函数。
    在调用计算属性时，只会执行一次函数，再次调用时则使用之前的返回值；若函数中使用的响应式变量发生了变化，才会重新调用一次函数。如computed: { getName1: function() { return this.name.toUpperCase() } }，只有当name的值变化时才会重新执行函数。
    注：响应式变量指的是data选项中的变量。

  2. 何时使用计算属性
    计算属性可以节约系统资源，当使用了一个大数组时，使用方法则会每次调用都遍历一次数组，而使用计算属性则只会遍历一次。

  3. 计算属性的setter

computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[1]
    }
  }
}

执行fullName = "Sherlock Holmes"时会调用set方法，使firstName和lastName变量更新；由于这两变量发生了变化，所以下次使用计算属性fullName时会重新执行一次函数。

六、侦听

  1. 侦听属性
    响应式变量改变时计算属性会重新调用一次函数，这实现了变量的被动监听，但这并不好用。
    而使用侦听属性可以实现变量的主动监听。
export default {
        data() {
            return {
                watchProperty: ""
            };
        },
        watch: {
            watchProperty: function(val, oldval) {
                alert("新值为" + val + "，旧值为" + oldval)
            }
        }
}

侦听属性需要写在watch选项中，选项是一个对象。
对象键值对的值可以是一个函数，函数会传入两个参数，参数为变量的新值和旧值。
还可以是字符串、数组、对象，详见watch。

<script>
    export default {
        data: function() {
            return {
                message: "message"
            }
        },
        mounted: function() {
            this.$watch("message", function(newVal, oldVal) {
                alert(newVal+" "+oldVal)
            }, {})
        }
    }
</script>

$watch()有三个参数：

  1. 侦听事件
    通常，在组件上使用$emit()触发一个自定义事件，在父组件上使用v-on指令监听这个事件。详见 十一、组件 -- 3. 事件方法。
    那么，在本组件中怎么监听由$emit()触发的自定义事件呢？可以使用实例方法this.$on()实现。
<template>
    <div>
        <div @click="$emit('tap')">title</div>
    </div>
</template>

<script>
    export default {
        mounted: function() {
            this.$on("tap", function() {
                alert(123)
            })
        }
    }
</script>

$on()一般写在mounted选项中，选项是一个函数，它会在 Vue 实例被挂载后调用。
$on()有两个参数：

$on(eventName, eventHandler) 侦听一个事件
$once(eventName, eventHandler) 一次性侦听一个事件，事件名不支持数组。
$off(eventName, eventHandler) 停止侦听一个事件

七、class与style的绑定

在 html 中，通过<div class="class1 class2" style="width: 100px;height: 30px;"></div>来绑定元素的 CSS 类名和样式。
在 Vue 中，则使用v-bind指令动态地绑定类名或样式。

  1. 对象语法
    v-bind指令可为属性绑定一个变量，当属性为class或style时，这个变量可以是一个对象。
<template>
    <div>
        <div v-bind:class="classObject"></div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                pageIndex: 5
            }
        },
        computed: {
            classObject: function() {
                return {
                    class1: this.pageIndex%3 == 0,
                    calss2: this.pageIndex%3 == 1,
                    calss3: this.pageIndex%3 == 2
                }
            }
        }
    }
</script>

变量为计算属性时，可以通过一系列判断后再返回对象。上面的作用是根据pageIndex来使用不同的类名。
当然，style也可以像上面一样使用计算属性。

  1. 数组语法
    v-bind指令可为属性绑定一个变量，当属性为class或style时，这个变量可以是一个数组。

注：使用v-bind指令时，Vue 会在 CSS 属性前自动添加上各种浏览器的前缀。

八、条件渲染

  1. v-if
    与 JS 中的if、else if、else一样，在 Vue 中也能通过指令v-if、v-else-if、v-else来条件渲染不同的元素。
    三个指令的值都是一个表达式，且表达式的结果应该是一个布尔值。
    必须按顺序书写，在一组元素中，带有v-else-if指令的元素可存在零个或多个，带有v-else指令的元素可存在至多一个。
<template>
    <div>
        <div v-if="show1">if</div>
        <div v-else-if="show2">else if</div>
        <div v-else>else</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                show1: true,
                show2: true
            }
        }
    }
</script>

当show1为true，渲染第一个div；当show1为false，show2为true，渲染第二个div；当都为false，渲染最后一个div。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" />
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" />
</template>

Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。
上面例子的 label 元素和 input 元素在切换时，实际上是修改 label 元素的内容和 input 元素的占位符。

若在输入框中输入了字符串，你会发现在切换时字符串并不会变化。
但这种情况有时并不符合要求。给需要重新渲染的元素设置不同的key值，就能解决这个问题。

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="username">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email">
</template>

此时 laebl 元素会复用，input 元素会重新渲染。

  1. v-show
    使用v-show指令也可以实现条件渲染，如<div v-show="show">show</div>。
    v-show指令的值也是一个表达式，表达式的结果是一个布尔值。
    结果为true则显示，为false则不显示，实际上是将元素的CSS切换成display: none。

v-if在初始渲染时条件为假时什么也不做；直到条件第一次变为真时，才会开始渲染。v-show不管初始条件是什么，元素都会被渲染。
v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果要频繁地切换，则使用v-show较好。
v-if支持 template 元素，而v-show则不支持。

九、循环渲染

在 JS 中，使用for来循环执行代码；在 Vue 中，可以使用v-for指令来循环渲染元素。
通常，指令的值都是一个表达式，而v-for指令的值为alias in expression。
其中expression的值可为数组、对象、数字、字符串、Iterable（详见迭代协议）。

<template>
    <div>
        <div v-for="item in items" :key="item.id">{{item.content}}</div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                items: [
                    {
                        id: "id1",
                        content: "item1"
                    },
                    {
                        id: "id2",
                        content: "item2"
                    }
                ]
            }
        }
    }
</script>

v-for指令的值还可以为"item,index in items"，index为元素的索引。
in可以替换成of，如item of items、"item,index of items"

十、表单绑定

在 html 中，给一个输入框设定初始值，如<input value="hello"></input>。
当在输入框修改值后，实际上value的值并没有改变。可以监听oninput事件，在函数使用element.setAttribute()来改变value的值。
在 Vue 中，使用v-model指令来实现双向绑定，实际上也是通过监听输入事件以更新数据。

v-model指令针对不同类型的 input 元素使用不同的值与事件。
text 和 textarea 使用 value 属性和 input 事件；
checkbox 和 radio 使用 checked 属性和 change 事件；
select 使用 value 属性和 input 事件。

十一、组件

组件是可复用的 Vue 实例，.vue文件就是一个单文件组件。

  1. 使用组件
<template>
    <div>
        <CustomComponent></CustomComponent>
        <Custom-Component></Custom-Component>
        <custom-component></custom-component>
        
        <CustomComponent1></CustomComponent1>
        <custom-component1></custom-component1>

        <custom-component2></custom-component2>
    </div>
</template>

<script>
    import CustomComponent from './CustomComponent.vue'
    export default {
        components: {
            CustomComponent,
            CustomComponent1: {
                template: "<div>1234</div>",
                data: function() {
                    return {}
                }
            }
            'custom-component2': {
                template: "<div>1234</div>",
            }
        }
    }
</script>

可使用import引入其他的.vue文件，如组件CustomComponent；也可以在当前文件中直接创建组件，如组件CustomComponent1。
组件要写在components选项中，选项是一个对象。当对象的键值对的键值相同时，可以省略值，如{ CustomComponent }相当于{ CustomComponent: CustomComponent }。

使用组件时，可以使用大驼峰CustomComponent，也可以使用分隔式Custom-Component，也可以使用小写分隔式custom-component，建议使用小写分隔式，如<custom-component></custom-component>。
若注册组件时就使用的小写分隔式(此时两端要加引号)，如'custom-component2'，使用时也就只能使用小写分隔式。

  1. 组件属性
    每个元素都有属性，自定义的组件在props选项中声明自定义属性，可使用this.$props获取选项的值。
    props选项中声明的属性可以像data选项中的变量一样，直接在组件中使用。
<template>
    <div>
        <h1>{{ title }}</h1>
        <p>{{ content }}</p>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                title: "component"
            }
        },
        props: ['content']
    }
</script>

组件的data选项必须为一个函数，它返回一个对象。这样可以保证每个组件实例有只属于自己的数据。

<script>
    export default {
        inheritAttrs:false
    }
</script>

使用$attrs属性可获取所有已使用且未在props中声明的属性，它是一个对象，里面不包括class、style。

<template>
    <div>
        <div val1="$attrs['val1']"></div>
        <div val2="$attrs['val2']"></div>
        <div v-bind="$attrs"></div>
        <div>{{ $attrs["val1"] }}</div>
    </div>
</template>

<script>
    export default {
    }
</script>

使用<custom-component val1="" val2=""></custom-component>设置未声明的属性，在组件中也可使用$attrs属性来实现props的功能，但不推荐。

  1. 事件方法
    每个元素都有事件方法，自定义组件中使用实例方法$emit()来声明自定义方法。
<template>
    <div>
        <h1 @click="$emit('tap', 1, 2)">{{ title }}</h1>
        <p>{{ content }}</p>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                title: "component"
            }
        },
        props: ['content']
    }
</script>

<h1 @click="$emit('tap', 1, 2)">{{ title }}</h1>的功能是，当点击 h1 元素时，触发一个名为 tap 的事件，并为事件提供了两个参数1和2；$emit中事件名必须的。
当然，也可以将$emit()写在@click="clickAction"绑定的函数中。

父组件通过<custom-component @tap="tapAction"></custom-component>来监听 tap 事件，并通过tapAction: function(val1, val2) { }使用这两个参数，或在函数中通过arguments[0]、arguments[1]使用这两参数。

  1. 组件使用v-model
    使用v-model指令时，text 和 textarea 绑定的是 value 属性 和 input 事件，相当于<input :value="text" @input="text = $event.target.value">。
    组件也能使用v-model指令，也默认绑定 value 属性与 input 事件，相当于<custom-component :value="text" @input="text = $event">。
    在 input 元素中，$event表示事件对象；而在组件中，$event表示$emit()的第二个参数。
<script>
    export default {
        model: {
            prop: "content",
            event: "change"
        },
        props: ['content']
    }
</script>

此时变更为绑定content属性与change事件。

  1. 插槽
    html 元素大都可以通过<div>message</div>在开始和结束标签中添加内容。
    而对于组件，<custom-component>message</custom-component>标签中的内容是没有任何效果的。
    为了使添加的内容生效，可以使用 slot 元素。
<template>
    <div>
        <h1 @click="$emit('tap', 1, 2)">{{ title }}</h1>
        <slot></slot>
        <p>{{ content }}</p>
    </div>
</template>

此时，<custom-component>message</custom-component>标签中的message就会替换到<slot></slot>的位置。

<template>
    <div>
        <slot name="a"></slot>
        <slot></slot>
        <slot name="b"></slot>
    </div>
</template>

<slot></slot>是一个默认插槽，name默认为default，相当于<slot name="default"></slot>。

<custom-component2>
            <div>default</div>
            <template v-slot:a>aaa</template>
            <template v-slot:b>bbb</template>
        </custom-component2>

使用时具名插槽的内容必须写在 template 元素中，通过v-slot指令的参数来匹配插槽的名字。
若为默认插槽，可省略<template v-slot:default></template>。


内容显示的顺序只与组件中各插槽的顺序有关。 
<template>
    <div>
        <slot name="a"></slot>
        <slot age="20" v-bind:adress="adressV"></slot>
        <slot name="b"></slot>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                adressV: "cd"
            }
        }
    }
</script>

在插槽 slot 上添加属性 age 和 adress，也可使用v-bind指令为属性绑定一个表达式。

<custom-component2>
            <template v-slot:default="value">
                {{ value }}
            </template>
        </custom-component2>

v-slot:default="value"表示给name="default"的插槽(即默认插槽)提供一个变量 value。
插槽就能够使用变量 value 的数据，而 value 的值为{ "age": "20", "adress": "cd" }，即在 slot 上添加的属性与属性值。
若只有默认插槽，有另一种写法，如<custom-component2 v-slot="value">{{ value }}</custom-component2>

  1. 动态组件
    使用 component 元素和is属性来使用动态组件。
    <component is="custom-component"></component>相当于<custom-componen></custom-componen>，通常使用v-bind:is=""绑定一个变量，就可以改变变量的值来切换不同的组件。
    除了使用组件，也可以用在普通的 html 元素上，如<component is="div"></component>。
  1. 异步组件
    通常，我们都是在本地创建组件，然后在本地直接使用组件。
    有时候，组件的代码在服务器端，则需要先从服务器获取组件代码，这时就要使用异步组件。
        components: {
            ServiceComponent: function(resolve, reject) {
                var http = new XMLHttpRequest()
                http.onreadystatechange = function() {
                    if (http.readyState == 4&&http.status == 200) {
                        const component = {
                            template: http.responseText
                        }
                        resolve(component)
                    } else {
                        reject("组件获取失败")
                    }
                }
                http.open("GET", "http_url", true)
                http.send()
            }
        }

Vue 允许你以一个函数的方式定义你的组件，这个函数会异步解析你的组件。
Vue 只有在这个组件需要被渲染的时候才会触发该函数，且会把结果缓存起来供以后再次渲染。
函数有两个回调参数，调用resolve()表示组件加载成功，调用reject()表示组件加载失败，

  1. 访问子组件
    使用ref属性为元素或子组件注册引用信息，如<custom-component ref="custom"></custom-component>。
    再使用$refs引用就会指向子组件的实例，如this.$ref.custom。
    若用在 html 元素上，引用就会指向 DOM 元素。
    注：$refs 只会在组件渲染完成之后生效，并且它不是响应式的。应该避免在 template 或计算属性中访问它。

  2. 访问父组件
    使用$parent可访问父组件的实例，如this.$parent。

相比$parent来说，依赖注入可以让我们在任意后代组件中访问数据，而不需要暴露整个父组件实例。
后代组件不需要知道被注入的数据来自哪里。
父组件不需要知道哪些后代组件使用了它提供的数据。
注入的数据是非响应式的。

十二、过渡

使用 transition 元素，给其他元素或组件添加进入、离开过渡/动画效果。
将要过渡/动画的元素放在 transition 中，如<transition name=""><div></div></transition>
然后在CSS类名中添加过渡/动画效果。

  1. 类名
    在进入/离开的过渡中，会有6个类名切换。
    v-enter定义进入过渡/动画的开始状态。在元素插入之前生效，在元素插入之后的下一帧移除。为动画时会在animationend事件触发时移除。
    v-enter-active定义进入过渡/动画生效时的状态。在这里设定进入过渡/动画的过程时间、延迟和曲线函数。
    v-enter-to定义进入过渡/动画的结束状态。在元素插入之后下一帧生效 (v-enter移除之时)，在过渡/动画完成之后移除。
    v-leave定义离开过渡/动画的开始状态。在元素删除之前生效，在元素删除之后的下一帧移除。为动画时会在animationend事件触发时移除。
    v-leave-active定义离开过渡/动画生效时的状态。被用来定义离开过渡/动画的过程时间、延迟和曲线函数。
    v-leave-to定义离开过渡/动画的结束状态。在元素删除之后的下一帧生效 (v-leave移除之时)，在过渡/动画完成之后移除。

    前面的v表示 transition 元素的name的值，如<transition name="div"></transition>时使用div-enter-active。
    当没有设置name时，默认使用v。


    v-enter-active表示元素插入、执行过渡/动画、过渡/动画结束这三个阶段。
    v-enter-active = v-enter + v-enter-to，大概相当于v-enter占v-enter-active的前1%，v-enter-to占后面99%。
    v-leave-active与v-enter-active类同。 
<template>
    <div>
        <button @click="show = !show">switch</button>
        <transition name="div">
            <div v-if="show">animation</div>
        </transition>
        <transition name="div1">
            <div v-if="show">transtion</div>
        </transition>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                show: true
            }
        }
    }
</script>

<style>
    /* 过渡 */
    .div1-enter-active, .div1-leave-active {
      transition: all 1s ease;
    }
    /* 设置进入过渡执行前或离开过渡执行后的CSS，通常这两个时间点CSS相同 */
    .div1-enter, .div1-leave-to  {
      opacity: 0;
      transform: translateX(60px);
    }
    
    /* 动画 */
    .div-enter-active {
      animation: framename 2s;
    }
    /* 通常离开动画是进入动画的反向 */
    .div-leave-active {
        animation: framename 2s reverse;
    }
    /* from中设置动画的初始状态CSS to中设置结束状态CSS */
    @keyframes framename{
        from{
            transform: translate(0px, 0px);
        }
        25% {
            transform: translate(50px, 0px)
        }
        50% {
            transform: translate(50px, 50px)
        }
        75% {
            transform: translate(0px, 50px)
        }
        to{
            transform: translate(0px, 0px);
        }
    }
</style>

<transition name="div1" enter-active-class="aaa" leave-active-class="bbb">
    <div v-if="show">transtion</div>
</transition>

.aaa, .bbb {
    transition: all 1s ease;
}

使用属性enter-class、enter-active-class、enter-to-class、leave-class、leave-active-class、leave-to-class自定义过渡/动画的类名。
如上，aaa、bbb相当于div1-enter-active、div1-leave-active类名。

  1. 监听类型
    Vue 会监听transitionend或animationend事件来确定过渡/动画的结束。若为一个元素同时设定过渡和动画，Vue 并不知道监听哪一个事件来确定过渡/动画的结束。
    可以将type属性设为animation、transition来确定监听哪一个事件，如<transition type="animation"></transition>。

  2. 持续时间
    过渡/动画的持续时间通常是在CSS属性中设置，也可以使用duration属性设定持续时间，如<transition duration="1000"></transition>。
    可以分别设定进入和离开的持续时间，如<transition duration="{ enter: 500, leave: 800 }"></transition>。
    duration属性设定的持续时间优先度更高。当到了设定的持续时间，即使过渡或动画还在执行，也会立即结束过渡或动画。

  3. 事件
    transition 元素有before-enter、enter、after-enter、enter-cancelled、before-leave、leave、after-leave、leave-cancelled这几种事件，会在过渡前、过渡时、过渡后、过渡取消时触发，如<transition @before-enter="beforeEnter" @enter="enter"></transition>。
    事件可以与 CSS 类名一起使用，建议单独使用。使用<transition :css="false"></transition>可屏蔽 CSS。

    • 事件会给绑定的函数提供一个参数，参数值为执行过渡/动画的元素。
    • 若为enter、leave事件，还会多提供一个参数，参数为一个回调函数。
      需要在过渡/动画完成时执行回调函数，如enter: function(el, done) { done() }。
      若不执行回调，过渡/动画就不会结束，就不会触发after-enter事件；执行回调函数后，过渡/动画会立即结束。

  4. 初始渲染过渡
    当元素初次渲染到界面时，也可以执行过渡。使用appear属性来实现初始渲染过渡。

<template>
    <div>
        <button @click="show = !show">switch</button>
        <transition name="div" appear="appearname">
            <div v-if="show">transtion init1</div>
        </transition>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                show: true
            }
        }
    }
</script>

<style scoped="scoped">
    .div-enter-active, .div-leave-active {
      transition: all 1s ease;
    }
    .div-enter, .div-leave-to  {
      opacity: 0;
      transform: translateX(60px);
    }

    .div-appearname  {
      opacity: 0;
      transform: translateX(60px);
    }
    .div-appearname-active {
      transition: all 1s ease;
    }
    .div-appearname-to {
        
    }
</style>

初始渲染过渡有三个类名，默认为v-appear、v-appear-active、v-appear-to，表示初始渲染过渡前、初始渲染过渡中、初始渲染过渡完成。
根据name属性和appear属性的值决定类名，若<transition name="div" appear="appearname">，那么类名为div-appearname、div-appearname-active、div-appearname-to。

初始渲染过渡也可以通过appear-class、appear-active-class、appear-to-class使用自定义类名，如<transition appear appear-active-class="" appear-class="" appear-to-class=""></transition>。
初始渲染过渡也可以使用事件before-appear、appear、after-appear、appear-cancelled。表示初始渲染过渡前、初始渲染过渡时、初始渲染过渡后、初始渲染过渡取消。

  1. 元素切换的过渡
    上面介绍的都是单个元素的进入与离开过渡，若想使用多个元素间切换时的过渡，可使用v-if、v-else-if、v-else。
<template>
    <div>
        <button @click="show = !show">switch</button>
        <transition name="div">
            <div v-if="show" key="init1">transtion init1</div>
            <div v-else key="init2">transtion init2</div>
        </transition>
    </div>
</template>

此时就会在两个 div 中切换。
必须给每个元素的key属性设置不同的值，否则 Vue 会直接改变元素的内容，就不会产生过渡效果。
若两个元素是不同的元素，也可以不设置key属性，但建议设置。 
<template>
    <div>
        <button @click="name == 'component1' ? 'component2' : 'component1'">switch</button>
        <transition name="div" mode="out-in">
            <component :is="name"></component>
        </transition>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                name: "component1"
            }
        },
        components: {
            component1: {
                template: '<div>Component 1</div>'
            },
            component2: {
                template: '<div>Component 2</div>'
            }
        }
    }
</script>

<style scoped="scoped">
    .div-enter-active, .div-leave-active {
      transition: all 1s ease;
    }
    .div-enter, .div-leave-to  {
      opacity: 0;
      transform: translateX(60px);
    }
</style>
  1. 列表元素的过渡
    上面我们过渡的，实际上都是单一元素或组件的过渡；若同时要过渡多个元素，需要使用 transition-group 元素，且多个元素必须设置不同的key。
    不同于 transition 元素，transition-group 会以一个真实元素呈现，默认为一个 span，使用tag属性更换为其他元素。
<template>
    <div>
        <button @click="click">add</button>
        <br>
        <transition-group>
            <div v-for="item in datas" :key="item" style="display: inline-block;">{{ item }}</div>
        </transition-group>
    </div>
</template>

<script>
    export default {
        data: function() {
            return {
                datas: [1, 2, 3, 4, 5],
                next: 6
            }
        },
        methods: {
            click: function() {
                var num = Math.floor(Math.random() * this.datas.length)
                this.datas.splice(num, 0, this.next++)
            }
        }
    }
</script>

<style scoped="scoped">
    .v-enter-active, .v-leave-active {
      transition: all 1s ease;
    }
    .v-enter, .v-leave-to  {
      opacity: 0;
      transform: translateY(30px);
    }
</style>
  1. 状态过渡
    上面都是元素的进入或离开过渡，若想让数据元素本身产生动效，可以使用状态过渡。如数字从0变到100的渐增式效果。
    详见状态过渡。

十三、混入

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能，一个混入对象包含任意的组件选项。

export default {
    data: function() {
        return {
            b: 22,
            c: 33
        }
    },
    created: function() {
        console.log('hello!11')
        this.action()
    },
    methods: {
        action: function() {
            console.log('action11')
        }
    }
}

在.js文件中添加要混入的选项。

<template>
    <div>
        <div>{{ a }}</div>
        <div>{{ b }}</div>
        <div>{{ c }}</div>
    </div>
</template>

<script>
    import Test from './Test11.js'
    export default {
        data: function() {
            return {
                a: 1,
                b: 2//同名冲突时 使用组件中的数据
            }
        },
        mixins: [Test],
        //生命钩子 同名冲突 两个函数都会调用 优先调用混入中的函数
        created: function() {
            console.log('hello!22')
            this.action()
        },
        //方法 同名冲突 优先使用组件中的方法
        methods: {
            action: function() {
                console.log('action22')
            }
        }
    }
</script>

在单文件组件中通过import引入.js文件，混入的对象写在mixins选项中，选项是一个数组。

  1. 选项合并
    当组件和混入对象含有同名选项时，这些选项会进行合并。

  1. 全局混入
    使用Vue.mixin({})来注册全局混入，需要写在new Vue()前面。

  2. 自定义合并
    混入数据与组件数据合并时，有一个默认的合并策略。使用Vue.config.optionMergeStrategies可修改合并策略，详见自定义选项合并策略。

  3. 扩展
    扩展(extend)和混入功能差不多，都是给组件添加其他的选项功能。
    混入使用mixins选项，它是一个数组；而扩展使用extend选项，它是一个对象或函数。

<script>
    export default {
        extends: {
            created: function() {
                
            },
            methods: {
                click: function() {
                    
                }
            }
        }
    }
</script>

扩展与混入的选项合并策略相同，不同点在于mixins可同时混入多组对象，而extend只能扩展一组对象。
扩展的优先级比混入高，但都低于组件本身。

十四、自定义指令

Vue 有自带的指令，但也可以使用directives选项来自定义指令，选项是一个对象。

<template>
    <div>
        <div v-redtext></div>
    </div>
</template>

<script>
    export default {
        directives: {
            redtext: {
                inserted: function (el) {
                  el.style.color = "red"
                  el.innerText = "default text"
                }
              }
        }
    }
</script>
  1. 钩子函数
    自定义指令有几个钩子函数：
    • bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
    • inserted 元素插入父节点时调用 (仅保证父节点存在，但不一定已插入到文档中)。
    • update 元素的 VNode 更新时调用，可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。
    • componentUpdated 元素的 VNode 及其子 VNode 全部更新后调用。
    • unbind只调用一次，指令与元素解绑时调用。
  1. 动态参数
    指令可使用[]设置动态参数，如v-on:[dynamic]=""。
    自定义的指令也可以使用动态参数，如v-redtext:[dynamic]，在钩子函数中通过binding.arg获取参数。

十五、渲染函数

通常使用模板来创建组件，也可以使用render选项来创建组件。

<script>
    export default {
        render: function (createElement) {
            return createElement('div', {}, [
                createElement("h1", {}, "title")
            ])
        }
    }
</script>

<style>
</style>

上面例子相当于<template><div><h1>title</h1></div></template>。
使用render选项来创建组件时需要删除最上面的<template></template>，也会忽略template选项的值。

  1. VNode
    每个元素都是一个节点，每段文字也是一个节点，注释和属性也都是节点。一个节点就是页面的一个部分，每个节点都可以有子节点 。
    Vue 通过建立一个虚拟 DOM 来追踪自己要如何改变真实 DOM，虚拟 DOM 由虚拟节点(virtual node)组成，即VNode。
    回调函数createElement()可以创建一个虚拟节点 。它包含的信息会告诉 Vue 需要渲染什么样的节点，包括节点及其子节点的描述信息。
    VNode 必须是唯一的，下面是错误的。
render: function (createElement) {
  var myParagraphVNode = createElement('p', 'hi')
  return createElement('div', [
    // 错误 - 重复的 VNode
    myParagraphVNode, myParagraphVNode
  ])
}

但可以写成：

render: function (createElement) {
  return createElement('div', [
    createElement('p', 'hi'), createElement('p', 'hi')
  ])
}
  1. 参数
    createElement()需要传三个参数，如createElement("h1", {}, "title")。
    • 参数一是必填项，可为一个 HTML 标签名、组件选项对象，或者 resolve 了上述任何一种的async函数。
    • 参数二是一个对象，为元素的各种属性，如props、class、id等。
    • 参数三是一个由子 VNode 组成的数组，如createElement("div", {}, [createElement("h1", "title"), createElement("p", "content")])。
      或为一个字符串，内容为元素的innerHTML。
{
  // 与 `v-bind:class` 的 API 相同，
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同，
  // 接受一个字符串、对象，或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML attribute
  attrs: {
    id: 'foo'
  },
  // 组件 prop
  props: {
    myProp: 'bar'
  },
  // DOM property
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器在 `on` 内，
  // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
  // 需要在处理函数中手动检查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽的格式为
  // { name: props => VNode | Array<VNode> }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其它组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其它特殊顶层 property
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}
  1. 插槽
data: function() {
            return {
                title: "标题",
                content: "内容"
            }
        },
        render: function (h) {
          return h('div', [this.$scopedSlots.header({
              title: this.title
          }), this.$scopedSlots.default({
              content: this.content
          })])
        }

相当于<div><slot :title="title" name="header"></slot><slot :content="content"></slot></div>。

  1. JSX
    JSX是一个插件，可使用模板来代替渲染函数。详见JSX。
    如render: h =>h("div", [h("h1", "title"), h("div", "contnet")])可写成redder: h=> (<div><h1>title</h1><div>content</div></div>)。

  2. 函数式组件
    组件比较简单时，即没有管理任何状态，没有监听任何传递给它的状态，也没有生命周期方法，它相当于一个接受一些props的函数。
    在这样的场景下，我们可以将组件的functional选项设为true，这意味它无状态，没有响应式数据(即没有data选项)，也没有实例 (即没有this)。

functional: true,
        props: {
            
        },
        render: function(createElement, context) {
            createElement("div", context.data, context.children)
        }

因为函数式组件只是函数，所以渲染开销也低很多。

十六、过滤器

过滤器用于一些常见的文本格式化。过滤器可以用在两个地方：{{ }}插值和 v-bind指令的值，如<div>{{ mesage | filter }}</div>、<div :title="message | filter"></div>。
过滤器写在filters选项中，选项是一个对象。

<template>
    <div>
        <div>{{ message | lowercase | uppercase }}</div>
    </div>
</template>

<script>
    export default {
        data: function () {
            return {
                message: "Hello World"
            }
        },
        filters: {
            lowercase: function(value) {
                return value.toLowerCase()
            },
            uppercase: function(value) {
                return value.toUpperCase()
            }
        }
    }
</script>

过滤器使用|与表达式相连，过滤器对象的键值对的值是一个函数，且表达式为函数的第一个参数。
可多个过滤器串联使用，如{{ message | lowercase | uppercase }}，前面过滤器得出的结果变为后面过滤器的第一个参数。
过滤器可传入其他参数，如{{ message | lowercase(arg1, arg2) }}，第一个参数为message，参数二三为arg1、arg2。

十七、生命周期

整个 Vue 实例初始化到销毁会经历如下过程。


生命周期分为多个阶段，每个阶段都会触发相应的钩子。
钩子有beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed这几种，详见生命周期钩子。
它们都是函数，使用时不要用箭头函数，因为箭头函数中this不指向 Vue 实例。

上一篇 下一篇

猜你喜欢

热点阅读