vue及常用指令简介

挂载点/vue实例/数据注入/ 响应式

<body>
  <!-- 1.挂载点: vue实例的作用域 -->
  <div class="app">
    <p>用户名: {{username}}</p>
  </div>
  <script>
    // 2. vue实例
    // 2.1 vue配置项
    //   const config = {
    //     // vue中的变量全部写到data()中
    //     data() {
    //       return {
    //         // 需要返回的数据
    //         username: '王老师',
    //       };
    //     },
    //   };
    // 2.2 创建vue实例
    //   const app = Vue.createApp(config);
    // 2.3 将vue实例与挂载点绑定
    //   app.mount('.app');
    // 代码简化
    const app = Vue.createApp({
      data() {
        return {
          username: '王老师',
        };
      },
    }).mount('.app');
    // 3. 数据注入: 数据自动注入到了vue实例中
    console.log(app.$data.username);
    // 进一步简化
    // 原因: 数据,已经被绑定到vue实例app对象上
    // app.username = 'xxx'
    console.log(app.username);
    // 4. 响应式
    app.username = '张老师';
  </script>
</body>

vue常用指令v-text/v-html

<body>
  <!-- vue指令: 'v-':前缀, 本质上就是html标签的"自定义属性" -->
  <div class="app">
    <!-- v-text -> textContent -->
    <!-- <p>用户名: <span v-text="username"></span></p> -->
    <!-- v-html -> innerHTML  -->
    <p>用户名: <span v-html="username"></span></p>
  </div>
  <script>
    const app = Vue.createApp({
      data() {
        return {
          username: '牛老师',
        };
      },
    }).mount('.app');
    app.username = '<i style="color:red">张老师</i>';
  </script>
</body>

样式绑定

    <script src="https://unpkg.com/vue@next"></script>
    <style>
      .active {
        color: red;
      }
      .bgc {
        background-color: yellow;
      }
    </style>
  </head>
  <body>
    <div class="app">
      <!-- 1. 行内:  style  -->
      <!-- <p style="color: red">php.cn</p> -->
      <!-- vue动态属性设置指令 v-bind:属性名  -->
      <!-- <p v-bind:style="style">php.cn</p> -->
      <p v-bind:style="{color:textColor,backgroundColor: bgc}
">php.cn</p>
      <p v-bind:style="[base, custom]">php.cn</p>
      <!-- 2. 类样式: class  -->
      <p v-bind:class="active">Hello 猫老师</p>
      <!-- classList  -->
      <p v-bind:class="{active: isActive}">Hello 猫老师</p>
      <p class="active bgc">Hello 王老师</p>
      <!-- v-bind:是高频指令, 可简化为冒号 -->
      <p :class="['active', 'bgc']">Hello 王老师</p>
      <p :class="[mycolor, mybgc]">Hello 王老师</p>
    </div>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            // style: 'color: blue',
            textColor: 'green',
            bgc: 'wheat',
            base: {
              border: '1px solid',
              background: 'lightgreen',
            },
            custom: {
              color: 'white',
              padding: '15px',
            },
            active: 'active',
            isActive: true,
            mycolor: 'active',
            mybgc: 'bgc',
          };
        },
      }).mount('.app');
    </script>
  </body>

数据双向绑定

<div class="app">
  <!-- <p> -->
  <!-- v-on: vue的事件指令 -->
  <!-- v-on: 高频指令, @表示  -->
  <!-- <input type="text" @input="comment = $event.target.value" 
:value="comment" />
    <span>{{comment}}</span>
  </p> -->
  <!-- vue为简化双向数据绑定, 创建一个语法糖: v-mode 指令 -->
  <!-- $event 事件对象, 在vue不能直接用event  -->
  <!-- v-model="comment" ===> @input="comment = $event.target.
value" -->
  <!-- <p>
    <input type="text" v-model="comment" :value="comment" />
    <span>{{comment}}</span>
  </p> -->
  <p>
    <!-- 延迟绑定:修饰符 -->
    <!-- blur 事件 change事件 -->
    <input type="text" v-model.lazy="comment" :value="comment" />
    <span>{{comment}}</span>
  </p>
</div>
<script>
  const app = Vue.createApp({
    data() {
      return {
        comment: null,
      };
    },
  }).mount('.app');
</script>

挂载点/vue实例/数据注入/ 响应式

vue常用指令v-text/v-html

样式绑定

数据双向绑定

相关文章