vue学习笔记04

 学习的课程地址：老杜Vue视频教程，Vue2，Vue3实战精讲，一套通关vue_哔哩哔哩_bilibili

1、vue程序初体验

2、vue核心技术(基础)

前面参见：

vue学习笔记01

vue学习笔记02

vue学习笔记03

3、Vue组件化

3.1什么是组件化开发

（1）传统应用存在的问题：

        a、关系纵横交织，复杂，牵一发动全身，不利于维护。

        b、代码虽然复用，但复用效率不高。

（2）组件化方式开发的应用

        使用组件化方式开发解决了以上的两个问题：

        a、每一个组件都有独立的js，独立的css，这些独立的js和css只供当前组件使用，不存在纵横交错。

        b、代码复用新增强。组件不仅让js css复用了，HTML代码片段也复用了（因为要使用组件直接引入组件即可）。

（3）什么是组件？

        a、组件：实现应用中局部功能的代码和资源的集合。凡是采用组件方式开发的应用都可以称为组件化应用。

        b、模块：一个大的js文件按照模块化规则进行拆分，生成多个js文件，每一个js文件叫做模块。凡是采用模块方式开发的应用都可以称为模块化应用。

        c、任何一个组件中都可以包含这些资源：HTML CSS JS 图片 声音 视频等。从这个角度也可以说明组件是可以包括模块的。

3.2第一个组件

（1）组件使用分三步：

        第一步：创建组件

                Vue.extend（{该配置项和new Vue的配置项几乎相同，略有差别}）

                区别1：创建Vue组件的时候，配置项中不能使用el配置项。（但是需要使用template配置项来配置模板语句）

                区别2：配置项中的data不能使用直接对象的形式，必须使用function。（确保组件复用的时候，data数据是单独的一份，不相互影响）

<script>
    const myComponet = Vue.extend({
        template: `
        <ul>
            <li v-for="(user,index) of users" :key="user.id">
                {{index}},{{user.name}}
            </li>
        <ul>
        `,
        data(){
            return {
                user:[
                    {id:'001',name:'jack'},
                    {id:'002',name:'lucy'},
                    {id:'003',name:'james'}
                ]
            }
        }
    })
</script>

        第二步：注册组件：

                局部注册,只能在注册的vm中可以使用

                语法是：在components配置项中

                        组件名字：（定义组件时的接收变量。如：userlist:myComponent

const vm = new Vue({
    el:'#app',
    data:{
        msg:'第一个组件'
    },
    components:{
        userlist:myComponent
    }
})

                全局注册:在Vue实例创建之前注册

                语法是：Vue.component('组件名',组件对象)。如：Vue.component('userlogin',userLoginComponent)

        第三步：使用组件

<userlist></userlist>
<userlist></userlist>

（2）小细节：

        a、在Vue当中是可以使用自闭合标签的，但是前提必须是脚手架环境中使用。

        b、创建Vue组件的时候Vue.extend()可以省略。const myComponent={}，但是底层实际还是会在注册组件的时候调用的。

        c、组件的名字：不要使用HTML内置的标签名。

        第一种：全部小写；

        第二种：首字母大写，后面都是小写；

        第三种：kebab-case命名法（串式命名法，如：user-login）；

        第四种：CamelCase命名法（驼峰式命名法，如：UserLogin）。但是这种方式只允许在脚手架环境中使用。

        在创建组件的时候，通过配置项配置一个name，这个name不是组件的名字，是设置Vue开发者工具中显示的组件的名字。

3.3组件嵌套

（1）组件在哪里注册，就在哪里使用。

（2）template配置项只能有一个根标签。

（3）对象里面的key和value同名的话，：value可以省略，如：{app：app}=>{app}

3.4VueComponent

简称：vc

（1）new Vue({})配置项中的this和Vue.extend({})配置项中的this他们分别是谁？

new Vue（{}）中的this是Vue实例；Vue.extend（{}）中的this是VueComponet实例。

Vue.extend()执行结果的返回值是：是一个全新的构造函数，VueComponent构造函数。（因为var sub 是局部变量）

通过构造函数，创建对象new user（）实例化。Vue在解析到<user></user>标签时就会创建VueComponent对象，再用一次就会再创建一个，里面的this就是该对象实例。

3.5prototype，__proto__原型对象

(1)基础知识

构造函数有个prototype属性，叫作显式的原型属性，通过显式的原型属性可以获取原型对象。

通过构造函数可以创建实例，对于实例它有一个隐式的原型属性:__proto__，同样可以拿到原型对象。

原型对象只有一个。

注意：显示的（建议程序员使用的）。隐式的（不建议程序员使用的）

