常用标签

• v-once
• v-text
• v-html
• v-pre
• v-clock

   隐藏未编译的 Mustache 标签直到组件实例准备完毕
   css:[v-cloak] { display: none; }
   html:<div v-cloak> {{ message }} </div>

v-bind

绑定基本属性,如a元素的href属性、img元素的src属性；

  <div id="app"></div>
  <!-- vue2 template模板中只能有一个根元素 -->
  <!-- vue3 是允许template中有多个根元素 -->
  <template id="my-app">
    <!-- 1.v-bind的基本使用 -->
    <img v-bind:src="imgUrl" alt="">
    <a v-bind:href="link">百度一下</a>
    
    <!-- 2.v-bind提供一个语法糖 : -->
    <img :src="imgUrl" alt="">
    <img src="imgUrl" alt="">
  </template>

  <script src="../js/vue.js"></script>
  <script>
    const App = {
      template: '#my-app',
      data() {
        return {
          imgUrl: "https://avatars.githubusercontent.com/u/10335230?s=60&v=4",
          link: "https://www.baidu.com"
        }
      }
    }
    Vue.createApp(App).mount('#app');
  </script>

绑定class属性

对象语法