qq_54817514
qq_54817514

vue2+vue3

VUE2

一、初识Vue

1. 入门

vue的特点：

  1. 采用组件化模式
  2. 声明式编码
  3. 使用细腻Dom+优秀的Diff算法
入门示例：

<script src="../js/vue.js" type="text/javascript">script>
head>

<body>
    
    <div id="root">
        <h1>hello,I am {{name}}h1>
        <h1>我的年龄是,{{age}}h1>
    div>
    <script type="text/javascript">
        Vue.config.productionTip = false;  //关闭浏览器的生产提示
        //创建Vue示例
        new Vue({
            el: "#root", //指定当前Vue实例为那个容器服务，值通常为css选择器字符串
            data: {  //用于存储数据，数据供el指定的容器使用
                name: '靓仔',
                age: '21'
            }
        })
    script>
body>

2.模板语法：

  1. 插值语法：

    功能:用于解析标签体内容。
    写法: {{xx}}. xxx是js表达式，且可以直接读取到data中的所有属性。

  2. 指令语法

    功能:用于解析标签(包括:标签属性、标签体内容、绑定事件…)。
    举例: v-bind:href=“xx” 或简写为 :href=“xxx”, xxx同样要写js表达式，
    且可以直接读取到data中的所有属性。
    备注: Vue中有很多的指令，且形式都是: v-???, 此处我们只是拿v-bind举个例子

    v-bind   //v-bind:href="url"  使用v-bind:属性="..." 可以将所有的属性中的内容变成表达式
可以简写为  ':'
<h1>指令语法h1>
<a v-bind:href="url">百度a>
<a :href="baidu.url1">百度a>
<script type="text/javascript">
    Vue.config.productionTip = false;  //关闭浏览器的生产提示
    //创建Vue示例
    new Vue({
        el: "#root", //指定当前Vue实例为那个容器服务，值通常为css选择器字符串
        data: {  //用于存储数据，数据供el指定的容器使用
            url: 'https://www.baidu.com',
            <!--属性名重复时可使用层级结构分开,调用时使用外层的baidu.属性（url）-->
            baidu:{
                url: 'https://www.baidu.com'  
            }
        }
    })
script>

3. 数据绑定

单向绑定和双向绑定：


<input type="text" v-bind:value="url">百度input>   

<input type="text" v-model:value="url">百度input>  
v-model:value="url"  可以简写为v-model="url"  因为它默认就是获取value值

拾遗：

el 的两种写法：

//创建Vue示例
const x = new Vue({
//第一种  el: "#root", //指定当前Vue实例为那个容器服务，值通常为css选择器字符串
data: {  //用于存储数据，数据供el指定的容器使用
name: '靓仔',
age: '21'
}
})
//第二种
x.$mount('#root');

data 的两种写法：

//第一种 （对象式）
data: {  //用于存储数据，数据供el指定的容器使用
name: '靓仔',
age: '21'
}
//第二种 （函数式）
data: function () {
return {
  name: 'xxx'
}
}

4. MVVM模型

  1. M:模型(Model)| :对应|data中的数据
  2. V:视图(View) :模板
  3. VM:视图模型(ViewModel) : Vue 实例对象
<a :href="url1">{{name}}a>              =========》 V view视图       
div>
<script type="text/javascript">
    Vue.config.productionTip = false;  //关闭浏览器的生产提示
    //创建Vue示例
    new Vue({                    		  =========》 VM : 实例
             el: "#root", //指定当前Vue实例为那个容器服务，值通常为css选择器字符串
             data: {  //用于存储数据，数据供el指定的容器使用
             name: '靓仔',
             age: '21'        	          =========》M :model
            }
    })
script>

5. 数据代理

示例：

<script type="text/javascript">
    var number = 20;
    let person = {
        name: 'zhangsan',
        sex: '男',
    }

    Object.defineProperty(person, 'age', {
        value: 20,
        enumerable: true,  //控制属性是否可以枚举，默认值是false
        writable: true,    //控制属性是否可以被修改，默认值是false
        configurable: true, //控制属性是否可以被删除，默认值是false
        //当有人读取person的age属性时，get函数(getter)就会被调用，且返 回值就是age
        get: function () {
            return number;
        },
        set(value) {
            console.log("修改值为：",value);
            number = value;
        }
    })

    console.log(Object.keys(person))
