Vue3复习和总结(base)数据绑定与事件处理

Vue3复习和总结(base)数据绑定与事件处理

代码全部放在->github仓库：https://github.com/zyugat/vue-review-all

前言：分为base、Component、router、Vuex、组合式API。5各部分。

base和Component中的例子不使用脚手架运行，需自行浏览器运行。位置->noCli

这一章节没什么好说的，所以速过一下。

---

数据绑定

v-bind

v-bind

• 简写：:
• 一般绑定属性值、对象和数组。

绑定class样式

<style>
  .active {
     
    color: red;
  }
</style>
<div id='app'>
  <h2 :class='active'>Hello World 1</h2>
  <h2 :class="['active', 'line']">Hello World 2</h2>
  <!-- 通过控制 yesActive 选择是否显示样式 -->
  <h2 :class='{active: yesActive}'>{
  { message }}</h2>
</div>

<script>
  const App = {
     
    data() {
     
      return {
     
        active: 'active',
        yesActive: true,
        message: 'my message'
      }
    }
  }
  const app = Vue.createApp(App)
  app.mount('#app')
</script>