Vue详细知识点总结1

创建vue实例对象

// mvvm 
const vm = new Vue({
      el: '#app', // element - View,
      data: { // 数据 - Model
        message: 'hello'
      },
      methods: { // 方法
        
      },
      computed: { // 计算属性
        
      }
    })

说明：在创建vue实例时，会将定义的数据，方法等直接挂载到vue对象实例下。
注意：在vue对象实例下，已有_或者 $开头的属性，在data中定义的数据最好不要_或者$ 开头，如果定义的data 数据中有以_或者 $开头的则不会自动挂在到 v u e 实例下，如果要访问这些属性，需要使用$ data去获取对应属性的使用。

插值

{
   
   { 文本插值 }}

“Mustache”语法，说明，在 { { }} 内部所书写的是 JavaScript 的表达式，在标签的属性中不能使用 { { }} 绑定属性值（如果需要动态绑定属性值，使用 v-bind）

指令

v-html

渲染HTML文本

v-text

渲染纯文本

v-bind

动态绑定属性值，可以简写为：

v-on

绑定事件，可以简写为 @
修饰符：

.prevent ---- 阻止默认行为
.stop ---- 阻止事件传播
.enter ---- 回车键
.ctrl ---- ctrl 控制键，例如：@keydown.ctrl.enter=“sendMessage”

条件渲染指令

v-show

切换元素显示/隐藏时，操作的是节点的 CSS 样式（display）：显示时将 display: none; 删除，隐藏时添加 display: none;

v-if与v-show的区别：

v-if操作的是DOM树，v-show操作的是css样式
v-if有更高的切换开销，而v-show又更高的初始化渲染开销，如果要频繁的切换，则使用v-show更好，如果是运行条件很少改变，则使用v-if较好。

列表渲染指令

v-for

通常在使用v-for实现列表渲染时，需要动态绑定key属性，key值应该是唯一。

数组变异（变更）方法：

pop() pop()方法删除最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。
push() push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度
shift() shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值
unshift() unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
splice(index,howmany,replace)
sort()
reverse()

v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。

v-pre

跳过这个元素和它的子元素的编译过程。

v-cloak

和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕，（作用：避免出现编译前后页面节点的闪烁效果）

v-model

通常用于表单元素的数据双向绑定

语法糖

v-model在内部为不用的输入元素使用不用的property并抛出不同的事件：

text 和 textarea 元素使用 value property 和 input 事件；
checkbox 和 radio 使用 checked property 和 change 事件；
select 字段将 value 作为 prop 并将 change 作为事件。

v-slot

用于使用插槽

<template v-slot:subtitle>

</template>

计算属性和侦听属性

计算属性

说明：计算属性通常是根据已有的数据，计算出新的数据，一般都是使用到计算属性的getter.

new Vue({
    data: {
        message: 'hello'
    },
    computed: { // 计算属性
        reverseMsg() { // 属性 getter 的简写
            return this.message.split('').reverse().join('')
        },
        reverseMsg2: { // 与 reverseMsg() 书写等价
            get() { // getter
                return this.message.split('').reverse().join('')
            }
        }
    }
})

计算属性的值会被缓存，如果依赖项不改变时，会一直使用缓存的数据，当依赖项发生改变时，会重新计算computed属性的值并继续缓存。

**计算属性是基于它们的响应式依赖进行缓存的，**只在相关的响应式依赖发生改变时他们才会重新求值。

侦听属性

关键字：watch
用于监听到数据变化后执行对应的任务

computed 与 method 的区别：

computed 有缓存，watch 无缓存
computed 计算属性中不能执行异步操作，而 watch 中可以执行异步操作
computed 通常是由一个或多个数据的变化，生成一个新的数据，而 watch 通常是监听一个数据的变化，可能引起一个或多个其它数据的变化

组件系统

在组件定义时，data必须是函数的结构，在函数体内部返回一个普通对象。

**data必须是函数的原因：**因为如果使用普通对象，当组件被复用时，多个组件实例引用到同一个数据对象，当其中某一个组件实例对data数据修改时，其他组件组件实例也会受影响。而使用函数时，每创建一个组件实例时，都是返回一个新的data对象数据，多个组件实例间data是独立开来的，当修改组件实例中的数据时，其他组件实例不受影响。

在template中定义布局结构时，必须保存所有的布局使用单个根元素包裹起来

组件注册

全局注册

Vue.component('组件名称', 选项对象)

局部注册

{
    components: {
        组件名称: 选项对象
    }
}

在组件或者vue实例的选项对象中，添加components字段，来局部注册子组件，而局部注册的组件，只能在注册它的父组件内部使用。

组件使用

将组件名作为自定义标签名使用。
规范：如果组件名称是使用驼峰命名规范，则在作为自定义标签名使用时，转换为短横线命名规范（各单词之间使用短横线分隔，所有单词小写）

插槽

用作于内容分发，在父组件中可以向子组件传递布局结构的内容。

组件通信

父子通信

父传子：通过属性的方式传递数据 ---- prop。
子传父：使用事件的方式传递数据。在父组件中使用子组件时，绑定一个自定义事件(@customEvent)，在子组件中需要传递数据时，触发对应的事件执行( this.$emit(事件名称, 需要传递的数据) ) 并传递相应数据（相当于传递的数据是携带在 $event 对象中传递给父组件的）即可。

跨组件通信

将组件关系转换为一系列的父子关系（会增加中间组件的处理负担）
event bus （事件总线）：创建一个全局的 Vue() 实例（可以将该 Vue() 实例添加到 Vue.prototype 中，这样就可以在各组件实例中调用到了），在需要接收数据的组件中使用 $on() 方法注册一个自定义事件，在需要传递数据的组件中使用 $emit() 方法去触发对应事件的执行并传递数据。
vuex

Prop

父组件向子组件传递数据时，可使用 prop ( 属性 ) 的方式。在组件的选项对象中，使用 props 来定义组件可接收到的属性，props 可取数组和对象的结构。数组中每个元素通常是所能接收属性的属性名称，对象通常是对属性做校验使用。

组件中的属性应该是只读的（不要修改组件接收到的属性值）