Vue知识点总结

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

基础知识点

框架与库的区别

jquery库+DOM操作+http请求 = 全家桶

如何起步

  • 引包Vue.js

  • 通过Vue对象，new Vue（options）

  • 配置options对象

    • el:发生动作的目的地

    • template:模板（必须为一个根节点）

    • data函数，返回的是一个对象

    • components:key是组件名，value是组件对象

    • methods：配合事件

    • props：子组件接受的参数设置

插值表达式

  • {{表达式}}：对象、字符串、判断后的布尔值、三元表达式

常用指令

  • v-text:元素的innerText属性

  • v-html：元素的innerHTML属性

  • v-if:判断是否插入，v-else-if，v-else和v-if必须是相邻的元素

  • v-show:隐藏元素，给元素加上display：none

  • v-bind:绑定属性，单向数据流,v-bind:属性=‘变量’ 简写：属性名=‘xxx’

  • v-model：双向数据绑定，v-on:事件名=‘函数’ 简写： @事件名

  • v-on:绑定事件，处理自定义原生事件，v-on:事件名=“表达式 ||函数名 ”

  • v-for:循环

    用法：v-for=“item in stus”

    如果stus为数组，（item，index） in stus

    如果stus为obj，（value,key,index） in stus

全局组件

场景：公共性功能组件，减少冗余代码

全局API：Vue.component(‘组件名’，组件对象）

过滤器（给数据的显示进行操作，如反转，改变属性等）

filter：全局过滤器，Vue.filter(‘过滤器名’，过滤方式fun)

filters：组件内的过滤器，Vue.filters(‘过滤器名’，过滤方式fun)，使用{{内容 | 过滤器名}}

watch

监视单个属性改变，无法监视复杂类型，因为监视的是对象地址，地址没有改变，改变的只是属性

computed

监视多个 object | array

computed：{ 监视的业务名:function(){}} 使用：{{计算属性的名称}}

slot

vue内置的组件，父组件向子组件传DOM结构，而props是动态的数据，如果有选择性传递，就具名插槽，以name来选择，使用的对应的slot=name值即可

组件生命周期

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。

  • beforeCreate：组件创建之前，拿不到数据

  • created:可以操作数据，并且可以实现vue->页面的额影响，用于发起http请求

  • beforeMount：vue起作用，装载数据到DOM之前，应用：vue启动前的DOM

  • mounted：vue起作用，装载数据到DOM之前，应用：vue启动后的DOM，仅执行一次

  • beforeUpdate:基于数据的改变才会触发，数据改变之前，应用：获取原DOM

  • updated：基于数据的改变才会触发，数据改变之后,应用：获取新DOM

  • beforeDestroy：销毁前，做一些功能的释放，如本地保存

  • destroyed：销毁后

  • activated：**

  • deactivated：停用

    小结：

    频繁的销毁和创建组件？不合理，使用keep_alive内置组件包裹起来，对应的是actived和deactived声明周期；

    created和actived：都是子组件状态，created没有被keep-alive内置组件包括，actived被包裹；

获取DOM元素

在组件的DOM部分任意标签写上ref=“xxx”,通过组件对象，this.$refs.xxx获取到元素

以上是 Vue知识点总结 的全部内容， 来源链接： utcz.com/z/377300.html

回到顶部