vue笔记_vue往div中填充数据的几种方式

VUE核心

• 插值语法：

  功能:用于解析标签体内容（如<div>标签体</div>）

  语法：{{xxx}}，xxx会作为js表达式解析

• 指令语法：

  功能:解析标签属性、解析标签体内容、绑定事件

  举例：v-bind:href=‘xxxx’，xxxx会作为js表达式被解析（v-bind绑定标签属性的内容，v-bind可简写为 : ）

  Vue中有有很多的指令，此处只是用v-bind举个例子

• vue对象绑定和data的两种写法：

  • 第一种：

    <div id="root"></div>
    <script type="text/javascript">
    	new Vue({
            el:'#root';  <!--进行绑定-->
            data:{} <!--对象式-->
        })
    </script>
    1
    2
    3
    4
    5
    6
    7

  • 第二种：

    <div id="root">
    </div>
    <script type="text/javascript">
    	const v=new Vue({
            data:function(){ <!--函数时，也可以简写为data(){return{}}-->
                return{}
            }
        })
        v.$mount('#root') <!--进行绑定-->
    </script>
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

数据绑定

• 单向数据绑定：

  使用v-bind进行数据绑定。

  特点：数据只能从data流向页面，在页面上进行的数据改变不会使data里的数据发生变化。

• 双向数据绑定：

  语法v-mode:value="xxx"或简写为v-model="xxx"；但v-model只能应用在表单类元素（输入类元素）上，因为v-model默认收集的就是value值。

  特点：数据不仅能从data流向页面，还能从页面流向data。

MVVM模型

• Model：（模型）对应data中的数据
• View：（视图）DOM模板
• ViewModel：（视图模型）Vue实例对象。用来连接 Model 和 View ，是 Model 和 View 之间的桥梁。每当V层获取或者保存数据的时候，都要由VM层做中间的处理，从而交给M层。

vm身上所有的属性及vue原型上所有属性，在Vue模板中都可以直接使用

数据代理

• Object.defineProperty方法

  <script type="text/javascript">
      let number=18
      let person={
          name:'张三',
          sex:'男'
      }
      
      Object.defineProperty(person,'age',{//向person对象中设置age属性
          //value:number,
          enumerable:true,//控制属性是否可以枚举
          writable:true,//控制属性是否可以被修改
          configurable:true,//控制属性是否可以被删除
          get(){//当读取person的age属性时，get函数就会被调用，且返回值就是age的值
              return number;
          }
          set(value){
          	number=value
      	}
      })
  </script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20

• 数据代理

  vm会对data里的数据进行数据代理。vm中也有data中的属性，但与data是不一样的，就是进行了数据代理（其中还添加了监视数据的功能），将data中的数据进行代理然后再通过get方法传给 vm 中的属性

计算属性-computed

要显示的数据不存在，要通过计算得来。为了简化在DOM中的操作，在 computed 对象中定义计算属性。

computed对象 比 methods 的好处是增加了缓存机制，且可直接使用类似属性名的方式使用

<div id="root">
    <input type="text" v-model="data1">
    <input type="text" v-model="data2">
    {{data3}}<!--调用属性-->
</div>
<script type="text/javascript">
	const v=new Vue({
        data:{
            data1:1
            data1:2
        },
       	computed:{
            data3:{//就是defineProperty的机制，data3还是个属性
            	get(){
                    return this.data1+this.data2
                },
                set(value){...}
        	}
        }
        //简写方式：直接写成data3(){}代替get()【在不使用set的情况下】
    })
    v.$mount('#root') <!--进行绑定-->
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

静态资源处理

如需引用本地的图片或者视频，需要加上require

{url:require("../static/video/video.mp4")}
1

事件处理

• 事件的基本使用：

  <div id="root">
      <button @click="showInfo($event,arg)">点击</button>
  </div>
  <script type="text/javascript">
  	const v=new Vue({
          data:{},
          
          methods:{//所有的方法都放在这
              showInfo(event,arg){
                  <!--事件处理-->
              }
          }
      })
      v.$mount('#root') <!--进行绑定-->
  </script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

  • ​ 使用v-on:xxx或@xxx绑定事件，其中 xxx 为事件名。

    例如 点击事件v-on:click="方法名"（方法用于处理事件）

  • showInfo($event,arg)：在方法名后的括号里可以进行传参，为了避免event丢失，最好手动添加一个$event。

