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)">
复制代码
相关推荐
技术砖家--Felix34 分钟前
Spring Boot Web开发篇:构建RESTful API
前端·spring boot·restful
yume_sibai2 小时前
TS 常用内置方法
前端·javascript·typescript
新知图书2 小时前
ArkTS语言、基本组成与数据类型
前端·javascript·typescript
西西学代码2 小时前
Flutter---个人信息(1)---实现简单的UI
开发语言·javascript·flutter
嘗_2 小时前
手写自己的小型react
前端·javascript·react.js
嘀咕博客2 小时前
h5游戏免费下载:HTML5拉杆子过关小游戏
前端·游戏·html5
Moonbit2 小时前
MoonBit 推出 LLVM Debugger,核心用户数破十万
前端·编程语言·llvm
zuo-yiran2 小时前
vue div标签可输入状态下实现数据双向绑定
前端·javascript·vue.js
qq_316837752 小时前
使用leader-line-vue 时垂直元素间距过小连线打转的解决
前端·javascript·vue.js
天天向上10242 小时前
vue3使用ONLYOFFICE 实现在线Word,Excel等文档
前端·javascript·html