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)">
复制代码
相关推荐
musk12123 分钟前
electron 打包太大 试试 tauri , tauri 安装打包demo
前端·electron·tauri
翻滚吧键盘32 分钟前
js代码09
开发语言·javascript·ecmascript
万少1 小时前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
OpenGL1 小时前
Android targetSdkVersion升级至35(Android15)相关问题
前端
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
海天胜景1 小时前
vue3 el-table 行筛选 设置为单选
javascript·vue.js·elementui
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再2 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref