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)">
复制代码
相关推荐
naice1 小时前
我对github的图片很不爽了,于是用AI写了一个图片预览插件
前端·javascript·git
天蓝色的鱼鱼1 小时前
Element UI 2.X 主题定制完整指南:解决官方工具失效的实战方案
前端·vue.js
RoyLin1 小时前
TypeScript设计模式:门面模式
前端·后端·typescript
小奋斗1 小时前
千量数据级别的数据统计分析渲染
前端·javascript
小文刀6961 小时前
CSS-响应式布局
前端
三小河1 小时前
overflow:auto 滚动的问题,以及flex 布局中如何设置
前端·javascript
薛定谔的算法1 小时前
phoneGPT:构建专业领域的检索增强型智能问答系统
前端·数据库·后端
Hilaku1 小时前
Token已过期,我是如何实现无感刷新Token的?
前端·javascript·面试
小文刀6962 小时前
2025-35st-w-日常开发总结
前端
我是日安2 小时前
从零到一打造 Vue3 响应式系统 Day 8 - Effect:深入剖析嵌套 effect
前端·vue.js