vue3基础入门（一）-CFANZ编程社区

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
  <script src="https://unpkg.com/vue@next"></script>
  <style>
    .red {
      color: red;
    }
  </style>
</head>
<body>
  <div id="root"></div>
  <script>
    /**
     * 事件修饰符：stop,prevent,capture,self,once,passive
     * 按键修饰符：enter,tab,delete,esc,up,down,left,right
     * 鼠标修饰符：left,right,middle
     * 精确修饰符：exact
     * .prevent 阻止浏览器默认行为（跳转等）
     * .stop 阻止冒泡 （例如点击一个元素多次触发click事件）
     * @click="handleClick(2, $event), handleclick2() 绑定多个方法 用,隔开
     * .self 自身触发自身事件
     * .once 只触发一次
     * @scroll.passive 提升浏览器自身事件性能
     * 
     * 表单修饰符：
     * .lazy 当blur出发时
     * .number 转为数字类型
     * .trim 去除输入内容前后空格
     * 
    */
    const app = Vue.createApp({
      template: `<div>
        <form action="htttp://www.baidu.com" @click.prevent="handleClick(2, $event), handleclick2()">
          <span v-bind:[attr]="msg">{{msg}}</span>
          <button>提交</button>
        </form>  
        <div>时间1：{{time}}</div>
        <div>时间2：{{getDate()}}</div>

        <div @click.self="handleclick2" style="width:100px;height:100px;background:pink">
          <div @click.stop="testClick">阻止冒泡</div>
          <div @click="testClick">阻止冒泡</div>
        </div>

        <demo class="red" name='1'/>
        <p>{{count}}</p>

        <input v-model="checkvalue" type="checkbox" false-value="hello" true-value="world"/> {{checkvalue}}
      </div>`,
      data(){
        return {
          msg: 'hello world',
          attr: 'title', // 动态属性
          count: 0,
          checkvalue: 'hello' // 自定义双向绑定checkbox值
        }
      },
      computed: {
        time() { // 当计算属性依赖的变量发生变更时，才会发生改变
          return Date.now()
        }
      },
      methods: {
        handleClick(num, event) {
          this.count += num;
          console.log(event);
        },
        handleclick2() {
          console.log('handleclick2');
        },
        testClick(){
          alert('只触发了一次');
        },
        getDate() { // 页面发生改变才会重新渲染
          return Date.now();
        }
      },
    })
    app.component('demo', {
      template: `<div :class="$attrs.class">
        样式绑定 $attrs:{{$attrs}}
        </div>` // 绑定父组件上的传来的class属性
    })
    app.mount('#root')
  </script>
</body>
</html>