• vue中的事件修饰符：(如@click.xxx)

  • .prevent:阻止默认事件（比如点击一个链接的默认事件为跳转页面）
  • .stop:阻止事件冒泡
  • .once:事件只触发一次（方法中执行的事件）
  • .self:只有event.target是当前操作的元素时才触发事件。（如发生事件冒泡时，event.target不会随着事件冒泡而发生改变。）
  • .passive:事件的默认行为立即执行，无需等待事件回调执行完毕(比如方法中的执行)。

• 键盘事件（@keydown.xxx,@keyup.xxx）：

  • Vue中常用的按键别名：
             回车 => enter
             删除 => delete (捕获“删除”和“退格”键)
             退出 => esc
             空格 => space
             换行 => tab (特殊，必须配合keydown去使用)
             上 => up
             下 => down
             左 => left
             右 => right
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10

  • 系统修饰键（用法特殊）：ctrl、alt、shift、meta
             (1).配合keyup使用：按下修饰键的同时，再按下其他键，随后释放其他键，事件才被触发。
             (2).配合keydown使用：正常触发事件。
    1
    2
    3

  • 按键修饰符：

    keycode : 操作的是某个 keycode 值的键

    keyName : 操作的某个按键名的键(少部分

• 状态改变事件（@change）

监视属性-watch

通过vm对象的$watch()或watch配置来监视指定的属性。当属性变化时,回调函数自动调用,在函数内部进行计算。

new Vue({
	....
	watch:{
		被监视的属性名:{
			handler(newValue,oldValue){/*处理事务*/}	
		}
	}
})
//另一种写法
vm.$watch('属性名',{handler(newValue,oldValue){/*处理事务*/}})
1
2
3
4
5
6
7
8
9
10

• 如果被监视属性为一个对象，则需使用'对象.属性'

• 如果对象中存在多个层级（默认不监视内部属性值的改变），则需要开启深度监视 deep:true

• 两个小原则：

  • 所有被vue管理的函数，最好写成普通函数，这样this的指向才是vm 或组件实例对象（Vue会自动把this替换）
  • 所有不被Vue所管理的函数（在Vue对象内部调用），最好写成箭头函数（内部没有this，会自动向外找this），这样this的指向才是vm

绑定样式

• class绑定：

  <style>
      .style1{...}
      .style2{...}
      ........
  </style>
  <div id="root">
      <div class="basic" :class="str" @click="action1"></div><!--@click为触发事件，也可以为其他的事件-->
      <div class="bassic" :class="arr" @click="action2"></div>
      <div class="bassic" :class="obj" @click="action2"></div>
  </div>
  <script type="text/javascript">
  const vm=new Vue({
      el:'#root',
      data:{ //将class值转换为Vue里的属性值，通过触发事件可以动态的改变样式
          str:'style1,style2...',//字符串法绑定
          arr:['style1','style2']//数组法绑定，用于样式类名不确定，且数量不确定的方式
          obj:{				   //对象绑定法
          	style1:false,
          	style2:true
      	}
      }
      //可以通过在methods中通过事件动态改变样式
  })
  </script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24

• style绑定：

  <div id="root">
      <!-- 绑定style样式--对象写法 -->
  	<div class="basic" :style="styleObj">{{name}}</div> <br/><br/>
  	<!-- 绑定style样式--数组写法 -->
  	<div class="basic" :style="styleArr">{{name}}</div>
  </div>
  
  <script type="text/javascript">
  	const vm = new Vue({
  			el:'#root',
  			data:{
  				name:'尚硅谷',
  				mood:'normal',
  				styleObj:{
  					fontSize: '40px',
  				},
  				styleArr:[
  					{
  						fontSize: '40px',
  						color:'blue',
  					},
  					{
  						backgroundColor:'gray'
  					}
  				]
  			}
  </script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27

条件渲染

• v-show:

  <h2 v-show="false">hello</h2><!--当v-show值为false时，该标签将会被隐藏起来，为true则会显现-->
  1

• v-if和 v-else-if

  v-if与v-show不同的是，v-if的值为false时直接将标签元素删除。

  v-if可以和v-else-if、v-else一起使用，但要求结构不能被打断。

  使用<template v-if>可以包裹元素，且不会影响页面结构。（在渲染时<template>会自动去掉）

• 如果需要频繁切换 v-show 较好

列表渲染

• v-for指令：

  用于展示列表数据

  <div id="root">
  			<h2>人员列表（遍历数组）</h2>
  			<ul>
  				<li v-for="(p,index) of persons" :key="index">
  					{{p.name}}-{{p.age}}
  				</li>
  			</ul>
  			<h2>汽车信息（遍历对象）</h2>
  			<ul>
  				<li v-for="(value,k) of car" :key="k">
  					{{k}}-{{value}}<!--key-value键值对-->
  				</li>
  			</ul>
  			<h2>测试遍历指定次数（用得少）</h2>
  			<ul>
  				<li v-for="(number,index) of 5" :key="index">
  					{{index}}-{{number}}
  				</li>
  			</ul>
  		</div>
  
  		<script type="text/javascript">
  			Vue.config.productionTip = false
  			new Vue({
  				el:'#root',
  				data:{
  					persons:[
  						{id:'001',name:'张三',age:18},
  						{id:'002',name:'李四',age:19},
  						{id:'003',name:'王五',age:20}
  					],
  					car:{
  						name:'奥迪A8',
  						price:'70万',
  						color:'黑色'
  					}
  				}
  			})
  		</script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37
  38
  39

• key的作用

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Zm2x3G0F-1684223486801)(D:\学习图片资料\Vue\虚拟dom中的key.png)]

  在列表中，虚拟dom的对比是根据key值来进行的（默认为下标索引）

  对比规则：
           (1).旧虚拟DOM中找到了与新虚拟DOM相同的key：
                    ①.若虚拟DOM中内容没变, 直接使用之前的真实DOM！
                    ②.若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM。
  
           (2).旧虚拟DOM中未找到与新虚拟DOM相同的key
                    创建新的真实DOM，随后渲染到到页面。
                    
  开发中如何选择key?:
  	1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
  	2.如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，仅用于渲染列表用于展示，使用index作为key是没有问题的。
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11

Vue监视数据

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

   2. 如何监测对象中的数据？
               通过setter实现监视，且要在new Vue时就传入要监测的数据属性（生成一个新的data(数据代理)，为属性添加get和set，其中含有监听机制）。
                  (1)对象中后追加的属性，Vue默认不做响应式处理
                  (2)如需给后添加的属性做响应式，请使用如下API：
                              Vue.set(target，propertyName/index，value) 或 
                              vm.$set(target，propertyName/index，value)
                   (target为包含要修改的属性的对象或数组，propertyName为要修改或添加的属性，value为值)

   3. 如何监测数组中的数据？
                  通过包裹数组更新元素的方法实现，本质就是做了两件事：
                     (1).调用原生对应的方法对数组进行更新。（pop、push、shift...）
                     (2).重新解析模板，进而更新页面。（增加监听机制，使能够响应给前端页面）

   4.在Vue修改数组中的某个元素一定要用如下方法：
            1.使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
            2.Vue.set() 或 vm.$set()
   
   特别注意：Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性！！！（即target不能是vm.data之类的）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

表单数据收集

收集表单数据：
      若：<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
      若：<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
      若：<input type="checkbox"/>
            1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
            (配置value值：<input type="checkbox" v-model="xxx" value="xxx">)
            2.配置input的value属性:
                  (1)v-model中的"xxx"的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
                  (2)v-model中的"xxx"的初始值是数组，那么收集的的就是value组成的数组
      备注：v-model的三个修饰符：
                  .lazy：失去焦点再收集数据
                  .number：输入字符串转为有效的数字（搭配<input type="number"/>使用，其功能为只能输入数字）
                  .trim：输入首尾空格过滤
1
2
3
4
5
6
7
8
9
10
11
12
13

过滤器

/**过滤器：
   定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理，较为复杂的操作还是使用computed和methods）。
   备注：
         1.过滤器也可以接收额外参数、多个过滤器也可以串联
         2.并没有改变原本的数据, 是产生新的对应的数据
**/
//1、注册过滤器：
//全局过滤器
Vue.filter('过滤器名',function(value){
			return value	
		})
//局部过滤器
new Vue{
    filters:{
        filterName(value){
            return value
        }
    }
}

//2、使用过滤器：{{ xxx | 过滤器名}}  或  v-bind:属性 = "xxx | 过滤器名 |过滤器名"(会默认将xxx的值传入到过滤器，如果还传递其他的参数不会将其覆盖)
//多个过滤器串联，形成一个过滤链。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

内置指令

• v-text

  • 作用：向其所在的节点中渲染文本内容（输出文本）
  • 与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。
  • 不过与插值语法的效果一样

• v-html

  • 作用：向指定节点中渲染包含html结构的内容（即v-html可以识别html结构）

    <div v-html="str"></div>
    <!--str:'<h3>你好啊！</h3>'
    输出为：'你好啊！'
    -->
    1
    2
    3
    4

  • 严重注意：v-html有安全性问题！！！！
             (1).在网站上动态渲染任意HTML是非常危险的，容易导致XSS攻击。(容易被别人通过标签中的js代码获取信息)
             (2).一定要在可信的内容上使用v-html，永不要用在用户提交的内容上！
    1
    2
    3

• v-cloak

  • 本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉v-cloak属性。

  • 使用css配合使用，解决网速慢时页面展示出未经Vue解析的模板。

    <style>
    	[v-cloak]{
    		display:none;
    	}
    </style>
    1
    2
    3
    4
    5

• v-once

  • v-once所在节点中的数据在初次动态渲染后，就视为静态内容了。

    <h2 v-once>
        初始化的n值是:{{n}}
    </h2>
    <!--如果设置个点击事件，且n的初始为1，则在第一次后就不会再显示后续n改变的值。就相当于将n中的值变为一个常数，但不是把n变为一个常数-->
    1
    2
    3
    4

  • 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

• v-pre

  • 作用：跳过其所在节点的编译过程。vue不会再解析该节点。
  • 可利用它跳过：没有使用指令语法、没有使用插值语法的节点、加快编译。

自定义指令

自定义指令：
      一、定义语法：
               (1).局部指令：
                        new Vue({                               new Vue({
                           directives:{指令名:配置对象}   或         directives:{指令名:回调函数}
                        })                                      })
               (2).全局指令：
                        Vue.directive(指令名,配置对象)    或      Vue.directive(指令名,回调函数)
               注意：在directives内的this不再是vm对象，而是windows

      二、配置对象中常用的3个回调函数：
      （vue的执行流程为：先与模板<div>中的指令进行绑定，然后在插入页面。当模板中数据或结构发送变化时会重新解析模板）
               (1)bind(element,binding)：指令与元素成功绑定时调用。
               (2)inserted(element,binding)：指令所在元素被插入页面时调用。
               (3)update(element,binding)：指令所在模板结构被重新解析时调用。
               (element为与指令绑定的dom元素，binding为html元素内 v-指令=""中的值)

      三、备注：
               1.指令定义时不加v-，但使用时要加v-；
               2.指令名如果是多个单词，要使用kebab-case命名方式，不要用camelCase命名。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

生命周期函数

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

• mounted()周期函数

  new Vue({
      //Vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
  	mounted(){
          ...
      }
  })
  1
  2
  3
  4
  5
  6

• beforeDestroy：

  清除定时器、解绑自定义事件、取消订阅消息等【收尾工作】

• 在beforeDestroy中执行销毁过程阶段，只解绑自定义事件，而对于原生的dom事件（如@click）是已经与dom进行绑定了，不会被解绑。
• 在beforeDestroy及以后就不会再进行对数据的监视和更新了。所以一般不会在beforeDestroy操作数据，因为即便操作数据，也不会再触发更新流程。

Vue组件化编程

非单文件组件

Vue中使用组件的三大步骤：
      一、定义组件(创建组件)
      二、注册组件
      三、使用组件(写组件标签)
1
2
3
4

• 定义组件

  		//例如创建school组件
  		//组件实例中不配置 el项
  		//template:模板，该组件所用到的html代码使用 `` 包裹起来。html元素中必须使用<div>括起来
  		//data只能使用函数式返回对象数据。因为这样的数据对象不再是单例的
  		const school = Vue.extend({
              
  			template:`			
  				<div class="demo">
  					<h2>学校名称：{{schoolName}}</h2>
  					<h2>学校地址：{{address}}</h2>
  					<button @click="showName">点我提示学校名</button>	
  				</div>
  			`,
  			data(){
  				return {
  					schoolName:'尚硅谷',
  					address:'北京昌平'
  				}
  			}
  		})
          
          //精简的写法去掉Vue.extend，直接定义成一个对象。在component中会自行判断调用Vue.extend。
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22

• 注册组件

  //1.局部注册：靠new Vue的时候传入components选项					
  new Vue({
     el:'#root',
     components:{
        school				//是school:school 的简写
     }
  })
  
  //2.全局注册：靠Vue.component('组件名',组件)
  Vue.component('school',school)
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

• 使用组件

  <div id="root">
  	<!-- 第三步：编写组件标签-->
  	<school></school>
  </div>
  1
  2
  3
  4

• 嵌套组件

  组件中也存在 component对象，将一个组件注册到另一个组件中，就实现了嵌套，然后在组件的 template中使用注册的组件对应的html标签元素就可以了。

• 关于VueComponent

           1.school组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。
  
           2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，
              即Vue帮我们执行的：new VueComponent(options)。
  
           3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！
  
           4.关于this指向：
                 (1)组件配置中：
                   data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【VueComponent实例象】。
                 (2)new Vue(options)配置中：
                   data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。
  
           5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。
              Vue的实例对象，以后简称vm。
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15

单文件组件

• 创建一个.vue文件（component组件）

  //School.vue
  <template><!--存放html--></template>
  <script>
      //组件交互相关的代码
  	export default{			//向外暴露接口，以便html引用
          name:'School',
          data(){}
      }
  </script>
  <style>/*组件的样式*/</style>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10

• 创建App.vue（汇总所有的组件）

  <template>
  	<div>
  		<School></School>
  	</div>
  </template>
  
  <script>
  	//引入组件
  	import School from './School.vue'
  	export default {
  		name:'App',
  		components:{
  			School
  		}
  	}
  </script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16

• 创建main.js（创建vue实例）

  import App from './App.vue'
  
  new Vue({
  	el:'#root',
  	template:`<App></App>`,
  	components:{App},
  })
  1
  2
  3
  4
  5
  6
  7

• 然后在html中引用。但是浏览器不支持import，所以上述要在脚手架中支持运行。

Vue脚手架

脚手架中引入的vue并不是完整版的vue。

关于不同版本的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函数去指定具体内容。
1
2
3
4
5
6
7
8

ref属性

• 被用来给元素或子组件注册引用信息（id的替代者）
• 应用在html标签上获取的是真实DOM元素，应用在组件标签上是组件实例对象（vc）
• 使用方式：
  • 打标识：<h1 ref="xxx"></h1>或<School ref="xxx"></School>
  • 获取：this.$refs.xxx

props配置项

1. 功能：让组件接收外部传过来的数据

2. 向组件传递数据：<Demo name="xxx"/>（组件标签，默认传入的值为字符串，可以用v-bind绑定成JS表达式，转换为数值型）

   传送的数据也可以是对象和方法，对于方法传递过去调用时还是在属于原来定义它的组件中执行。（数据在哪，对数据的操作就在哪，然后任由其他组件调用）

3. 声明接收数据：

   1. 第一种方式（只接收）：props:['name']

   2. 第二种方式（限制类型）：props:{name:String}

   3. 第三种方式（限制类型、限制必要性、指定默认值）：

      props:{
      	name:{
      	type:String, //类型
      	required:true, //必要性
      	default:'老王' //默认值
          //required与default一般不同时出现
      	}
      }
      1
      2
      3
      4
      5
      6
      7
      8

   备注：props是只读的，Vue底层会监测你对props的修改（只是监测地址的变化），如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份（属性名不能重名），然后去修改data中的数据。

   props的优先级比data的高，会先在vc上配置props传来的属性

mixin（混入）

1. 功能：可以把多个组件共用的配置提取成一个混入对象

2. 使用方式：

   • 第一步定义混合：重新创建一个mixin.js文件

     export const mixin1 = {
     	methods: {},
         data:{},
     	mounted() {}
     }
     export const mixin2 = {
     	....
     }
     1
     2
     3
     4
     5
     6
     7
     8

   • 第二步使用混入：

     全局混入：在main.js中导入

     import {mixin1,mixin2} from './mixin'
     Vue.mixin(mixin1)
     Vue.mixin(mixin2)
     1
     2
     3

     局部混入：在要使用的组件中导入

     import {mixin1,mixin2} from './mixin'
     mixins:[mixin1,mixin2]
     1
     2

3. 注意事项：

   • 如果mixin对象与组件同时有相同的元素或方法，则以组件的为准
   • 但是如果minxin对象与组件同时有mounted对象，两个mounted中的元素都会被加载。

scoped样式

• 作用：让样式在局部生效，防止冲突
• 写法：<style scoped>

路由

1. 理解： 一个路由（route）就是一组映射关系（key - value），多个路由需要路由器（router）进行管理。
2. 前端路由：key是路径，value是组件。

基本使用

1. 安装vue-router，命令：npm i vue-router（vue2里引入 npm install vue-router@3.2.0 -S）

2. 应用插件：Vue.use(VueRouter)（一般在main.js中应用）

3. 创建index.js配置路由项（一般在src下新建router文件夹，放入其中）

   import VueRouter from 'vue-router'
   
   import Login from "@/pages/Login";
   
   export default new VueRouter({
       routes:[
           {
               path:'/',
               component:Login
           },
       ]
   })
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12

4. 在App.vue中展示

   <template>
       <router-view></router-view>//一个占位符，页面会在这进行展示
   </template>
   1
   2
   3

   • 如果存在导航栏，也可以在导航栏项中通过链接点击进行切换，内容展示在<router-view></router-view>中

     <router-link active-class="active" to="/about">About</router-link>//在解析时会转换成a标签
     1

几个注意点

1. 路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。
2. 通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载。
3. 每个组件都有自己的$route属性，里面存储着自己的路由信息。
4. 整个应用只有一个router，可以通过组件的$router属性获取到。

多级路由

1. 配置路由规则，使用children配置项：

   routes:[
   	{
   		path:'/about',
   		component:About,
   	},
   	{
   		path:'/home',
   		component:Home,
   		children:[ //通过children配置子级路由
   			{
   				path:'news', //此处一定不要写：/news
   				component:News
   			},
   			{
   				path:'message',//此处一定不要写：/message
   				component:Message
   			}
   		]
   	}
   ]
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20

2. 通过链接跳转（要写完整路径）

   //通过路径引用
   <router-link to="/home/news">News</router-link>
   1
   2

命名路由

• 作用：可以简化跳转，直接使用名称进行路由跳转

• 在路由对象中添加name属性

  //注意，在router-link中的使用方式
  <router-link :to="{name:xxxx}"></router-link>
  1
  2

默认跳转路由

例如点击链接，自动跳转到index页面

export default new VueRouter({
    routes:[
        {
          path: '/',	//在'/'页面默认跳转到'index'页面
          redirect:'index'
        },
        {
            path:'/',
            component:Home,
            children:[
                {
                    name:'index',
                    path:'index',
                    component:()=>import('@/pages/index')

                }
            ]
        }
    ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

query参数传递

1. 传递参数

   <!-- 跳转并携带query参数，to的字符串写法 -->
   <router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">跳转</router-link>
   				
   <!-- 跳转并携带query参数，to的对象写法 -->
   <router-link 
   	:to="{
   		path:'/home/message/detail',
   		query:{
   		   id:m.id,
              title:m.title
   		}
   	}"
   >跳转</router-link>
   <router-view></router-view><!-- 指定组件的呈现位置 -->
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14

2. Detail.vue中接收参数（在template中）：例如

   <template>
   	<ul>
           <li>消息编号:{{$route.query.id}}</li>
           <li>消息编号:{{$route.query.title}}</li>
       </ul>
   </template>
   1
   2
   3
   4
   5
   6

params参数传递

1. 配置路由，声明接收params参数

   {
   	path:'/home',
   	component:Home,
   	children:[
   		{
   			component:Message,
   			children:[
   				{
   					name:'xiangqing',
   					path:'detail/:id/:title', //使用占位符声明接收params参数
   					component:Detail
   				}
   			]
   		}
   	]
   }
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16

2. 传递参数

   <!-- 跳转并携带params参数，to的字符串写法 -->
   <router-link :to="/home/message/detail/${m.id}/${m.title}">跳转</router-link>
   				
   <!-- 跳转并携带params参数，to的对象写法 -->
   <router-link 
   	:to="{
   		name:'xiangqing',
   		params:{
   		   id:666,
               title:'你好'
   		}
   	}"
   >跳转</router-link>
   <router-view></router-view><!-- 指定组件的呈现位置 -->
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14

   特别注意：路由携带params参数时，若使用to的对象写法，则不能使用path配置项，必须使用name配置！

接收参数如同上述

props参数传递

1. 在路由中配置props属性

   <script>
   export default new VueRouter({
       routes:[
           {
   			name:'Detail',
               path:'/:id/:title',//params占位,与第二种props写法搭配使用
               component:Detail,
               
   			//props的第一种写法，值为对象。
   			props:{id:1,title:'hello'}
               
               //props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传递给Detail组件，但是对于query参数无效
               props:true
               
               //props的第三种写法，值为函数
               props($route){
           		return{
           			id:$route.query.id,
           			title:$route.query.title
           		}
           	}
           }
       ]
   })
   </script>
   
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   21
   22
   23
   24
   25
   26

2. 传递参数

   <router-link 
   	:to="{
   		name:'detail',
   		query(或者params):{ //第三种props写法中的$route.query数据来与此
   		   id:666,
              title:'你好'
   		}
   	}"
   >跳转</router-link>
   <router-view></router-view><!-- 指定组件的呈现位置 -->
   1
   2
   3
   4
   5
   6
   7
   8
   9
   10

3. 在组件中配置props属性接收数据

   <template>
   <!--可以在这通过插值语法引用传来的参数-->
   </template>
   <script>
   	export default{
   		name:'Login',
   		props:['id','title']
   	}
   </script>
   1
   2
   3
   4
   5
   6
   7
   8
   9

编程式路由导航

• 不使用<router-link>标签，使用方法的形式。

  <template>
  	<div>
  		<ul>
  			<li v-for="m in messageList" :key="m.id">
  				<button @click="pushShow(m)">push查看</button>
  			</li>
  		</ul>
  		<hr>
  		<router-view></router-view><!-- 指定组件的呈现位置 -->
  	</div>
  </template>
  <script>
  	export default{
  		name:'Login',
  		props:['id','title'],
          data() {
  			return {
  				messageList:[
  					{id:'001',title:'消息001'},
  					{id:'002',title:'消息002'},
  					{id:'003',title:'消息003'}
  				]
  			}
  		},
          methods:{
              pushShow(m){
                  this.$router.push({
                      name:'xiangqing',//跳转的页面
  					query:{
  						id:m.id,
  						title:m.title
  					}
                  })
              }
          }
  	}
  </script>
  1
  2
  3
  4
  5
  6
  7
  8
  9
  10
  11
  12
  13
  14
  15
  16
  17
  18
  19
  20
  21
  22
  23
  24
  25
  26
  27
  28
  29
  30
  31
  32
  33
  34
  35
  36
  37

缓存路由组件

• 如果路由中的组件存在类似于输入框这些的元素，不想在切换路由时将其组件销毁，则需要使用缓存。

• 在该组件展示所在的<router-view>使用<keep-alive>包裹

  <keep-alive :include="['被展示组件的组件名']">//只有include中的组件才会在切换时不被销毁。
  	<router-view></router-view>
  </keep-alive>
  1
  2
  3

激活与失活生命周期

• **激活生命周期：**当点击并显示该组件页面时，才会触发一些事务（在组件不被销毁的情况下）

  activated(){
  	//被激活时触发的事务
  }
  1
  2
  3

• **失活生命周期：**当切换到其他组件页面时，结束一些事务

  deactivated(){
  	//结束事务
  }
  1
  2
  3

geList" :key=“m.id”>
<button @click=“pushShow(m)”>push查看

---

### 缓存路由组件

- 如果路由中的组件存在类似于输入框这些的元素，不想在切换路由时将其组件销毁，则需要使用缓存。

- 在该组件展示所在的`<router-view>`使用`<keep-alive>`包裹

```vue
<keep-alive :include="['被展示组件的组件名']">//只有include中的组件才会在切换时不被销毁。
	<router-view></router-view>
</keep-alive>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

激活与失活生命周期

• **激活生命周期：**当点击并显示该组件页面时，才会触发一些事务（在组件不被销毁的情况下）

  activated(){
  	//被激活时触发的事务
  }
  1
  2
  3

• **失活生命周期：**当切换到其他组件页面时，结束一些事务

  deactivated(){
  	//结束事务
  }
  1
  2
  3