上一章:vue入门(一)搭建vue项目,基础显示,指令
下一章:vue入门(三)事件(方法)处理、侦听器、模板引用

一、在每个vue中需要定义的代理:
“代理”即是在export default中可以被定义,之后在渲染时拿来用的一个东西,比较常用的是data和method,也就是变量和方法,还有一些生命周期钩子内的方法也可以写在export default里:
1.data()
页面需要用到的变量

export default({
    data(){
        return{
            buttonText:'button1'
        }
    }
})

2.methods
页面需要用到的方法

export default({
    methods:{
        test(){
            alert('234');
        }
    }
})

每个代理之间要用逗号隔开,注意,methods的写法和其他代理略有不同,在methods里面声明的方法写成和js方法一个形式就可以了,省略function
如果需要在methods的方法里调用data,需要写成this.xxx
另外,vue的更新并不是随时随地的,vue会缓存你的更改,然后等到下一周期统一更改。

nextTick(()=>{
...
})

3.created()
如果一个组件要被多次引用,可能存在一些函数内部状态相同的情况,为了防止这种情况发生,该组件的方法可以写在create里面:

export default {
  created(){
  		this.myfun = myfun(this.click)
  	}
 }

click是methods中的一个方法
4.计算属性 computed:
computed和data一样,是用来存放属性的,但写法略有不同,computed主要放的是需要用data计算出的属性

在export default中:
computed:{
    clickCount(){
      return this.count*100;	//count是data中的一个属性,当count变化时,clickCount也会变化
    }
  }

html:

<span>点击次数*100={{ clickCount }}</span>
  • 计算属性和方法的区别:
    vue在这里举了一个例子,在methods里定义了一个返回同样值的方法,呈现出的结果也是相同的。然而他俩的区别是,计算属性值会基于其响应式依赖被缓存。这句是文档里的原话,很难看懂,说人话就是,计算属性,有改变的话,先放缓存里,等到下一次你需要更新的时候,再更新;而方法,是页面渲染时,再更新。这两个本质上的区别,就是对内存的压力大不大。如果你有一个特别大的数据量,需要循环多次并作计算,页面容易卡住的话,再用计算属性。

上一章:vue入门(一)搭建vue项目,基础显示,指令
下一章:vue入门(三)事件(方法)处理、侦听器、模板引用

Logo

前往低代码交流专区

更多推荐