Vue.js 简明备忘录

这是一篇自用的学习笔记。

引入

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

模板语法

文本插值

<span>Message: {{ msg }}</span>

const { createApp } = Vue;
let test = createApp ({
  data(){
    return {
      msg: "Hello"
    }
  }
});
test.mount("#app");

属性绑定

通过 Vue 绑定一个或多个标签属性。

<div v-bind:id="dynamicId"></div>
<!-- 简写 -->
<div :id="dynamicId"></div>
<!-- 绑定多个属性 -->
<div v-bind="atrs"></div>

let test = createApp ({
    data(){
        return {
          atrs : {
              id : "element-id",
              class : "element-class"
          }
        }
    }
});