[暂不持续更新] Vue2+Vue3 框架学习笔记（尚硅谷张天禹版）

前言

• 本笔记是跟随B站张天禹讲师的尚硅谷Vue2.0 + Vue3.0全套教程丨vuejs从入门到精通,附上直达车。
• 本笔记更多为笔者个人使用，笔者的要求是达到能用的水平就可以，所以专业前端的同学而慎重考虑选择该笔记。很多原理性的东西笔者不会详写。如果你也是和我一样，只要求够用就行，可以看看。
• 随缘更新，笔者很懒，不知道什么时候能够完结哈哈
• 更新日志：
  • 2023年07月03日，更新到Vue核心：vue的其他内置指令—text指令
  • 2023年07月08日，更新到Vue组件化编程：scope样式
  • 2023年07月30日，最近事情很多很杂，很大一段时间不会更新，抱歉抱歉哈哈，短时间应该更新不完，要鸽了哈哈。

Vue核心

1.Vue简介：初识Vue

• Vue是什么？

  是一套用于构建用户界面的渐进式（Vue可以自顶向上做成的应用）JavaScript框架

• Vue的特点

  • 采用组件化的模式，提高代码的复用率、让代码更用以维护
  • 声明式编码，程序员操作的是虚拟DOM，没有直接操作DOM，提高开发效率
  • 使用虚拟DOM+Diff算法，尽量复用DOM节点
    

• [Vue官方API网站](Vue.js - 渐进式 JavaScript 框架 | Vue.js (vuejs.org))

• 编写一个HelloWorld 小案例

  
  
  
  	
  	
  	
  	
  
  
  
  	
  
  		
  HelloWorld,{{ name }}
  	
  
  	
  
  
  

  • 通过以上小案例：

  总结1：

  1.想让Vue工作，必须创建一个Vue实例（new Vue），且要传入一个配置对象

  2.id为root中的div容器中的代码依然符合html规范，知识中间有一些特殊的Vue语法

  3.root容器中的代码被称为【Vue模板】

  4.Vue实例和容器是一一对应的

  5.在真实的开发场景中，只存在一个Vue实例，配合组件一起使用

  6. {{ xxx }}中的内容需要写入js表达式，也就是一切可以返回值的东西

  7.一旦data中的数据更新，页面中使用到该数据的地方也会自动更新

el 和 data的两种写法

	

		
HelloWorld,{{ name }}
		插值语法：{{ name }}
		

		
数据绑定
		单项数据绑定：

		双向数据绑定：

	
	

data与el的2种写法
1.el有2种写法
(1).new Vue时候配置el属性。
(2)·先创建Vue实例,随后再通过vm. $mount( ’ #root’)指定el的值。
2.data有2种写法
(1).对象式(2).函数式
如何选择:目前哪种写法都可以，以后学习到组件时，data必须使用函数式，否则会报错。
3.注意:
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了，如果没有向上继承，则this指代的是Window对象。

2.Vue中的模板语法

• Vue中的模板语法主要有：
  • 插值语法：
    • 功能：用户解析标签体中的内容
    • {{ xxx }} 这种样式的的双大括号表达式
  • 指令语法：
    • 功能：用户解析标签（包括标签属性、标签体内容、绑定事件函数）
    • 写法：以v-开头的vue的指令

3.Vue中的数据绑定（v-bind、v-model）

• Vue中有两种数据绑定方式，使用指令语法：

  • 单向绑定（v-bind）：数据只能从data流向页面
  • 双向绑定（v-model)：数据能从data流向页面，也可以从页面流向data

  注意：

  1.双向绑定一般只应用于表单类元素上（input等）

  2.v-bind可以简写为 : ,而v-model:value一般可以简写为v-model（因为默认收集的就是value值）

4.什么是MVVM模型

• vue框架的设计模式借鉴了MVVM模型，什么是MVVM模型呢？如下图：
  

我们拆开来看：

