关于vue中常用的方法和属性

2 篇文章 0 订阅
2 篇文章 0 订阅
const app = new Vue({

})
// 
// app为vue实列,当然在组件中属于组件实列

app.$data // 实列下的data  可以通过这个是属性修改data里面的数据 也可以 app.obj.a (obj为data中的数据名,a为obj中的一个属性)来调用

app.$props // 组件间通讯的数据

app.$el // 根元素

app.$options // 实列里面的所有数据 

app.$options.render = (h) =>{}  // 在实列每次重新渲染后触发

app.$root // 实列对象 app.$root === app

app.$children // 在组件中,是指子代组件

app.$slots  //插槽相当有用
app.$scopedSlots

app.$refs //用于定位dom

app.$isServer // 一般用于服务器渲染 用于区分 用的代码在服务器上运行和有的不在上面运行

app.$watch // 监听数据
// 一般在watch后都要销毁,但是在vue文件中使用watch会自动销毁
const unWatch = app.$watch()
setTimeout(()=>{
    unWatch()
},2000)

app.$emit // 用于派送事件
app.$on // 监听事件出发

app.$once //之间听事件一次

app.$forceUpdate() //强制组件冲刑渲染 

app.$set(app.obj,'a',i) // 给data中添加内容 obj为data中的,a为obj中的,i为赋给的内容
app.$delete // 删除一个属性

app.$nextTick //用于在dom渲染后执行的操作

// vue的生命周期
beforeCreate() {
    
}
created () {
    
}
beforeMount () {
    
}
mounted () {
    
}
beforeUpdate () {
    
}
updated() {
    
}
beforeDestroy () {
    
}
destroyed() {
    
}
render(h) {
    
}
renderError(h, err) {
    
}
errorCaptured: (err, vm, info) => {
    // 向上冒泡,正式环境可以使用
}

// watch 的高级使用

watch: {
    obj: {//深度监测 包括obj里面的属性改变 但是耗内存
        hander(){

        },
        immediate:true //声明以后就执行一次,一般没有就会在变动后执行
        deep:true //深度监测 包括obj里面的属性改变 但是耗内存
    }
}
watch:{
    'obj.a' : {// 字符串格式 性能优化,占内存小
        hander(){
            
        },
        immediate:true // 性能优化,占内存小
    }
}

// v-model 的修饰符
v-module.number // 只有数字

v-module.trim // 去除空格

v-module.lazy // 失去焦点后触发

v-pre // 代码不编译,就直接展示出来

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue常用方法总结 第一章 Vue核心知识讲解 5 第二节 引包、留坑、实例化 、插值表达式{{}} 5 1. 引包 5 2. 留坑 5 3. 实例化 5 4. 插值表达式{{ }} 5 第三节 熟悉及使用常用指令 5 1. 什么是指令 5 2. 常用的指令有哪些,及怎么使用这些指令 6 第四节 阐述vue单双向数据流及事件绑定 6 1. vue单向数据流绑定属性值 v-bind: (属性) 简写 :(属性) 6 2. vue双向数据流 v-model 只作用于有value属性的元素 7 3. 事件绑定v-on:事件名="表达式||函数名" 简写 @事件名="表达式||函数名" 8 4. 总结 8 第五节 过滤器 8 1、过滤器有全局过滤器和组件内的过滤器 应用 {{ msg | 过滤器名}} 8 2、 vue的this是vue封装好给我们使用的,跟平常方法里面的this是不同的 9 第六节 数据监听watch(深度监听)计算属性computed 9 watch监听单个,computed监听多个 9 总结: 10 第二章 组件化开发知识介绍 11 第一节 组件化开发 11 1、 创建组件的两种方式 11 局部声明 11 2、组件类型(组件开发三步曲:声明、注册、使用 ) 11 第二节 slot插槽和ref、$parent (重点) 11 1、slot插槽 11 2、ref获取子组件实例 12 第三节 父子组件的通信 (核心) 13 1、父传子 14 2、子传父 14 第四节 非父子组件之间的通信 14 简介:建立Bus总线机制实施非父子组件通讯 14 3、回调函数写法 16 第五节 vue的生命周期 17 1、需要频繁的创建和销毁组件 17 2、组件缓存 17 3、成对比较 17 第三章 Vue核心插件之路由模块 18 第一节 路由的跳转原理(哈希模式) 18 1、单页应用的路由模式有两种(哈希模式、history模式) 19 2、 哈希模式原理 19 3、建议的选择:(小D课堂课程) 19 第二节 安装和使用路由 19 第三节 路由的跳转 20 1、路由的跳转方式2种: 20 2、区别: 20 3、vue-router的对象:$route $router 21 第四节 路由的传参和取参 21 1. 查询参 21 2. 路由参数 21 3、js跳转路由传参和标签传参,路由相同而参数不同时页面不做刷新的问题 22 总结: 22 第五节 嵌套路由(Children) 23 第六节 路由守卫 23 第五章 Vue全家桶各部分核⼼知识详解 24 第1节 构建vue项⽬的利器—脚⼿架vue-cli3 24 1、安装vue-cli3 24 2、创建项⽬ 24 3、 vue.config.js ⼿动在根⽬录新建⼀个vue.config.js⽂件 24 第2节 ⽗⼦组件传值(参考第二章第2、3节) 25 第3节 非⽗⼦组件传值(参考第二章第4节) 25 1. 事件总线(参考第二章第4节) 25 2. $attrs / $listeners 25 3. Vuex (详见第5节) 25 第4节 玩转单⻚⾯应⽤的控制⼼—vue-router(与第三章基本差不多) 26 梦学谷第137课ElementUI实现页面横向指示导航,比小D课堂的那种写法要好点 26 1、路由的基本配置 26 2、路由的跳转 26 3、动态路由 27 4、嵌套路由 27 5、导航守卫 27 6、路由懒加载 28 第5节 状态管理⼼—vuex的基础⽤法(官方文档,非常好用) 28  State 28  Mutations 28  Actions 28  vuex⾥包含的基本参数 28  还有别的mapState这些很好用 29 import { mapState, mapMutations } from "vuex";(导入非默认成员) 29 其实是ES6语法,详见梦学谷89课 29 第6节 状态管理⼼—vuex的⾼级⽤法 29  vuex的计算属性—Getters 30  模块化概念—Modules 30
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值