1、Vue基础一

TOC

简介

    Vue.js可以说是MVVM架构的最佳实践，是一个JavaScript MVVM库，是一套构建用户界面的渐进式框架，它专注于MVVM中的ViewModel，不仅做到了数据双向绑定，而且也是一款相对比较轻量级的JS库，API也非常简洁；
    Vue.js会自动响应数据的变化情况，并且根据用户在代码中预先写好的绑定关系，对所有绑定在一起的数据和视图内容都进行修改，这也是vue.js最大的优点，通过MVVM思想实现数据的双向绑定，让开发者不用再操作dom对象，有更多的时间去思考业务逻辑；
    Vue.js通过组件，把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中，我们只要先在父级应用中写好各种组件标签(占坑)，并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样，这个参数叫做组件的属性)，然后再分别写好各种组件的实现(填坑)，然后整个应用就算做完了；

Vue热加载

    因为Vue的双向数据绑定特性以及技术的成形，实现了项目的热加载，改完页面代码能立即在浏览器方面显示效果，提高开发效率；
    Vue.js是采用Object.defineProperty的getter和setter，并结合Proxy观察者模式来实现数据绑定的。当把一个普通 Javascript对象传给Vue实例来作为它的data选项时，Vue将遍历它的属性，用Object.defineProperty将它们转为 getter/setter，但是用户看不到 getter/setter，只是在内部它们让Vue追踪依赖，在属性被访问和修改时通知变化；

Vue Devtools

    在使用Vue时，推荐在浏览器上安装Vue Devtools，它允许你在一个更友好的界面中审查和调试Vue应用，在Google插件商城中，我们也可以直接搜索到；

Vue文件引入

    Vue既然作为一个JavaScript的库，我们就可以直接使用<script>标签的方式，将这个库引入到我们的HTML文档当中，Vue有在线的库文件，我们可以直接去官方中找，也可以在boocdn中找到这个JavaScript库，如下；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box"></div>
<script>
    const vm = Vue.createApp({
        template: "<h1>cce</h1>"
    })
    vm.mount("#box")
</script>

    在引入之后，我们就可以使用Vue对象下面的createApp方法传递一个对象，这个对象里面包含了我们的Vue模版源码，然后将这个模版源码挂载到页面的某个容器之上，实现页面渲染；

template属性

    Vue对象的createApp属性可以传入一个对象，这个对象里面有一个template属性，这个属性主要作用就是声明我们的Vue模版语言的一个属性，我们将Vue的模版语法写到这个属性里面，Vue框架内部会自动将这个里面的模版语法在页面中进行渲染；
    可以看到，我们上述直接将HTML文档写到一个template属性里面，对于开发来将，非常的不便，其实这个属性我们可以直接省略，将template里面的代码，直接放在<script>标签外部；
    Vue有个机制，当template属性为非空时，会直接将template里面的内容直接替换mount挂载的标签里面的内容，直接覆盖mount挂载的标签里面的内容，那么当template属性为空时，会直接渲染，mount挂载的标签里面的内容；
    所以，我们就可以直接将代码，放在mount挂载的标签里面，Vue会自动渲染，这个里面的所有内容，如下；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <h1>cce</h1>
</div>
<script>
    const vm = Vue.createApp({})
    vm.mount("#box")
</script>

data属性

    Vue对象的createApp属性可以传入一个对象，这个对象里面有一个data属性，该属性必须是一个函数(在Vue2里面可以是一个对象)，并且这个函数的的返回值必须是一个对象，在Vue解析template属性中的模版语言时，会进行检测，一旦检测到存在"{{ var }}"这种语法的定义的字符串时，就会在data属性返回的对象中去寻找标识符为"var"所对应的值，然后将这个值替换到我们的模版语言中；
    同时，Vue的响应式系统也会监听这个data返回的对象的变化，之后该对象的修改或访问，都会在劫持中被处理，那么这个劫持的手段在Vue3中主要是采用ES6的新特性Proxy代理实现的，而在Vue2是使用如下语法实现监听的；

var obj = { name: "cce" };
Object.defineProperty(obj,"name",{
    set:function () {},
    get:function () {}
})

    那么在Vue3之后，是使用Proxy代理来实现的，如下；

var obj = {name: "cce"};
let new_obj = Proxy(obj, {
    set: function (target, property, value, receiver) {},
    get: function (target, property, receiver) {}
})

    一旦监听到，data函数返回的对象内的属性发生变化，就立马将这个最新的数据，渲染到页面上，所以我们template或者app中通过定义"{{ var }}"模版语法，就可以直接访问到data函数返回的对象中的var属性，如果我们修改了标识符var的值，就会被Vue的响应式系统劫持，然后被处理；

methods属性

    Vue对象的createApp属性可以传入一个对象，这个对象里面有一个methods属性，该属性必须是对象，通常，我们在这个对象里面会定义很多方法，比如我们的一些事件函数、功能函数都可以写在里面，同时在这些方法内部使用this可以直接访问到data属性对应的函数返回的对象；