1.M：模型（model）：对应的是data中的数据

2.V：视图（View）：对应页面或者实现页面的Vue模板

3.VM：视图模型（ViewModel）：Vue实例

对应到代码中就是：

小结论：

1.data中所有的属性，最后都出现到了VM上（通过数据代理）

2.VM上的所有属性以及Vue原型上的所有属性，在Vue模板中都可以直接使用

5.Vue中的数据代理（感觉太底层了，笔者过了一遍就没管了，可以自己看看）

6.Vue的事件处理（v-on）

事件绑定

• 使用v-on指令，以 v-on:事件名 或者简写 @事件名，来绑定事件
• 事件名后面需要指定回调函数，且该回调函数需要配置在methods对象中
• methods中配置的函数，不要使用箭头函数,否者this指向的就不是Vue实例了，而是Window
• methods中配置的函数，都是被Vue管理的函数，this指向的是Vue实例对象或者组件实例对象
• 事件名后面的回调函数如，@click=“demo” 和 @click=“demo($event,…params)” 效果一样，但是后者可以传参

案例：

       
事件的使用
       
       
       点击事件

事件修饰符

• Vue中的事件修饰符
  • prevent：阻止默认事件的发生
  • stop：阻止事件冒泡
  • once：事件只触发一次
  • capture：使用事件的捕获模式
  • self：只有event.target是当前操作的元素才触发事件
  • passive：事件默认为立即执行，无序等待事件回调执行完毕

小案例：

   
   跳转到百度

   
   

       冒泡
   

   
   只执行一次

键盘事件

• 绑定键盘事件一般有两个

  • @keydown：指在键盘按下去还没弹起来时触发事件
  • @keyup（常用）：等按键弹起来时再触发事件

• 绑定按键写法：@keydown.key值/keyCode || @keyup.key值/keyCode

• Vue中带用的按键别名:

  • 回车=>enter
  • 删除=>delete(捕获“删除”和“退格”键)
  • 退出=>esc
  • 空格=>space
  • 换行=>tab(特殊,必须配合keydown去使用)
  • 上=>up
  • 下=>down
  • 左=>left
  • 右=>right

小案例：

   
   键盘事件：

7.Vue中的计算属性（computed）

