master

分支 (1)

管理

管理

master

vue-courseware
/
00-复习.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="./js/vue.js"></script>
    <style>
      .active {
        background-color: lightcoral;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- 基本指令语法：
        v-if  v-else-if v-else      条件渲染，满足条件显示（会移除节点，重新加载）
        v-show       条件渲染，满足条件显示
        v-for    列表渲染，重复渲染一段结构，添加key属性，增加唯一标识，同步动态数组变化的。
        v-bind      动态属性  v-bind:class  ---  :class   v-bind:key   ----:key
        v-on      事件绑定    v-on:click  ---  @click    v-on:keyup  --  @keyup
        v-model   数据双向绑定（vue的数据流是双向的！！！），表单元素 忽略value，checked这些属性
        -->

      <!-- 组件的调用 -->
      <my-c1 n="hello world!!"></my-c1>
      <my-c1 :n="num" @my-plus="fatherFn"></my-c1>
      <my-c2></my-c2>
      <my-c2></my-c2>
      <h4>父组件的num {{num}}</h4>
    </div>
  </body>
  <script>
    //组件系统（全局和局部）
    Vue.component("my-c1", {
      template: `<div>
            <ul>
                <li :class="{'active':isActive}" @click="handleClick">我是my-c1组件</li>
            </ul>
            <ol>
                <li @click="handleOl($event)">我是ol组件</li>
            </ol>
            <div>我是父组件传递的数据：{{n}}</div>
            <button @click="childFn">点击。控制父组件num++</button>
        </div>`,
      props: ["n"],
      data() {
        return {
          isActive: false,
        };
      },
      methods: {
        childFn() {
          this.$emit("my-plus", {
            str: "my-c1的事件函数",
            obj: {
              name: "小敏",
            },
          });
        },
        handleClick() {
          //点击li，修改背景色
          this.isActive = !this.isActive;
        },
        handleOl(ev) {
          console.log(ev.target);
          ev.target.style.backgroundColor = "#abc";
        },
      },
    });

    //注册vue实例对象
    new Vue({
      el: "#app",
      components: {
        "my-c2": {
          template: `<div>
            <ul>
                <li :class="{'active':isActive}" @click="handleClick">我是my-c2组件</li>
            </ul>
            <ol>
                <li @click="handleOl($event)">我是ol组件</li>
            </ol>
        </div>`,
          data() {
            return {
              isActive: false,
            };
          },
          methods: {
            handleClick() {
              //点击li，修改背景色
              this.isActive = !this.isActive;
            },
            handleOl(ev) {
              console.log(ev.target);
              ev.target.style.backgroundColor = "#abc";
            },
          },
        },
      },
      data: {
        num: 123,
        arr: [],
        obj: {},
      },
      watch: {
        num() {
          //当num发生变化时，触发
        },
        arr: {
          handler() {
            //当arr发生变化时，触发,使用索引值和length修改数组的时候，监听不到。
          },
        },
        obj: {
          deep: true, //开启深度监听
          handler() {
            //当obj发生变化时，触发.
          },
        },
      },

      computed: {},
      methods: {
        fatherFn(data) {
          console.log(data);
          this.num++;
        },
      },
      filters: {},
      beforeCreate() {},
      created() {},
      beforeMount() {},
      mounted() {},
      beforeDestroy() {},
      destroyed() {},
      beforeUpdate() {
        //data中数据发生变化，引起视图更新的时候触发
      },
      updated() {},
    });
  </script>
</html>