script>
Vue中的数据代理:

在控制台Vue中输出data的值： vm._data.属性名

通过vm对象来代理data对象中属性的操作(读/写)

Vue中数据代理的好处:
更加方便的操作data中的数据
3.基本原理:
通过0bject . defineProperty( )把data对象中所有属性添加到vm上
为每一 个添加到vm 上的属性， 都指定一一个getter/setter 。
在getter/setter内部去操作(读/写) data中对应的属性。

6. 事件处理

6.1. 点击事件：

语法:

v-on:click=“showInfo” 简写 @click=“showInfo2(666)”

示例：


<div id="root">
    <button v-on:click="showInfo">点我欢迎（不传自定义参）button>
    <button @click="showInfo2(666)">点我欢迎（传自定义参）button>
div>
<script type="text/javascript">
    Vue.config.productionTip = false; //关闭浏览器的生产提示
    //创建Vue示例
    const vm = new Vue({
        el: "#root", //指定当前Vue实例为那个容器服务，值通常为css选择器字符串
        data() {
            return {
                name: 'xxx'
            }
        },
        methods: {
            showInfo(event) { //event.target拿到该事件的目标 （这里就是button标签本身）.innerText 获取文本
                console.log(event.target.innerText)
                alert("你好光哥");
            },
            showInfo2(number) {
                console.log(number)
                alert("你好光哥" + number);
            }
        }
    })
script>
6.2 事件修饰符

Vue中的事件修饰符:

  1. prevent:阻止默认事件(常用)
<a href="hppts://www.baidu.com" @click.prevent="aclick">不跳转到百度a>
  1. stop:阻止事件冒泡(常用) ;

<button v-on:click="showInfo">点我欢迎（不传自定义参）button>
<button @click.stop="showInfo">点我欢迎（传自定义参）button>

  1. once: 事件只触发一次(常用) ,调用过后就失效

  2. capture:使用事件的捕获模式;

  3. self:只有event . target是当前操作的元素是才触发事件;

  4. passive:事件的默认行为立即执行，无需等待事件回调执行完毕;

6.3 Vue的键盘事件
  1. Vue中常用的按键别名:
键名 别名
回车 enter
删除 delete（捕获删除和退格键）
退出 esc
空格 space
换行 tab（特殊，必须配合keydown使用）
上 up
下 down
左 left
右 right

  1. Vue未提供别名的按键，可以使用按键原始的key值去绑定，但注意要转为kebab-case(短横线命名)

  2. 系统修饰键(用法特殊) : ctr1、alt、shift、 meta

    (1).配合keyup使用:按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。

    (2).配合keydown使用:正常触发事件。

  3. 也可以使用keyCode去指定具体的按键(不推荐)

  4. Vue . config. keyCodes.自定义键名=键码，可以去定制按键别名

示例：


<div id="root">
    <input type="text" placeholder="按下回车提示" @keyup.enter="showInfo">
div>
<script type="text/javascript">
    Vue.config.productionTip = false; //关闭浏览器的生产提示
    //创建Vue示例
    const vm = new Vue({
        el: "#root", //指定当前Vue实例为那个容器服务，值通常为css选择器字符串
        data() {
            return {
                name: 'xxx'
            }
        },
        methods: {
            showInfo(e) {
                console.log(e.Key,e.keyCode)   //获取按下的键和它的编码号
                console.log(e.target.value);   //获取标签的value值
            }
        }
    })
    // x.$mount('#root');  //和el: "#root"同效果
script>

7. 计算属性

  1. methods实现拼接属性并在页面显示：
姓：<input type="text" v-model="firstName" />
<br />
名：<input type="text" v-model="lastName" />
<br />
全名
<span>{{fullName()}}span>