• 什么是计算属性

  • 定义：通过已有的属性计算而来
  • 原理：底层借助了objcet.defineproperty方法提供的getter和setter
  • get函数什么时候执行？
    • 初次读取时会执行一次
    • 当依赖的数据发生改变时会被再次调用
  • set函数什么时候被调用？
    • 如果计算属性要被修改，那必须写set函数去响应修改，且set中要引起计算时依赖的数据发生改变
  • 好处：与methods实现相比，内部有缓存机制(复用，当数据不发生改变的时候，不会重复调用），效率更高，调试方便。

• 写法：

  • 在Vue实例中添加一个配置对象：computed，代表里面的属性为计算属性，里面的属性以对象的形式存在
  • 一般情况下，计算属性中不需要setter去修改计算属性，所以我们可以将set方法从计算属性中去掉，使用函数式简写该计算属性

  
     数字1: 
  
     数字2: 
  
     求和：{{ sum }}
  
  
  
  

8.监视属性（watch）

• 监视属性watch:
  • 1.当被监视的属性变化时，回调函数自动调用,进行相关操作
  • 2.监视的属性必须存在,才能进行监视!!
  • 3.监视的两种写法:
    • (1) new Vue时传入watch配置
    • (2) 通过vm.$watch监视

深度监视

• (1)Vue中的watch默认不监测对象内部值的改变（一层）
• (2)配置deep:true可以监测对象内部值改变（多层）。
• 备注:
  • (1)Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以
  • (2)使用watch时根据数据的具体结构,决定是否采用深度监视

小案例：

       
今天天气很{{ info }}
       切换
       

       
a的值{{ num.a }}
       点击添加

计算属性与监视属性的区别

区别：

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

两个重要的小原则:

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

9.Vue中绑定样式（class和style）

• 绑定class样式
  • 写法： :class=“xxx”,绑定的内容可以是变量、对象、数组
    • 字符串写法适用于:类名不确定,要动态获取。
    • 对象写法适用于:要绑定多个样式，个数不确定，名字也不确定。
    • 数组写法适用于:要绑定多个样式，个数确定，名字也确定，但不确定用不用
• 绑定style样式
  • 写法： :style=“xxx”,绑定的内容可以是变量、对象、数组
    • :style="{fontSize: xxx}"其中xxx是动态值。
    • :style="[a,b]"其中a、b是样式对象。

10.Vue中的条件渲染（v-if、v-else-if、v-else、v-show）

• 条件渲染指令

  • v-if、v-else-if、v-else
  • v-show

• v-if系列

  • 写法：v-if="表达式"

    ​ v-else-if="表达式"

    ​ v-else(注意v-else是不需要写表达式的)

  • 适用于：切换频率比较低的场景，因为它是暴力删除**，不符合条件的节点直接从页面上移除**。

  注意：v-if、v-else-if、v-else可以一起使用，但是要求结构不能被打断，必须连贯使用

• v-show

  • 写法：v-show="表达式"
  • 适用于：页面节点切换频率较高的场景，但是未展示的节点没有被移除，只是使用display：none样式隐藏掉了

小案例：

   
   你好


   显示你好？

   

   

   
   
等于1
   
等于2
   
都不是
   添加++

11.Vue中的列表渲染（v-for）

• 列表渲染指令

  • v-for
    • 一般用于循环遍历展示列表数据
    • 语法：v-for="(value,index) in xxx" :key="index"，其中:key用于指定改遍历的节点是唯一的
    • xxx中可遍历的有数组、对象、字符串、指定数字+

  关于:key的说明

  1.虚拟DOM中key的作用:

  key是虚拟DOM对象的标识，当数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】 ,随后Vue进行【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下:

  2.对比规则:

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

  a.若虚拟DOM中内容没变,直接使用之前的真实DOM
  b.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

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

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

  使用遍历对象的索引作为key时：

  

  使用唯一标识id作为key时：

  

  3.使用index作为key可能会引发的问题

  （1）若对数据进行:逆序添加、逆序删除等破坏顺序（原来索引对应的值）操作:
  会产生没有必要的真实DOM更新==>界面效果没问题，但效率低
  （2）如果结构中还包含输入类的DOM:
  会产生错误DOM更新==>界面有问题

  如果没有特别指定key，vue会默认使用对象索引 index 作为key来唯一标识

  4.开发中如何选择key? :

  （1）最好使用每条数据的唯一标识作为key,比如id、手机号、身份证号、学号等唯一值。
  （2）如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表展示，使用index作为key是没有问题的

小案例：

    

        
        
用户信息：
        

            {{ item.name }} - {{ item.age }}岁
        
    

12.Vue中检测数据的原理（了解，看晕了）

Vue监视数据的原理:

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

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

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

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

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

Vue.set(target.propertyName/index，value）或vm.$set(target.propertyName/index.value)

3。如何监测数组中的数据?

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

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

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

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

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

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

13.Vue收集表单中的数据（v-model中的修饰符）

• vue收集表单中的数据

  • 若是普通:，则v-model收集的是value值，用户输入的就是value值。

  • 若是单选:'，则v-model收集的是value值，且要给标签配置value值。

  • 若是多选框:

    • 1.没有配置input的value属性，那么收集的就是checked（勾选 or未勾选，是布尔值)，点击任意一个都是全选

    • 2.配置input的value属性:

      (1)v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值)，点击任意一个都是全选

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

  备注：

  v-model 中的三个修饰符

  lazy:失去焦点再收集数据，常用于文本域textarea中

  number:输入字符串转为有效的数字，常用于输入纯数字的文本框中

  trim:输入首尾空格过滤

