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

2023-05-03 01:51| 来源: 网络整理| 查看: 265

vue3中数据和视图自动绑定

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

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

Document //组件 const App = { data(){ return{ num:0 } }, template:"点击点了{{num}}" } // 生成实例 const app = Vue.createApp(App) // 挂载 app.mount('#root') 复制代码

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

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

vue3中的模板

vue3中定义模板有三种方式

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

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

点击点了{{num}}" 复制代码

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

注意：

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

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

【本文地址】

今日新闻