VUE 2.0 基础知识体系(个人笔记)

如何使用

安装 - npm

npm install vue

引入 - JavaScript

<script src="../node_modules/vue/dist/vue.js"></script>

引入 - module

<script type="module"> import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.esm.browser.js' </script>

新建Vue实例

(let vm = ) 可写
new Vue ({
    el:"app",
    data or data() :{
    //data对象为全局实例，data()函数为局部单独实例
    }, methods:{
    
    }
})
复制代码

基础

VUE - 生命周期

创建阶段

beforeCreate

实例刚在内存中创建出来，还没有初始化 data和 methods，只包含一些自带额生命周期函数

created

实例已经在内存中创建完成，此时data和methods已经创建完成

beforeMount

此时已经完成了模版的编译，只是还没有渲染到界面中去

mounted

模版已经渲染到了浏览器，创建阶段结束，即将进入运行阶段

运行阶段

beforeUpdate

界面中的数据还是旧的，但是data数据已经更新，页面中和data还没有同步中间处理过程（非生命周期，便于学习抽象化的中间处理过程先根据data中的数据，在内存中渲染出一个新的DOM，当新的DOM树更新之后，会重新渲染到真实的界面中去，从而实现了从 数据层（model）---》视图层（view）的转换

updated

页面重新渲染完毕，页面中的数据和data保持一致

销毁阶段

beforeDestroy： 

执行该方法的时候，Vue的生命周期已经进入销毁阶段，但是实例上的各种数据还出于可用状态

destroyed： 

组件已经全部销毁，Vue实例已经被销毁，Vue中的任何数据都不可用

vue基础内置指令

v-click：点击事件

v-pre：跳过编译,显示双括号语法内原始数据

v-for：遍历事件

v-text：更改文本事件

v-html：更改html属性事件

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

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

双向绑定：v-model

<div v-model="name"></div> <h1>hello:{{ name }}</h1> var data = {     name: "11" }

动态绑定：v-bind

双括号语法不能作用在 HTML 属性 上，遇到这种情况应该使用 v-bind 指令

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

v-if：判断事件

v-show：显示隐藏事件

• 频繁且主动的触发使用 v-show 否则使用v-if

v-slot：提供具名插槽或需要接收 prop 的插槽。

缩写：" # "

可放置在函数参数位置的 JavaScript 表达式 (在支持的环境下可使用解构)。可选，即只需要在为插槽传入 prop 的时候使用。

<!-- 具名插槽 -->
<template v-slot:header> Header content </template>
<!-- 接收 prop 的具名插槽 --> 
<infinite-scroll> <template v-slot:item="slotProps"> <div class="item"> {{ slotProps.item.text }} </div> </template> </infinite-scroll>
复制代码

白布加载：v-cloak

<style> [v-cloak]{display: none;} </style> <div v-cloak></div>

插值

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值

<div>{{data}}</div>

表达式

对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持，这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式

{{ number + 1 }} {{ ok ? 'YES' : 'NO' }} {{ message.split('').reverse().join('') }} <div v-bind:id="'list-' + id"></div>

过滤器

Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。

过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示： `

{{ message | capitalize }}`

你可以在一个组件的选项中定义本地的过滤器：

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

创建 Vue 实例之前全局定义过滤器：

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

• 当全局过滤器和局部过滤器重名时，会采用局部过滤器。

计算属性

模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。所以，对于任何复杂逻辑，你都应当使用计算属性。

