vue 补充

获取 input 中的值

<input @input="change"/>
    
methods:{
    // 内置参数 默认传回当前事件对象的值
    change(event){
        console.log(event.target.value)
    }
}

V-once

只改变一次这个值，data 之后发生改变也不更新 dom 中的差值表达式的值

<p v-once>{{data}}</p>

计算属性 computed

计算属性是一个能将计算结果缓存起来的属性，不用每次调用而去重新生成。一些常用的函数，可以缓存起来，在调用时直接使用缓存中的过程（结果），以此来提高效率。

computed 虽然写是一个方法（函数），但调用时，调用的 computed 中的属性。计算属性会观测内部数据变化而变化而重新求值

监控 watch

监控 vue 中某个属性的值的变化，发生变化时自动调用方法

data:{
    title:"hahaha",
    data:"cscs"
},
watch:{
    title:function(){},
    data:function(newValue,oldValue){}
}

:class

:class 可以绑定多个值 使用数组 ["fl","fr"]

:Style

:style="{backgroundCloro:data}"

必须为驼峰命名法，必须用表达式包裹

MVVM 模型

Model View ViewModel 是 MVC 模式的改进版

前端中 JS 对象为 Model 页面为 View 两者做到了最大限度的分离

将 两者关联起来就是 ViewModel 它是桥梁

ViewModel 负责把 model 的数据同步到 view 显示 还负责把 view 的数据同步回 model

虚拟 DOM DIFF 算法

在普通 js 中我们操作 dom 元素，在通过 html 转为 DOM 数，并且通过 document.getElementByid 来找到该元素，去修改 DOM 树的节点.

而在 Vue 中是直接修改页面中 DOM 元素，此时该元素虚拟的 DOM, 通过 DIFF 算法来哦计算出虚拟的 DOM 与原来的 DOM 的区别来进行修改

template

模板标签

在 vue 中经常用模板标签来包裹

template 标签天生不可见，使用 v-show: 为设置样式 display:none 没有意义，只能使用 v-if

template 必须要一个根元素 <div> , 否则不能实例化

实例属性

vue 全局暴露属性，我可以通过 $ 加属性名，调用 vue 中的数据

如:this.$datathis.$ref

$ref

相当于标签中 id, 不可重复，只要该标签绑定了 ref 属性则可以通过 this.$refs.(ref 名称), 就可以快速修改某个元素的内容

$mount

相当于挂载 (加载) el, 实现了页面元素和 vue 对象的动态绑定

component 组件全局注册

在当前实例中，注册一个组件，可以在里面定义 template data methods props 等等

本地注册只绑定 (挂载) vue 的 html 才能使用组件

通过 Vue.component ("组件名",{

props:[]

data(){},

methods(){},

template :"使用 <组件> 标签时解析这里的标签 预先设置好"

})

components 组件本地 (局部) 注册

通过 vue 实例中 components 注册 组件名

只能在这个 vue 实例中使用注册过的组件

如:

components: { ImgList },

生命周期

一个 vue 对象会经历初始化、创建、绑定、更新、销毁等阶段，不同的阶段都会触发不同的生命周期 hook

1. beforeCreate 创建实例之前的钩子
2. created 实例创建完成后执行的钩子
3. beforeMount 将编译完的 html 挂载到 Vue 的虚拟 DOM 时触发的钩子
4. mounted 编译好的 Html 挂载到页面完成后执行的钩子
5. beforeUpdate 绑定的虚拟 DOM 更新之前的钩子
6. updateed 更新之后的钩子
7. beforeUmmount 实例销毁之前的钩子
8. ummounted 实例销毁后的钩子

import { createApp } from 'vue'
const app = createApp({})

// 注册
app.directive('my-directive', {
  // 指令是具有一组生命周期的钩子：
  // 在绑定元素的 attribute 或事件监听器被应用之前调用
  created() {},
  // 在绑定元素的父组件挂载之前调用
  beforeMount() {},
  // 绑定元素的父组件被挂载时调用
  mounted() {},
  // 在包含组件的 VNode 更新之前调用
  beforeUpdate() {},
  // 在包含组件的 VNode 及其子组件的 VNode 更新之后调用
  updated() {},
  // 在绑定元素的父组件卸载之前调用
  beforeUnmount() {},
  // 卸载绑定元素的父组件时调用
  unmounted() {}
})

// 注册 (功能指令)
app.directive('my-directive', () => {
  // 这将被作为 `mounted` 和 `updated` 调用
})

// getter, 如果已注册，则返回指令定义
const myDirective = app.directive('my-directive')

props

父传子

子组件声明

props: {
    传的参数名: {
      type: 参数的类型,
      require: true  //不能空
    }
  },

父组件 注册 子组件 在标签中传参

注册组件

 components: {
    ArtcleList
  }

传参

<artcle-list :channel="channel"
      />