1. **基本理解**

- 想象一下，JavaScript中的对象就像一个个小机器人。每个小机器人（对象）都有自己的一些本领（属性和方法）。但是呢，有些本领它们自己可能没有，这时候就要找它们的“师傅”（原型对象）来帮忙。 - 比如说，你有一个对象`obj`，当你想让它做某件事（调用一个属性或者方法）的时候，它会先看看自己会不会。如果不会，就会去问它的原型对象：“师傅，你会这个吗？” - 例如，`let obj = {};`这个空对象就像一个刚出厂啥也不会的小机器人。它的原型对象是`Object.prototype`，就像是它的师傅，教它一些基本的东西，像`toString`方法，当你想把这个对象转成字符串的时候，它自己没有这个方法，就会从它的师傅（原型对象）那里学到。

2. **函数和原型对象的关系**

- 函数在JavaScript里就像是一个“机器人制造工厂”。当你定义一个函数，比如`function Person() {}`，这个函数有一个特殊的地方，就是它有一个自己的“模具”（`prototype`属性指向的原型对象）。 - 当你用`new`这个关键字来调用这个函数（就像是启动工厂生产机器人），生产出来的小机器人（对象）就会以这个“模具”作为自己的师傅（原型对象）。 - 比如，`let p = new Person();`这个`p`对象的原型对象就是`Person.prototype`。这就好比工厂`Person`生产出来的机器人`p`，它的师傅就是工厂`Person`的那个“模具”。

3. **原型对象用于继承**

- 继承就像是家族传承。假设`Animal`是一个大家族，家族里有一些本领（属性和方法），比如`Animal`家族有一个本领是发出声音（`makeSound`方法），还有一个特征是有物种类型（`species`属性）。 - 现在有一个`Dog`小家族，想继承`Animal`大家族的本领。我们就可以让`Dog`家族的原型对象（也就是它们的师傅）是`Animal`家族的一个成员（`Dog.prototype = new Animal();`）。 - 这样，`Dog`家族的成员（通过`new Dog()`创建的对象）就可以学到`Animal`家族的本领了，比如`myDog.species`能得到`Animal`家族的物种类型，`myDog.makeSound`也能发出`Animal`家族的那种声音。

4. **修改原型对象的影响**

- 还是用机器人来举例。如果有一个“机器人制造工厂”（函数）叫`Car`，生产了两个机器人（对象）`car1`和`car2`。 - 当工厂的“模具”（`Car.prototype`）被修改了，比如给模具加上了一个颜色属性（`Car.prototype.color = "red";`），那么已经生产出来的机器人`car1`和`car2`都会学到这个新本领（它们的原型对象被修改了），都有了颜色属性。 - 但是，如果只是单独给`car1`这个机器人加了一个属性（`car1.type = "big";`），就像给它单独装了一个新零件，这个属性就只有`car1`有，`car2`是没有这个属性的，因为`car2`没有被单独改装，它还是按照工厂的“模具”（原型对象）来的。

（2）应用

给vue的原型对象扩展一个counter属性，在vue的实例上可以访问的到,同时component的实例也可以访问的到。这样可以实现代码复用，vc有很多东西无需再写一遍了。

Vue.prototype.counter = 1000

console.log('vm.counter',vm.counter)//vm.counter 1000

console.log('vc.counter',this.counter)//vc.counter 1000

（3）底层原理：user.prototype.__proto__=vue.prototype: ture

 3.6单文件组件

注： vscode的Vue代码高亮显示插件：Vetur（作者：Pine Wu);

标签改前面，后面自动改插件：Auto Rename Tag(作者：Jun Han)

（1）单文件组件使用过程

a、创建组件，默认导出，export default

b、导入组件 import Y1 from './Y1.vue'  //Y1可以使用其他名字

注册组件 component ：{Y1}

c、使用组件 <Y1></Y1>

（2）入口文件，main.js

import App from './App.uve'

new Vue({
    el:'#root',
    template:'<App></App>',
    components:{App}
})

(3)index.html

<body>
    <div id='root'></div>
    <script src='../js/vue.js'></scrip>
    <script src='./main.js'></script>
</body>

(4)要运行需要借助脚手架

a、下载、安装Node.js:https://nodejs.org/zh-cn/download/

b、dos命令窗口，输入npm命令：npm -version

c、安装脚手架Vue CLI

 

编译的时候不让脚手架检查语法

保存时是否进行语法检查，true表示检查，false表示不检查，默认值是true

vue.config.js详细配置参见官网文档：配置参考 | Vue CLI

后续参见：vue学习笔记05-优快云博客