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

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 // 代码不编译,就直接展示出来

猜你喜欢

转载自blog.csdn.net/memedadexixaofeifei/article/details/88785030