const vm = new Vue({
methods: {
fullName() {
    return this.firstName + '-' + this.lastName
   }
}
})
  1. 计算属性实现拼接属性并在页面显示：
const vm = new Vue({
    el: "#root", //指定当前Vue实例为那个容器服务，值通常为css选择器字符串
    computed: {
        fullName: {
            get() {
                return this.firstName + '-' + this.lastName
            },
            set(value) {
                const arr = value.slice('-')
                this.firstName = arr[0]
                this.lastName = arr[1]
            }
        }
    }
})
  1. 计算属性–简写（只读不改时使用）
computed: {
    fullName() {  //等同于fullName: {get() {}
        return this.firstName + '-' + this.lastName
    }
}

8. 监视属性

8.1案例：
<button @click="next">点我切换button>
<button @click="isName=!isName">点我切换(简写，当操作简单时使用)button>

methods: {
    next() {
        return this.isName = !this.isName;
    }
},
computed: {
    fullName() {
        return this.firstName + '-' + this.lastName
    },
    name() {
        return this.isName ? "靓仔" : "帅哥"
    }
}

使用监视属性：

//第一种
watch:{
    //要监视的对象
    isName:{
        immediate:true,  //初始化时调用一下headler
        handler(newValue,oldValue){
            console.log("值被修改前"+newValue+"值被修改后"+oldValue)
        }
    }
}

//('要监视的属性'，{ 配置项 })
vm.$watch('isName',{
    immediate: true,  //初始化时调用一下headler
    handler(newValue, oldValue) {
        console.log("值被修改前" + newValue + "值被修改后" + oldValue)
    }
})
8.2深度监视
<h1>{{numbers.a}}h1>
<button @click="numbers.a++">点我给a++button>

data() {
    return {
        isName: true,
        numbers: {
            a: 1,
            b: 1
        }
    }
},
    
    watch: {
        //监视多层结构的某个属性
        'numbers.a': {
            handler() {
                console.log("a改变了")
            }
        }


        //监视多层结构的全部属性
        numbers: {
            deep: true,//开启监视多层结构的全部属性
                handler() {
                console.log("a改变了")
            }
        }
    }
8.3 watch对比computed

computed和Iwatch之间的区别:

  1. computed能完成的功能，watch 都可以完成。

  2. watch能完成的功能，computed不一 定 能完成，例如: watch可以进行异步操作。

  3. 两个重要的小原则:

    所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象。

    所有不被Vue所管理的函数(定时器的回调函数、ajax的回调函数等)，最好写成箭头函数，
    这样this的指向才是Vm或组件实例对象。

9.绑定class样式

1.class样式

写法:class=“xxx” xxx可以是字符串、对象、数组。

字符串写法适用于:类名不确定，要动态获取。

对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。

数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用。


<div class="defalut" :class="back" @click="style">{{name}}div>
methods: {
style: function () {
let arr = ['red', 'green', 'black']
let number = Math.floor(Math.random() * 3);
this.back = arr[number];
}
}


 <div class="defalut" :class="arrClass" @click="style">{{name}}div>

 data() {
      return {
        name: '杜兰特',
        back: 'red',
        arrClass:['red', 'green', 'black']
        }
 },



<div class="defalut" :class="objClass" @click="style">{{name}}div>

data中:
objClass: {
red: false,
green: false
}
9.2绑定style样式

style样式

:style=“{fontSize: xx}” 其中xxx是动态值。

:style="[a,b]"其中a、b是样式对象.

10. 条件渲染

显示或不显示：


<div v-show="false">世界上最好的运动员--凯文.{{name}}div>

<div v-if="1===2">世界上最好的运动员--凯文.{{name}}div>
<div v-else-if="1===1">历史第一凯文.{{name}}div>

<template v-if="1===1">
    <h1>aaah1>
    <h1>bbbh1>
    <h1>ccch1>
template>

11. 列表渲染

  1. 遍历：
<ul>
    
    
    <li v-for="(p,index) in persons" :key="p.id">
        {{p.name}}-{{p.age}}
    li>
    
    <li v-for="(val,key) in audi" :key="key">
            {{key}}-{{val}}
    li>