小案例：

    

        账号：


        密码：


        年龄：


        性别：
        男
        女


        爱好：
        学习
        打游戏
        吃饭
        


        所在地区
        
            请选择地区
            湖南
            上海
            北京
            广东
        
        


        自我介绍:
        


        阅读并接受点击跳转百度
        


        提交
    

14.Vue中的过滤器（在Vue3中已经被废除，可以使用计算属性代替）

• Vue中的过滤器

  • 定义:对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理），如对日期的显示格式会进行处理

  • 语法:

    • 1.注册过滤器:

      ​ 全局注册：再创建Vue实例之前注册 Vue.filter(name,callback回调函数）

      ​ 局部注册：再创建Vue实例之中注册 new Vue{filters:{}}

    • 2.使用过滤

      ​ 在插值语法中：{{ xxx|过滤器名 }}

      ​ 绑定的自定义属性中： v-bind:属性 = “xxx|过滤器名"

  注意：

  1.过滤器也可以接收额外参数、多个过滤器也可以串联

  2.并没有改变原本的数据,是产生新的对应的数据，只不过是以不同的格式显示

15.Vue中的其他内置指令（v-text、v-html）

（1）v-text指令

• 作用：向其所在的节点中渲染文本内容，但不会识别其中的html结构。

注意：

与差值语法的区别：v-text会替换掉当前节点中的所有内容，{{xxx}}只会替换括号内

（2）v-html指令

• 作用：向指定节点中渲染包含html结构的内容。

注意：

1.与差值语法的区别

（1）v-html会替换掉节点中所有的内容，{{xx}}则不会。

（2）v-html可以识别html结构。

2.有安全性问题

（1）在网站上动态渲染任意HTML是非常危险的,容易导致XSS攻击

（2）一定要在可信的内容上使用v-html，永不要用在用户提交的内容上

（3）v-cloak指令

• v-cloak指令（没有值）:
  • 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloakh性。
  • 使用css配合v-cloak可以解决网速慢时页面延迟解析模板内容（页面闪现）的问题。

（4）v-once指令

• v-once指令（没有值）:
  • v-once所在节点在初次动态渲染后，就视为静态内容了。
  • 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

（5）v-pre指令

• v-pre指令（没有值）：
  • 可以使当前节点跳过Vue编译过程，意思是如果你这条html语句没有用到Vue语法，那么再加上这条语句过后，Vue就不会再扫描这条语句，直接跳过编译。这样可以加快编译过程。

小案例：

  
  


  



  
  


  



  
  这是初始值，{{ num }}


  这是改变后的值，{{ num }}


  num加一

  
  
v-pre会跳过编译

16.Vue自定义指令

• 自定义指令操作DOM元素时
• 定义自定义指令语法：
  • 局部指令
    • 对象式：new Vue({ directives:{ 指令名,配置对象 } })
    • 函数式：new Vue({ directives:{ 指令名,回调函数 } })
  • 全局指令
    • 对象式：Vue.directive(指令名,配置对象)
    • 函数式： Vue.directive(指令名,回调函数)
• 对象式中常用的3个回调:
  • (1)bind:指令与元素成功绑定时调用。
  • (2)inserted:指令所在元素被插入页面时调用。
  • (3 )update:指令所在模板结构被重新解析时调用。

注意：

1.指令定义时不加v-，但使用时要加v-

2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。

17.Vue生命周期（重点）

• 什么是Vue的生命周期

  • 又名:生命周期回调函数、生命周期函数、生命周期钩子
  • 是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数，在不同的生命周期回调函数里面做不同的事情
  • 生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
  • 生命周期函数中的this指向是vm或组件实例对象。

• 常见的生命周期钩子

  • beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed
  • 其中：
    • mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等初始化操作。
    • beforeDestroy：清除定时器、解绑自定义事件、取消订阅消息等收尾工作。

  关于销毁Vue实例

  1.销毁后借助Vue开发者工具看不到任何信息。

  2.销毁后自定义事件会失效,但原生DOM事件依然有效。

  3.一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程了

• 生命周期图示

• 代码理解生命周期

 

     
{{ n }}
     点击n+1
     销毁

组件化编程（component）

传统方式编程，存在的问题：

​ 1.依赖关系混乱，不好维护、

​ 2.代码复用率不高，总的来说属于低内聚高耦合

所以，我们引出组件的概念

组件：实现应用中局部功能代码（html、csss、js）和资源（字体、视频、音乐等）的集合，分为非单文件组件和单文件组件

可以记住一句话：组件就是一块砖，哪里需要哪里搬

• Vue使用组件的三大步骤

  ​ 一、定义组件（创建组件）

  如何定义一个组件

  1、el不要写,为什么?—最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。

  2、data必须写成函数，为什么?——避免组件被复用时，数据存在引用关系，而对象中的数据是共用的

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

  创建组件和注册组件时，关于组件名：

  一个单词组成:

  第一种写法(首字母小写):school

  第二种写法(首字母大写):School

  多个单词组成:

  第一种写法(kebab-case命名):my-school

  第二种写法(CamelCase命名):MySchool(需要Vue脚手架支持)

  备注:

  (1).组件名尽可能回避HTML中已有的元素名称，例如:h2、H2都不行。

  (2).可以使用name配置项指定组件在开发者工具中呈现的名字。

  ​ 二、注册组件

  在Vue实例中注册组件，在Vue实例中添加一个全新的配置项component

  • 局部注册:靠new Vue的时候传入components选项
  • 全局注册:靠Vue.component('组件名’,组件)

  ​ 三、使用组件（在模板中编写组件标签）

  双标签写法

  单标签写法（在脚手架环境中使用）

1.非单文件组件

• 一个文件中包含n个组件

• 使用非单文件组件形式使用组件

  • 定义组件（创建组件）
  • 注册组件
  • 编写标签组件

2.组件实例（VueComponent）

• 每当我们创建一个组件的时候，Vue.extend都会帮我们创建一个不同的VueComponent组件实例。

• 关于VueComponent：

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

  • 我们只需要写或，Vue解析时会帮我们创建school组件的实例对象,即Vue帮我们执行的:new VueComponent(options)。

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

  • 关于this指向:

    • 组件的配置对象中:

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

    • Vue实例的配置对象中:

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

• 一个重要的内置关系：

  //组件实例对象的隐式原型是等于Vue的原型
  VueComponent.prototype._proto_ === Vue.prototype
  

​ 为什么要有这个关系？

​ 让组件实例对象（VueComponent）可以访问到Vue原型上的属性和方法。

3.单文件组件（.Vue文件）

• 一个文件中只包含1个组件
• 为了更好地理解单文件组件，我选择先创建一个脚手架（vue-cli）项目

创建一个脚手架（vue-cli）项目

• 第一步，全局安装@vue/cli

  # 通过npm
  npm install -g @vue/cli
  # OR 通过yarn 这个自行搜索
  yarn global add @vue/cli
  

  如果安装下载缓慢，可以替换为npm淘宝镜像

  npm config set registy http://registy.npm.taobao.org
  

• 第二步，创建一个文件夹，并且听过cd进入到当前文件夹下，运行命令创建项目

  vue create xxx(项目名)
  

• 第三步，自定义选择如下配置
  

  等待项目创建
  

• 第四步，当项目创建后，cd到该项目包名下运行命令

  npm run serve
  

  
  

• 第五步，浏览器访问http://localhost:8080/出现如下页面 ，表示创建成功。

  

脚手架项目结构分析

• main.js 文件分析

  /*
    main.js 是整个Vue项目的入口文件
  */
  //引入Vue
  import Vue from 'vue'
  //引入App组件，App组件所有组件的父组件
  import App from './App.vue'
  //这条语句用于关闭Vue默认的生产提示
  Vue.config.productionTip = false
  
  //创建Vue实例对象--vm
  new Vue({
    //将App组件放入到容器中
    render: h => h(App),
  }).$mount('#app')
  

• index.html 文件分析

  DOCTYPE html>
  <html lang="">
  
      <head>
        <meta charset="utf-8">
        
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width,initial-scale=1.0">
        
        <link rel="icon" href="<%= BASE_URL %>favicon.ico">
        
        <title>
          <%= htmlWebpackPlugin.options.title %>
        title>
      head>
  
      <body>
        
        <noscript>
          <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
              Please enable it to continue.strong>
        noscript>
  
        
        <div id="app">div>
        
      body>
  html>
  

main.js中的render函数

关于不同版本的Vue:

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

(1).vue.js是完整版的Vue，包含:核心功能+模板解析器。

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

2.因为vue.runtime.xxx.js没有模板解析器，所以不能使用template配置项，需要使用render函数接收到的createElement函数去指定具体内容。

//render函数，里面接收一个创建元素的回调函数createElement
render(createElement){
    return createElement(页面元素或模板，也就是组件)
}

Vue项目中默认配置文件：vue.config.js

• vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。

module.exports = {
  pages: {
    index: {
      //配置入口文件
      entry: 'src/main.js',
    }
  },
  lintOnSave: false //关闭语法检查
}

4.ref属性

1. 被用来给元素或者子组件注册引用信息（作用于id类似）

2. 应用在html结构元素标签上的时候获取的是真实DOM元素，应用在组件标签上是组件的实例对象（VueComponent）

3. 使用方式：

   打标识:

   .....

   或

   获取: this.$refs.xxx

小案例：

可以看到，一个是真实DOM元素，一个是组件实例对象

5.Vue中props配置属性

• 功能：让组件接受外部传过来的数据

• 接收数据：

  • 传递数据：

  • 接收数据

    • 第一种方式（只接受）：

      props:['name','robot']
      

    • 第二种方式（限制类型）：

      props:{
      	name:String,
      	sex:String
      }
      

    • 第三种方式（限制类型、是否必须、默认值）

      props:{
      	name:{
      		type:String, //类型
      		required:true // 是否必要
      	},
      	sex:{
      		type:String,
      		defult:'女' //默认值
      	}
      }
      

  注意：

  props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告（报错）,若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

小案例：

App.vue传过来的值

Ikaros.vue中接收值

最终显示：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-nsJ9dssl-1688828922359)(assets/image-20230705202814974.png)]

