丁鹿学堂：2023前端进阶之vue3学习（理解数据绑定视图的概念和模板的三种使用方法）vue3中数据和视图自动绑定 vu

vue3中数据和视图自动绑定

vue3中data中的数据，会自动和使用它的视图绑定，数据发生变化时视图会自动更细，无需我们手动操作dom

案例：创建一个按钮，记录点击次数。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script>
      //组件
      const App = {
        data(){
          return{
            num:0
          }
        },
        template:"<button @click='num++' >点击</button> <span>点了{{num}}<span>"
      }
      // 生成实例
      const app = Vue.createApp(App)
      // 挂载
      app.mount('#root')
    </script>
  </body>
</html>

传统的实现这个需求，我们需要获取button和span，通过事件去记录点击次数，并且修改span的innerHTML。

但是在vue中，只需要 @click='num++' 自动实现数据改变更新视图。

vue3中的模板

vue3中定义模板有三种方式

1 在组件对象中通过templeate属性去指定

2 直接在html页面的根元素中指定（了解，很少使用）

    <div id="root">
        <button @click='num++' >点击</button> <span>点了{{num}}<span>"
    </div>

3 通过组件的render() 直接渲染，此方法只在一些特殊情况下使用，了解即可。

注意：

1如果在在组件对象中通过templeate属性去指定了内容，则根元素中的所有内容都会被替换。

2 虽然定义模板的方法有三种，但是我们通常使用在组件中的template属性去指定。