ul>

const vm = new Vue({
    el: "#root", //指定当前Vue实例为那个容器服务，值通常为css选择器字符串
    data() {
        return {
            persons: [
                {id: '001', name: '张一', age: 18},
                {id: '002', name: '张二', age: 19},
                {id: '003', name: '张三', age: 20}
            ],
            audi: {
                name: '奥迪rs7',
                price: '200w',
                color: 'red'
            }
        }
    },
})

key的作用与原理

  1. 虚拟DOM中key的作用:

key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据[新数据]生成[新的虚拟DOM] ,

随后Vue进行[新虚拟DOM]与[旧虚拟DOM]的差异比较，比较规则如下:

  1. 对比规则:

(1) .旧虚拟DOM中找到了与新虚拟DOM相同的key

①.若虚拟DOM中内容没变，直接使用之前的真实DOM!

②.若虛拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM。

(2) .旧虚拟DOM中未找到与新虚拟DOM相同的key

创建新的真实DOM，随后渲染到到页面。

12. 列表过滤（类似模糊搜索）

示例：

<input type="text" placeholder="请输入人名：" v-model="choice">
<ul>
    <li v-for="(p,index) in filPersons" :key="p.id">
        {{p.name}}-{{p.age}}-{{p.sex}}
    li>
ul>

const vm = new Vue({
    el: "#root", //指定当前Vue实例为那个容器服务，值通常为css选择器字符串
    data() {
        return {
            choice: '',
            persons: [
                {id: '001', name: '周冬雨', age: 18, sex: '女'},
                {id: '002', name: '马冬梅', age: 19, sex: '女'},
                {id: '003', name: '周杰伦', age: 20, sex: '男'},
                {id: '004', name: '温兆伦', age: 21, sex: '男'}
            ],
            filPersons: []
        }
    },
    //计算属性实现
    computed: {
         filPersons() {
              return this.persons.filter((p) => {
                 return p.name.indexOf(this.choice) !== -1;
            })
         }
    }
    //监视实现
    watch: {
        choice: {
            immediate: true,  //运行完直接调用，此时val是空值 数组里包含有空串 所以查询全部
            handler(val) {
                //过滤原有的数组，判断里面是否包含输入的值，如果有将其返回给新的数组，用于展示
                this.filPersons = this.persons.filter((p) => {
                    return p.name.indexOf(val) !== -1
                })
            }
        }
    }
})
12.1 列表排序
<button @click="sortType=2">年龄升序button>
<button @click="sortType=1">年龄降序button>
<button @click="sortType=0">原顺序button>

data() {
    return {
        sortType: 0, //0原顺序  1降序  2升序
        choice: '',//输入的关键字
        persons: [
            {id: '001', name: '周冬雨', age: 30, sex: '女'},
            {id: '002', name: '马冬梅', age: 19, sex: '女'},
            {id: '003', name: '周杰伦', age: 25, sex: '男'},
            {id: '004', name: '温兆伦', age: 20, sex: '男'}
        ],

        // filPersons: [] 用watch实现使用
    }
},
computed: {
    filPersons() {
        const arr = this.persons.filter((p) => {
            return p.name.indexOf(this.choice) !== -1;
        })
        if (this.sortType) {  //不是执行原顺序的操作，才进行排序
            arr.sort((p1, p2) => {
                return this.sortType === 1 ? p2.age - p1.age :p1.age - p2.age
            })
        }
        return arr;
    }
}

12.2 监视数据

vue.set() 方法：

语法： Vue.set(往哪个对象上添加，要添加的属性名，值)

在Vue开发者工具中给某个对象添加一个响应式数据 ：

第一种：

Vue.set(vm._data.student，sex，‘男’)；

第二种：

vm.$set(vm.student，sex，‘男’)；

局限性：

只能给vm的data里的某个响应式对象添加属性,不能给vm或者data直接添加根对象

editHoppy(){
    // this.student.hoppys.splice(0,1,"学习");
    this.$set(this.student.hoppys,0,"开车");
}

总结：