6.Vue中混合配置属性mixin

• 功能:可以把多个组件共用的配置提取成一个混入对象使用方式:

  • 第一步定义混合,新建一个mixin.js文件:

    {
    data(){....},
    methods:{....}...
    }
    

  • 第二步使用混入：全局混入，局部混入

7.Vue之插件plugin

• 功能:用于增强Vue

• 本质:包含install方法的一个对象，install的第一个参数是Vue，第二个以后的参数是插件使用者传递的数据。

• 定义插件:

  对象.install = function (Vue,options){
  //1.添加全局过滤器
  Vue.filter(....)
  // 2.添加全局指令
  Vue.directive(....)
  //3.配置全局混入(合)
  Vue.mixin(....)
  //4.添加实例方法
  Vue.prototype.$myMethod = function () {...}
  Vue.prototype.$myProperty = XXXX
  

• 使用插件:

  • 导入： import plugin from ''./路径'

    使用： Vue.use(插件名)

8.Vue中的scope样式

• 问题：我们在各个组件写样式的时候，会出现样式class名或id名重复的问题，这样先引入的组建的样式会被后引入组件的相同样式名给覆盖掉
• 解决：在组件的标签中添加一个关键字scoped标记，表示作用域只在该组件内生效
• 注意：建议不要在App.vue中添加该标记