Vue 常用属性

2023-06-23 08:01| 来源: 网络整理| 查看: 265

数据属性组件的 data 选项是一个函数（data里面是有return的）。Vue 会在创建新组件实例的过程中调用此函数（将里面定义的变量都放到实例里面去，你就可以使用this点出来，包括HTML里面就能够使用这些变量的）。它应该返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。为方便起见，该对象的任何顶级“属性”也会直接通过组件实例暴露出来。（本来是使用this.$data.msg点出来，现在this.msg就可以出来了）

vm.$data.msg其实和vm.msg就是同一个东西，就像一个语法糖。

首页 msg:{{ msg }} const HelloVueApp = { data(){ return{ msg: "hello" } } } //创建vm实例,vm是实例的名称 const vm = Vue.createApp(HelloVueApp).mount("#vue") //将vue实例挂载到对应的选择器上面去，干了两件事情，第一初始化实例，其次是挂载 // 'Hello Vue!' console.log(msg) // 'Hello Vue!' vm.msg = "hello world" console.log(vm.$data.msg)

方法

方法(methods):处理数据的函数，在methods选项中定义的函数称为方法。

在 methods 选项中定义的方法与 data 选项中的数据一样，可以在组件的模板中使用（挂载到html中某个dom上面）。在模板中，它们通常被当做事件监听使用。首页增加

count:{{ count }}

const HelloVueApp = { data(){ return{ count: 0 } }, methods:{ increment(){ this.count++ } } } Vue.createApp(HelloVueApp).mount("#hello-vue")

计算属性

计算属性(computed):根据所依赖的数据动态显示新的计算结果。

示例 : 需要在 {{}} 里添加计算再展示数据，例如统计分数，数值计算一般用法：首页增加

总分:{{ chinese + math + english }}

const HelloVueApp = { data(){ return{ chinese: 10, math: 20, english: 30 } } } const vm = Vue.createApp(HelloVueApp).mount("#hello-vue")

computed 计算属性用法：小结：计算属性一般就是用来通过其他的数据算出一个新数据，而且它有一个好处就是，它把新的数据缓存下来了，当其他的依赖数据没有发生改变，它调用的是缓存的数据，这就极大的提高了我们程序的性能。而如果写在methods里，数据根本没有缓存的概念，所以每次都会重新计算。这也是为什么不用methods 的原因 ! 首页

总分:{{ sum }}

const HelloVueApp = { data(){ return{ chinese: 10, math: 20, english: 30 } }, computed:{ sum: function(){ let a = this.math + this.chinese + this.english return a } } } const vm = Vue.createApp(HelloVueApp).mount("#hello-vue")

你要的数据名不需要在data里面去定义，但是数据还是需要的，你的数据都是从data里面拿到的。

监听属性

监听属性(watch):是一个观察动作，监听data数据变化后触发对应函数，函数有newValue(变化之后结果)和oldValue(变化之前结果)两个参数。当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

某些值在变化了被监听到之后，获取数据，展示出来。

首页

旧值：{{ oldmsg }}

新值:{{ watchnewmsg }}

按钮 const HelloVueApp = { data(){ return{ oldmsg: "Hello Vue!", watchnewmsg: '111' } }, methods:{ btn(){ this.oldmsg = 'Hello xxxx' } }, watch: { oldmsg: { handler(newValue, oldValue) { console.log(newValue, oldValue) this.watchnewmsg = newValue } } } //立即处理，进入页面就触发 immediate: true } Vue.createApp(HelloVueApp).mount("#hello-vue")

可以看到老的值是hello vue，新的值是hello china。函数里面只定义了oldmsg的变化，并没有定义watchnewmsg的变化。在watch里面监听到了之后，它才发生了watch msg的变化。

【本文地址】

Vue 常用属性

Vue 常用属性

今日新闻

推荐新闻