Vue基本语法与常用指令

代码：
<!DOCTYPE html>
<html lang="zh-CN">
  <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>Vue基本语法与常用指令</title>
    <script src="https://unpkg.com/vue@next"></script>
    <style>
      .te {
        color: red;
      }
      .bg {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <!--  插值 -->
    <h1 class="title">{{message}}</h1>
    <hr />
    <!-- 挂载点 -->
    <div class="app">
      <p>挂载点：你好，{{username}}</p>
    </div>
    <hr />
    <div class="vhtml">
      <p>V-HTML: 你好，<span v-html="username"></span></p>
    </div>
    <hr />
    <div class="vtext">
      <p>V-TEXT：你好， <span v-text="username"></span></p>
    </div>
    <hr />
    <div class="hn">
      <!-- 1. 行内:  style  -->
      <p :style="{color:textColor,backgroundColor: bg}">XXXXX.XXX</p>
      <p :style="[base, custom]">XXX.XXX</p>
      <!-- 2. 类样式: class  -->
      <p :class="te">你好，小小明</p>
      <!-- classList  -->
      <p :class="{te: isActive}">你好，小小红</p>
      <!-- v-bind:简化为冒号 -->
      <p :class="['te', 'bg']">Hello 王老师</p>
      <p :class="[mycolor, mybgc]">Hello 王老师</p>
    </div>
    <script>
      const apps = Vue.createApp({
        data() {
          return {
            message: "Hello 大家吃了吗",
          };
        },
      });
      apps.mount(document.querySelector(".title"));
      //   挂载点
      const app = Vue.createApp({
        data() {
          return {
            username: "小明同学",
          };
        },
      }).mount(".app");
      //   v - html
      const vhtml = Vue.createApp({
        data() {
          return {
            username: "",
          };
        },
      }).mount(".vhtml");
      vhtml.username = '<i style="color:red">张同学</i>';
      //   v-text
      const vtext = Vue.createApp({
        data() {
          return {
            username: "小蓝同学",
          };
        },
      }).mount(".vtext");
      const hn = Vue.createApp({
        data() {
          return {
            textColor: "green",
            bgc: "wheat",
            base: {
              border: "1px solid",
              background: "lightgreen",
            },
            custom: {
              color: "white",
              padding: "15px",
            },
            active: "te",
            isActive: true,
            mycolor: "te",
            mybgc: "bg",
          };
        },
      }).mount(".hn");
    </script>
  </body>
</html>
Vue基本语法与常用指令

Vue基本语法与常用指令

运行效果

相关文章
