Vue知识点总结

原地址:https://banggan.github.io/2019/01/03/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获取到元素

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页