data
组件的 data 选项是一个函数。Vue 在创建新组件实例的过程中会自动调用此函数。
data选项通常返回一个对象，然后 Vue 会通过响应性系统将其包裹起来，并以 $data 的形式存储在组件实例中。
<!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 建立了双向关联, 并且所有的改变都是响应式的.
生命周期函数
<!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 选项为组件实例添加方法，选项对应的值是一个“字典”对象，对象中的每个元素是你自定义的一系列方法:
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 和组件实例的其它所有属性一样可以在组件的模板中被访问。在模板中，它们通常被当做事件监听使用，比如：
<button @click="increment">Up vote</button>
在上面的例子中，点击 时，会调用 increment 方法。
也可以直接在模板支持 JavaScript 表达式的任何地方调用方法：
<span :title="toTitleDate(date)">
{{ formatDate(date) }}
</span>
// 思考一下，如果是这样，会不会调用toTitleDate方法呢？
// <span title="toTitleDate(date)">