var vm = new Vue({ el: '#example', data: { message: 'Hello' }, computed: { // 计算属性的 getter reversedMessage: function () { // this 指向 vm 实例 return this.message.split('').reverse().join('') } } })

watch(监听器)

虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。这就是为什么 Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

watch: { }

$watch.API

观察 Vue 实例上的一个表达式或者一个函数计算结果的变化。回调函数得到的参数为新值和旧值。表达式只接受简单的键路径。对于更复杂的表达式，用一个函数取代。

vm.$watch( expOrFn, callback, [options] )

v-bind 缩写 - " : "

动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。在绑定 class 或 style attribute 时，支持其它类型的值，如数组或对象。可以通过下面的教程链接查看详情。在绑定 prop 时，prop 必须在子组件中声明。可以用修饰符指定不同的绑定类型。没有参数时，可以绑定到一个包含键值对的对象。注意此时 class 和 style 绑定不支持数组和对象。

class与style的绑定

操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是 attribute，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数组。

绑定class

给 v-bind:class 一个对象，以动态地切换 class

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

计算属性绑定

<div v-bind:class="classObject"></div> classObject: function () { return { active: this.isActive && !this.error, 'text-danger': this.error && this.error.type === 'fatal' } }

数组绑定

<div v-bind:class="[activeClass, errorClass]"></div> data: { activeClass: 'active', errorClass: 'text-danger' }

绑定style

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div> data: { activeColor: 'red', fontSize: 30 }

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

data: { styleObject: { color: 'red', fontSize: '13px' } }

数组绑定语法可以将多个样式对象应用到同一个元素上

<div v-bind:style="[baseStyles, overridingStyles]"></div>

自定义指令

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

<div v-order></div>

全局注册自定义指令

Vue.directive('order', { })

局部注册自定义指令，组件中接受一个 directives 的选项

directives: { order: { } }

钩子函数(生命周期)

bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。

inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。

update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更 新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。

componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。

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

特殊属性

key

一般情况下，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。

有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。

它也可以用于强制替换元素/组件而不是重复使用它。当你遇到如下场景时它可能会很有用：

• 完整地触发组件的生命周期钩子
• 触发过渡

is

用于动态组件且基于 DOM 内模板的限制来工作。绑定动态组件使用。

ref

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

组件传递

props - 父传子组件

props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义验证和设置默认值。

语法：

type：String、Number、Boolean、Array、Object、Date、Function、Symbol、任何自定义构造函数、或上述内容组成的数组。会检查一个 prop 是否是给定的类型，否则抛出警告。

default：any为该 prop 指定一个默认值。如果该 prop 没有被传入，则换做用这个值。对象或数组的默认值必须从一个工厂函数返回。

required：Boolean定义该 prop 是否是必填项。在非生产环境中，如果这个值为 truthy 且该 prop 没有被传入的，则一个控制台警告将会被抛出。

validator：Function自定义验证函数会将该 prop 的值作为唯一的参数代入。在非生产环境下，如果该函数返回一个 falsy 的值 (也就是验证失败)，一个控制台警告将会被抛出。你可以在这里查阅更多 prop 验证的相关信息。

实例：

testOne.vue： <demo :message="str"></demo> testTwo.vue： props: {         message: {             type:String         }     }

• 注意，传递后的参数不能再更改，会导致原始数据发生变化。通常是拆解后再赋值使用或更改。

dataMsg:[...this.message]

$emit - 子传父组件

data(){ return { sun:"来自孙子组件的内容" } }, methods:{ sendhello(){ this.$emit('name',this.sun) } }

父组件引用

<sun v-model="sun"></sun> //或者 <sun @name="getSun"></sun> data(){ return { subordinate:"", } }, methods:{ //获取孙组件 getSun(val){ this.subordinate = val this.$emit('on-click',this.subordinate) }, //向主组件传递 sendSubordinate(){ this.$emit('on-click',this.subordinate) } },

再次传递，至主组件(App)

data(){ return { msg:"欢迎来到Vue", } }, components: { hello:hello }, methods:{ getSendSubordinate(val){ this.msg = val } }

修饰符

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

事件修饰符

在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。

为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。之前提过，修饰符是由点开头的指令后缀来表示的。

• .stop：阻止单击事件继续传播
• .prevent：提交事件不再重载页面
• .capture：添加事件监听器时使用事件捕获模式。即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
• .self：只当在 event.target 是当前元素自身时触发处理函数。即事件不是从内部元素触发的。

2.1.4 新增

.once：点击事件将只会触发一次

2.3.0 新增

.passive：滚动事件的默认行为 (即滚动行为) 将会立即触发，而不会等待 onScroll 完成。这其中包含 event.preventDefault() 的情况。

.native：现在在组件上使用 v-on 只会监听自定义事件 (组件用 $emit 触发的事件)。如果要监听根元素的原生事件，可以使用 .native 修饰符

注意

this指向问题

methods：{ function() { this //这个this指向当前的.vue组件实例。并不是指向main.js的vue实例。 } }

作用域问题

<template> <div id="app"> <children> 
//children是子组件，然而在作用域是在当前的.vue组件实例中，不属于其本来的组件。
</children> </div> </template>