Vue监视数据的原理:

  1. vue会监视data中所有层次的数据。

  2. 如何监测对象中的数据?

通过setter实现监视，且 要在new Vuel时 就传入要监测的数据。

(1).对象中后追加的属性，Vue默认不做响应式处理

(2).如需给后添加的属性做响应式，请使用如下FAPI:

Vue . set(target, propertyName/ index, value) 或

Vm. $set (target, propertyName/ index, value )

  1. 如何监测数组中的数据?

通过包裹数组更新元素的方法实现，本质就是做了两件事:

(1).调用原生对应的方法对数组进行更新。

(2).重新解析模板，进而更新页面。

  1. 在Vue修改数组中的某个元素一定 要用如下方法:

1.使用这些API:push()、pop()、 shift()、 unshift()、splice()、 sort()、reverse()

2.Vue.set()或vm.$set()

特别注意: Vue.set() 和vm.$set() 不能给vm或vm的根数据对象添加属性! !

13. 收集表单数数据

收集表单数据:

若: <input type="text" />，则v-mode1收集 的是value值，用户输入的就是value值。

若: <input type="radio"/>, 则v-mode1收集 的是value值，且要给标签配置value值。

若: <input type=" checkbox"/>

  1. 没有配置input的value属性，那么收集的就是checked (勾选or未勾选，是布尔值)

  2. 配置input的value属性:

    (1)v - mode1的初始值是非数组，那么收集的就是checked (勾选or未勾选，是布尔值

    (2)v - mode1的初始值是数组，那么收集的的就是va1ue组成的数组

    备注: v-model的三个修饰符:

    lazy:失去焦点再收集数据

    number:输入字符串转为有效的数字

    trim:输首尾空格过滤

14.过滤器

  1. 导入依赖

    <script src="../js/dayjs.min.js" type="text/javascript">script>
<h1>计算属性实现:{{fmtTime}}h1>
<h1>methods实现:{{mDate()}}h1>
<hr>
<h3>过滤器实现{{date | dataFormat}}h3>

    格式化日期格式：

    //计算属性
computed: {
    fmtTime() {
        return dayjs(this.date).format('YYYY年MM月DD日 HH:mm:ss')
    }
},
//方法
methods: {
    mDate() {
        return dayjs(this.date).format('YYYY年MM月DD日 HH:mm:ss')
    }
}
//过滤器实现
filters: {
    dataFormat(value) {
        return dayjs(this.value).format('YYYY年MM月DD日 HH:mm:ss')
    }
}

15.内置指令

v-test

<div v-test="name">div>   
//name属性会替换掉标签中的内容，直接显示在页面上，不会解析str的值里的标签结构

v-html（有安全性问题）

<div v-test="str">div> 
str:'<h1>你好h1>'         //会解析str的值里的标签结构

v-cloak

<div v-cloak>{{name}}div>  //Vue示例一旦接管，就会删除该属性

v-once

<div v-once>{{age}}div>    //初次动态渲染后，就变成静态内容了

v-pre

//跳过其节点的编译过程，可使用它跳过没有插值语法，指令语法的节点上，会加快编译
<h1 v-pre>Vue太难了h1>
<div v-once>{{age}}div>

16. 自定义指令

函数式

<h1>10倍是<span v-big="n">span>h1>

//Vue实例中。。。。
directives: {
    //自定义指令的两个参数的(当前标签的真实DOM,binding元素和指令的绑定)
    //绑定成功时调用，所在的模板被重新解析时调用
    big(element, binding) {
        element.innerText = binding.value * 10
    }
}

对象式

<input type="text" v-fbind:value="n">

directives: {
    //自定义指令的两个参数的(当前标签的真实DOM,binding元素和指令的绑定)
    //绑定成功时调用，所在的模板被重新解析时调用
    big(element, binding,this) {     //此处的this是指window
        element.innerText = binding.value * 10
    },
    fbind: {
        //指令与元素成功绑定时
        bind(element, binding) {
            element.innerText = binding.value
        },
        //指令所在元素被插入页面时
        inserted(element, binding) {
            element.focus()
        },
        //指令被重新解析时
        update(element, binding) {
            element.innerText = binding.value
            element.focus()
        }
    }
}

全局指令：(其他容器也可调用)

<script type="text/javascript">
    Vue.directive('fbind', {
        //指令与元素成功绑定时
        bind(element, binding) {
            element.innerText = binding.value
        },
        //指令所在元素被插入页面时
        inserted(element, binding) {
            element.focus()
        },
        //指令被重新解析时
        update(element, binding) {
            element.innerText = binding.value
            element.focus()
        }
    })
<script/>

注意：

自定义指令如果有多个单词组成用 “ - ” 分割 ,例：big-number

17.Vue生命周期

生命周期:

1.又名:生命周期回调函数、生命周期函数、生命周期钩子。

2.是什么:Vue在关键时刻帮我们调用的些特殊名称的函数。

3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。

4.生命周期函数中的this指向是vm或组件实例对象)

