一、vue中应用和组件的基础概念

createApp 表示，创建一个Vue应用，存储到app变量中；
传入的参数表示，这个应用最外层的组件应该如何展示；
MVvM 设计模式：
- m -> model 数据；
- v -> view 视图；
- vm -> viewModel 视图数据连接层；
const vm = app.mount("#root");：vm代表的就是Vue应用的根组件，也是视图数据连接层；
console.log(vm.$data.message)：在根组件上，调用$data，可以操作数据；

二、vue中的生命周期函数

生命周期函数：某一时刻自动执行的函数
1. beforeCreate()：在实例生成之前，自动执行；
2. created()：在实例生成之后，自动执行；
  - 若参数中含有 template:'';
    - 则将 template:''; 编译成 render() 函数，再继续执行 beforeMount() ；
  - 若参数中没有 template:'';
    - 则将 id=”#root” 节点的 innerHTML 当做 template:''; 编译成 render() 函数，再继续执行 beforeMount() ；
3. beforeMount()： template 模板被编译成 render 函数后（组件被渲染到页面前），自动执行；
4. mounted()：template 模板背编译成 render 函数后，且将 render 函数渲染完成后（组件被渲染到页面后），自动执行；
5. beforeUpdate()：数据发生改变时，自动执行；
6. updated()：数据发生改变，且页面更新完，自动执行；
  - 执行app.unmount()，在 #id=”root” 节点上，销毁Vue应用；
7. beforeUnmount()：执行app.unmount()时，且DOM销毁前，自动执行；
8. unmounted()：执行app.unmount()后，且DOM销毁后自动执行；

三、常用模板语法

v-html='message'：在所属的标签上，以 HTML 方式展示 ‘message’ 变量，避免了产生的对 message 的转译；
- template: "<div v-html='message'></div>"
v-once='message'：标签使用 v-once 指令后，只在第一次使用该变量时，进行所属标签与该变量绑定，之后就不与该变量绑定了；
- 降低无用渲染，提高渲染性能；
- template: "<div v-once='message'>{{message}}</div>"
动态参数；
- 动态参数：@[event]:"handleClick"，其中 event 需在 data(){return {event: “click”}} 中定义；
- 动态参数：:[name]:"message"，其中 name 需在 data(){return {name: “title”}} 中定义；
修饰符：
- @click.prevent="handleClick"：阻止点击的默认行为事件；

1
2
3

template: `<form action="https://www.baidu.com" @click.prevent="handleClick">
    <button type="submit"></button>
</form>`

四、数据、方法、计算属性、监听器

data ：
- vm.$data.message=vm.message
  - 是因为 message 为 data(){return {message:”444”}} 直接返回的根数据；
methods ：
- 只要页面重新渲染，就会重新执行里面的所有方法；
- methods 里面的函数中若要使用 this；
  - 则不能使用箭头函数；
    - 是因为箭头函数中的 this 不被自动绑定到Vue实例上，而是指向向上级寻找到的对象；
  - 若使用普通函数；
    - this 会被自动绑定到Vue的实例上；
- methods 里面的方法可以在插值表达式中使用
  - template: "<div>{{formatString(message)}}</div>"
  - methods:{formatString(string) {return string.toUpperCase()}}
computed：
- 只有在计算属性依赖的属性值发生变更时，才会重新计算；
- 计算属性依赖的属性值未发生改变，不会重新计算；
- 故，计算属性有缓存机制，做页面渲染更高效；
- computed 里面的方法可以在插值表达式中使用
  - template: "<div>{{total}}</div>"
  - computed:{ total(){return this.count * this.price} }
watch：
- 可以做异步操作，同步操作时，computed更简洁；
- 当 data 中的 ‘xxx: yyy’ 数据放生变化时，watch 中相应的 xxx(current, prev){} 函数就会执行；
computed分别于methods/watch对比
- computed对比methods
  - 当 methods 、 computed 同时可以用的时候，优先选用 computed ，因为有缓存；
- computed对比watch
  - 当 watch 、 computed 同时可以用的时候，优先选用 computed ，因为更加简洁；

五、样式绑定语法

/* 该 css 为以下三个样式举例的通用 css ; */
.red {
    color: red;
}
.green {
    color: green;
}
.yellow {
    color: yellow;
}
.boldest {
    font-weight: 900;
}
.bolder {
    font-weight: 500;
    font-size: x-large;
}

1、分别用字符串、对象、数组控制样式

<script>
    const app = Vue.createApp({
        data() {
            return {
                //字符串控制样式
                classString: "green",
                //对象控制样式
                classObject: {
                    red: true,
                    boldest: true
                },
                //数组控制样式
                classArray: ["red", {"bolder": false}],
            }
        },
        template: `
            <div :class="classString">hello word</div>
            <div :class="classObject">hello word</div>
            <div :class="classArray">hello word</div>
        `
    });
    const vm = app.mount("#root");
</script>

2、子组件继承父组件样式的2种情况

<script>
    const app = Vue.createApp({
        data() {
            return {
                classObject: {
                    red: true,
                    boldest: true
                },
            }
        },
        template: `
            <demo1 :class="classObject"/>
            <demo2 :class="classObject"/>
        `
    });

    app.component("demo1", {
        //若子组件中有2个或2个以上的并列 div ，父组件传递给子组件的样式需要用`:class="$attrs.class"`继承，其他 div 样式不受父组件影响；
        template: `
            <div :class="$attrs.class">子组件A</div>
            <div >子组件B</div>
        `
    });

    app.component("demo2", {
        //若子组件中仅有一个 div ，子组件默认接受父组件样式的继承；
        template: `
            <div>子组件1</div>
        `
    });

    const vm = app.mount("#root");
</script>

3、行内样式的几种写法

<script>
    const app = Vue.createApp({
        data() {
            return {
                styleString: "color: pink",
                styleObject: {
                    color: "pink",
                    fontSize: "60px",
                }
            }
        },
        template: `
            <div style="color: pink">hello word</div>
            <div :style="styleString">hello word</div>
            <div :style="styleObject">hello word</div>
        `
    });
    const vm = app.mount("#root");
</script>

六、条件渲染

v-if和v-show区别：
- v-if：若为 false ，将 DOM 移除；
- v-show: 若为 false ，将 DOM 的style="display: none"；
v-if、v-else-if、v-else的使用：

const app = Vue.createApp({
    data() {
        return {
            show: false,
            conditionOne: false,
            conditionTwo: false,
        }
    },
    template: `
        <div v-if="show">hello word</div>
        <div v-show="show">BB word</div>

        <div v-if="conditionOne">if</div>
        <div v-else-if="conditionTwo">else if</div>
        <div v-else>else</div>
    `
});