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) // => 5Vue 会自动为 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)">