Vue详细知识点总结1

**

创建vue实例对象

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

说明:在创建vue实例时,会将定义的数据,方法等直接挂载到vue对象实例下。
注意:在vue对象实例下,已有_或者 开 头 的 属 性 , 在 d a t a 中 定 义 的 数 据 最 好 不 要 或 者 开头的属性,在data中定义的数据最好不要_或者 data开头,如果定义的data 数据中有以_或者 开 头 的 则 不 会 自 动 挂 在 到 v u e 实 例 下 , 如 果 要 访 问 这 些 属 性 , 需 要 使 用 开头的则不会自动挂在到vue实例下,如果要访问这些属性,需要使用 vue访使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 可取数组和对象的结构。数组中每个元素通常是所能接收属性的属性名称,对象通常是对属性做校验使用。

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

猜你喜欢

转载自blog.csdn.net/wangkingpeng/article/details/109066679