流程图：

[vue2+vue3_第1张图片

beforeCreate (初始化数据监视、数据代理之前)

无法通过vm获取data中的数据，和methods的方法，数据代理还未开始。

created(初始化数据监视、数据代理之后)

可以通过vm获取data中的数据，和methods的方法，数据代理、数据监视创建成功。

beforeMounted(挂载之前)

Vue完成模板的解析并把初始的真实DOM元素放入页面之前 （挂载之前）调用beforeMounted

mounted（挂载完毕）

Vue完成模板的解析并把初始的真实DOM元素放入页面后 （挂载完毕）调用mounted，一般发送Ajax请求，开启定时器，自定义事件等等工作。

beforeUpdate（更新之前）

执行eforeUpdate时数据是新的，页面是旧的。页面和数据尚未同步。

updated（更新完毕）

执行eforeUpdate时数据是新的，页面也是新的

beforeDestroy（销毁之前）

此时vm中的data,methods,指令等还可使用，即将被销毁，一般在这阶段关闭定时器，解绑自定义事件等。。。

destroyed(销毁之后)

彻底销毁vm，vm中的数据不再是响应式。原生的DOM依然有效。

template:

//创建模板
template: `
  

  
  

`
,

二、Vue组件化编程

1.组件的理解

1.1 组件的定义：

实现应用中的局部功能代码和资源的集合。

1.2 非单文件组件

一个文件中有多个组件

创建非单文件组件：

Vue中使用组件的三大步骤:

一、如何定义一个组件?

使用Vue . extend(options )创建，其中options和new Vue ( options )时传入的那个options几乎-样，但

二、区别如下:

  1. el不要写，为什么?

    最终所有的组件都要经过一一个vm的管理，由vm中的el决定服务哪个容器

  2. data必须写成函数，为什么?避免组件被复用时， 数据存在引用关系。

    备注:使用template 可以配置组件结构。

    如何注册组件?

    1.局部注册:靠new Vue的时候传入components选项

    2.全局注册:靠Vue . component(‘组件名’,组件)

三、编写组件标签:

<schoo1>school>

示例：


<div id="root">
                        ==》 第三步
    <school>school>
    <hr>
                        ==》 第三步
    <student>student>
div>
<script type="text/javascript">
    Vue.config.productionTip = false; //关闭浏览器的生产提示
    //1.创建school组件                        ==》 第一步
    const school = Vue.extend({
        //     el: "#root"    组件定义时， 一定不要写el 配置项，因为最后所有的组件都由vm决定服务哪个容器
        template: `
<div>
<h1>学校名称:{{ schoolName }}h1>
<h1>学校地址:{{ address }}h1>
    div>
`,
        data() {
            return {
                schoolName: '北大青鸟',
                address: '河南洛阳'
            }
        }
    })

    //1.创建student组件       Vue.extend()可省略，直接写里面内容                 ==》第一步
    const student = Vue.extend({
        template: `
<div>
<h1>学生名字：{{ studentName }}h1>
<h1>年龄 {{ age }}h1>
    div>
`,
        data() {
            return {
                studentName: '张三',
                age: 21
            }
        }
    })


    //注册全局组件
   // Vue.component('student', student); ==》第二步

    //创建vm
    const vm = new Vue({
        el: "#root",
        //2.注册组件(局部注册)              ==》第二步
        components: {
            school: school  //简写school
        }
    })

注意：

关于组件名推荐写法：

一个单词: 纯小写school

多个单词：使用“ - ” 链接并用 ‘’ 包括 : ‘my-school’

​ MySchool (驼峰命名) 注： 在使用脚手架时才可使用，不然html 页面无法解析；

创建组件简写：

const student = {
    template: `



学生名字：{{ studentName }}


年龄 {{ age }}



`,
    data() {
        return {
            studentName: '张三',
            age: 21
        }
    }
}

组件的嵌套

//1.创建student组件
const student = Vue.extend({...})
//2.创建school组件 内嵌套student组件
const school = Vue.extend({
           template: `
          

          ...//school组件代码
              
          

        `,
        data() {
            return {
				//...school数据
            }
        },
        components: {
            student     //注册student组件 （内嵌） 
        }                            
})
//创建hello组件
const hello = {
    template: `
{{msg}}
h1>`,
    date() {
        return {
            msg: '你好李靓仔'
        }
    }
}
//创建app组件 (一般用于管理所有组件)
const app = Vue.extend({
    template: `



         //使用组件


`,
    components: {
        school,           //注册组件（嵌套组件)
        hello
    }
})
//创建vm
const vm = new Vue({
    template: '',
    el: "#root",
    components: {
        app: app            // 2.注册组件(只需注册app组件，它里面嵌套着其他组件)
    }
})

VueComponent构造函数

关于VueComponent:

  1. schoo1组件本质是一 个名为YueComponent的构造函数，且不是程序员定义的，是Vue . extend生成的。

  2. 我们只需要写或, Vue解析时会帮我们创建school组件的实例对象，

即Vue帮我们执行的: new VueComponent (options)。

  1. 特别注意:每次调用Vue.extend,返回的都是一个全新的VueComponent!!!

  2. 关于this指向:

    (1).组件配置中:

    data函数、methods 中的函数、watch中的函数、computed中的函数它们的this均是[VueComponent实

    对象]。

    (2).new Vue()配置中:

    data函数、methods 中的函数、watch中的函数、computed中的函数它们的this均是[Vue实例对象]。

  3. VueComponent的实例对象，以后简称vc (也可称之为:组件实例对象)。

    Vue的实例对象，以后简称vm。

内置关系

VueComponent.prototype.——proto—— === Vue.prototype

为了让组件实例对象（vc） 也可以访问Vue原型的属性和方法。

单文件组件

一个文件中只有一个组件

创建.vue文件的格式：

//固定格式  创建school组件





//创建App组件



//创建main.js 指定组件要服务的容器
import App from "../vue/App";

new Vue({
    el:'#root',
    components:{App}
})


//创建容器页面

2. Vue脚手架

Vue脚手架是Vue官方提供的标准化开发工具。

**2.1 下载安装Node.js,配置环境 **

(40条消息) NodeJS 安装及环境配置_DistanceZK的博客-CSDN博客_nodejs安装及环境配置

解决报错:

error Component name “School” should always be multi-word vue/multi-word-component-names

在项目根目录下vue.config.js 文件中添加如下代码：

const {
	defineConfig
} = require('@vue/cli-service')
module.exports = defineConfig({
	transpileDependencies: true,
	lintOnSave: false              //关闭语法检查
})
2.2 render 函数

关于不同版本的Vue:

  1. vue.js与vue。runtime. xxx. js的区别:

    (1) .vue . js是完整版的ue,

    包含:核心功能+模板解析器。

    (2). vue. runtime . xx. js是运行版的Vue,只包含:核心功能;没有模板解析器。

  2. 因为vue.runtime .xx.js没有模板解析器，所以不能使用template配置项，需要使用

    render函数接收到的createElement函数去指定具体内容。

//main.js
import Vue from 'vue'               //此 'vue' 是一个残缺版的Vue,它不会解析