Vue3--数据和方法

data

组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中会自动调用此函数。

data选项通常返回一个对象,然后 Vue 会通过响应性系统将其包裹起来,并以 $data 的形式存储在组件实例中。

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<script src="https://unpkg.com/vue@3.4.21/dist/vue.global.js"></script>
<body>
    <div id="counter">
        <p>Counter: {{counter}}</p>
        <p>number: {{number}}</p>
        <p>content: {{content}}</p>        
    </div>
</body>

<script>
    const Counter = {
        data(){
            return {
                counter: 45, 
                number: 78,
                content: 100,
            }
        }
    }
    Vue.createApp(Counter).mount("#counter");
</script>
</html>

效果:

说明;

声明式地, 将数据填充到 dom 页面内.

data(){} return的数据是响应到 html 里面的数据.

数据和 DOM 建立了双向关联, 并且所有的改变都是响应式的.

生命周期函数

java 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<script src="https://unpkg.com/vue@3.4.21/dist/vue.global.js"></script>
<body>
    <div id="counter">
        <p>Counter: {{counter}}</p>
        <p>number: {{number}}</p>
        <p>content: {{content}}</p>        
    </div>
</body>

<script>
    const Counter = {
        data() {
            return {
            counter: 1,
            number: 45,
            content: "我去",
            }
        },
        mounted() {
            setInterval(() => {
            this.counter++
            this.number += 2;
            this.content += "可爱";
            }, 1000)
        }
    }

    Vue.createApp(Counter).mount("#counter");
</script>
</html>

说明:

mounted 下设置的 setInterval, 每秒对 counter + 1, number +2, content后拼接字符.

v-bind

类似 v-bind 的东西称为指令. 指令带有前缀 v-, 表示是 Vue 提供的特殊功能.

methods

Vue通过methods 选项为组件实例添加方法,选项对应的值是一个"字典"对象,对象中的每个元素是你自定义的一系列方法:

javascript 复制代码
const app = Vue.createApp({
  data() {
    return { count: 4 }
  },
  methods: {
    increment() {
      // `this` 指向该组件实例
      this.count++
    }
  }
})

const vm = app.mount('#app')
console.log(vm.count) // => 4

vm.increment()
console.log(vm.count) // => 5

Vue 会自动为 methods 绑定 this,以便于它始终指向组件实例。这将确保方法在用作事件监听或回调时保持正确的 this 指向。所以在定义 methods 时应避免使用箭头函数,因为这会阻止 Vue 绑定恰当的 this 指向。

methods 和组件实例的其它所有属性一样可以在组件的模板中被访问。在模板中,它们通常被当做事件监听使用,比如:

html 复制代码
<button @click="increment">Up vote</button>

在上面的例子中,点击 时,会调用 increment 方法。

也可以直接在模板支持 JavaScript 表达式的任何地方调用方法:

javascript 复制代码
<span :title="toTitleDate(date)">
  {{ formatDate(date) }}
</span>

// 思考一下,如果是这样,会不会调用toTitleDate方法呢?
// <span title="toTitleDate(date)">
复制代码
相关推荐
@小红花23 分钟前
从0到1学习Vue框架Day03
前端·javascript·vue.js·学习·ecmascript
前端与小赵26 分钟前
vue3中 ref() 和 reactive() 的区别
前端·javascript·vue.js
魔云连洲40 分钟前
Vue的响应式底层原理:Proxy vs defineProperty
前端·javascript·vue.js
专注VB编程开发20年44 分钟前
CSS定义网格的列模板grid-template-columns什么意思,为什么要用这么复杂的单词
前端·css
IT_陈寒1 小时前
Redis性能提升50%的7个关键优化策略,90%开发者都不知道第5点!
前端·人工智能·后端
Hilaku1 小时前
深入URL和URLSearchParams:别再用正则表达式去折磨URL了
前端·javascript·代码规范
pubuzhixing1 小时前
Canvas 的性能卓越,用它解决一个棘手问题
前端
weixin_456904271 小时前
Vue.jsmain.js/request.js/user.js/store/index.js Vuex状态管理项目核心模块深度解析
前端·javascript·vue.js
伍哥的传说1 小时前
Vue 3.6 Alien Signals:让响应式性能飞跃式提升
前端·javascript·vue.js·vue性能优化·alien-signals·细粒度更新·vue 3.6新特性
永日456701 小时前
学习日记-HTML-day51-9.9
前端·学习·html