this绑定

    在methods对象里面的函数使用this需要注意，因为函数内部的this绑定是取决于如何被调用的，在之前说过，如果我们将这个函数放到一个对象里面，那么这个函数内部的this绑定的就是对象本身，如果我们这个函数就是一个普通的函数，没有被其他任何对象绑定，那么这个函数中的this就是window，而如果我们调用这个函数时，调用了这个函数的apply方法，传入了this，那么这个函数绑定的this就是apply方法的第一个参数；
    而methods里面的函数绑定的this，其实就是data属性的返回值，即data属性对应函数返回的对象，通过下面的源码我们也可以看到，Vue3通过bind的方式，将methods属性里面的每一个方法都显式的绑定了this；

    从这里，我们也可以看到，methods属性里面的每一个函数绑定的是一个instance.proxy对象，实际上，这个instance.proxy对象就是data属性的函数的返回值；

模版语言

    在前面，讲解了template、data、methods三个属性，那么从现在开始，进入一个大的篇章，即模版语言，模版语言其实讲的也就是template属性，template属性的值，就是一堆模版语言，Vue里面有很多模版语法，如插值语法、基本指令、事件绑定等模版语法；

Mustache插值语法

    Mustache是基于JavaScript实现的模版引擎，类似于JQuery Template，但是这个模版更加的轻量级，语法更加的简单易用，很容易上手，Mustache的语法很简单，用双大括号"{{}}"标记要绑定的字段即可；
    如果我们希望将data对应的函数返回的对象里面的数据，渲染到template中，就需要借助Mustache语法来实现，使用双大括号"{{}}"标记来实现文本插值，并且在前面也说过，data返回的对象，是有添加到Vue的响应式系统里面的，所以当data返回的对象里面的数据发生改变时，对应的内容也会随之更新；
    当然，Mustache插值语法不仅可以用来表示data对应函数返回对象中的属性，也可以是一个JavaScript表达式；

文本插值

    文本插值很简单，无非就是使用"{{}}"标记，来表示data对应的函数返回的对象内的内容，它会被Mustache模版引擎所解析，并且，在这个"{{}}"标记内部，使用表达式，来包装我们的值，比如三元运算符、加减法、对象方法等，甚至在"{{}}"标记内部还可以直接使用methods里面的函数，如下示例；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <h1>我的名字叫{{ name.toUpperCase() }},年龄为{{ age + 1 }}，是一个{{ checkAge(age) }}</h1> <!-- 直接传入age，Mustache引擎会自动解析 -->
</div>
<script>
    Vue.createApp({
        data() {
            return {
                name: "cce",
                age: 26
            }
        },
        methods: {
            checkAge(age) {
                if (age > 18) {
                    return "成年人"
                } else {
                    return "未成年人"
                }
            }
        }
    }).mount("#box")
</script>

模版指令

    在Vue的模版语言中，也有很多的模版指令，不同的指令分别实现不同的功能，这些指令都是和属性放在同一个位置的，换句话说，这些指令都是HTML标签的一个属性，模版引擎渲染时，会去关注这些指令，然后根据指令的类型来实现不同的功能；

静态渲染指令(v-once)

    因为Vue是动态渲染的，一旦data对应函数返回的对象里面的值发生了变化，就会立即渲染到页面上来，那么如果我们不希望立即渲染到页面上来，而只是在刷新或者重新打开页面的时候，才会重新渲染到页面上来，那么这个时候就需要用到静态渲染指令，这里需要注意的是，如果父节点加入了静态渲染指令，那么子节点也将全部值渲染一次；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p v-once>老数据：{{ number }}</p>
    <p>新数据：{{ number }}</p>
    <button v-on:click="change">自加</button>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                number: 1
            }
        },
        methods: {
            change() {
                this.number++
            }
        }
    }).mount("#box")
</script>

文本指令(v-text)

    如果我们希望将data里面的数据，渲染到页面上，除了使用Mustache插值语法，还可以使用v-text文本指令，直接将指定标签的内容覆盖为指定的值，需要注意的是，它会覆盖当前值；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p v-text="text">p标签</p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                text: "v-text"
            }
        }
    }).mount("#box")
</script>

HTML指令(v-html)

    如果我们希望直接将HTML文本插入到指定标签内部，可以直接使用v-html指令，同样的，这里需注意，它会覆盖原有的内容；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p v-html="html">p标签</p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                html: "<h1>v-html</h1>"
            }
        }
    }).mount("#box")
</script>

原始值(v-pre)

    因为在Vue模版中，使用"{{}}"标记，会直接被模版引擎替换，这是模版引擎做的操作，如果我们就是想显示"{{ var }}"，并不想它被模版引擎解析，那么这个时候，我们就可以使用v-pre，来告知模版引擎这个标签中的内容，不要解析；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<div id="box">
    <p v-pre>{{name}}</p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                name: "cce"
            }
        }
    }).mount("#box")
</script>

防插值闪烁(v-cloak)

    当网速比较慢时，会出现一个不好的过度现象，会让用户先看到我们的表达式，比如，首先会看到{{ var }}，然后才看到data中的值，这就是所谓的插值闪烁问题，那么Vue为了防止这种问题产生带来的用户体验问题，就提供了一个v-cloak的指令来解决，在未成功渲染插值语法之前，先隐藏这个属性；
    但是，如果想要实现这个效果，还必须配合一个css样式来实现，如下css为固定写法；

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<div id="box">
    <p v-cloak>{{ name }}</p>
</div>
<script>
    Vue.createApp({
        data() {
            return {
                name: "cce"
            }
        }
    }).mount("#box")
</script>