Vue 基础 - .txt原稿笔记

找了很多记笔记的软件,都不及txt好用,不过txt写太长了,不方便查找
直到发现博客,集结好多优点:跨系统,在线修改,标题,目录,无限长的行(不自动换行),还有代码高亮…,总而言之就一个字,方便!
唯一美中不足的地方就是有 超链接 ,不会过审

--前提--
    在描述中,Vue本身属性会加$作为前缀
        其中Vue本身属性中 没有命名规定的属性 会加.*做为后缀,例如:$data.*
        如果属性中有 命名规定的属性 那么根据当时语境来加后缀
            比如在$computed中的get和set 表达方式:  .*:函数: $computed.*() , .*:对象: $computed.*.get()或set()
            .*的 值默认值函数 是get
        还有值表达方式 key : value 很简单用冒号(:),例如: $computed:对象 , $computed.*:函数或对象 , $computed.*.(get:函数 或 set:函数)
            很明显$computed中 没有命名规定的属性 的值是函数或对象
            其中是对象的里面有 命名属性 get和set , 它们的值是函数
        在描述中需要注意的是,描述是描述,使用是使用,不互相影响,例如: $computed.*()//这里只是代表它是个函数
	在父子描述中,不会出现中间的,比如不会出现 父-我-子
		描述的语境中并非 第一人称 ,只是描述 父-子 的关系
	在描述中$data.*不止$data.*的意思,比如$computed.*也有一样的功能
		不过在描述中统一使用$data.*来概况意思,就是可以使用的Vue变量
	大部分可以全局定义,我不会描述出来,因为建议不要使用全局定义
--全局提示--
	idea中.html文件是没有Vue补全的,只有.vue才有补全,比如$data.*的补全
		算是个坑吧,网上查了半天,也没查到
	如果在学习中,发现和他人写的一模一样,还报错或非预期,请看一下版本是不是对的
		这边建议:<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
	不知道为什么优先级都是看谁先加载,并非作用域,组件和{{}}都是这样
		父子组件之间不存在直接的值传递,需要通过props接受,所以不用考虑上面的,其实上面的完全不用吊,只是我闲的无聊发现的
		任何数据都不会被自动传递到组件里，因为组件有自己独立的作用域,需要通过props接受
	组件的作用域都是独立的,父级模板里的所有内容都是在父级作用域中编译的,子模板里的所有内容都是在子作用域中编译的
	new Vue()是生成根组件
	在定义组件的选项时,data和el选项必须使用函数,不然会报错
		想要组件拥有共享区的话,可以在外部声明一个变量
		例如想要同时拥有独立区和共享区:
			let 共享区={ a:0 };//一定要是对象哦~,为什么?自己去看js基础
			--忽略Vue.component()等等--
			A组件: data:function(){ return { 共享区:共享区 ,... } }//除了共享区,其他都是独立区
			B组件: data:function(){ return { 共享区:共享区 ,... } }//如果 共享区.a++ ,那么A和B的 共享区.a 都会++ ,毕竟是同一个地址
	非假值的都是真值,即除 false、0、""、null、undefined 和 NaN 以外皆为真值
	学的差不多了,强烈建议看风格指南,提升[代码质量,对vue的理解],降低bug出现率(vue的bug不是很好查)
		vue官方风格指南:https://cn.vuejs.org/v2/style-guide/
	修饰符的顺序很重要,具体看你自己如何使用
		我认为修饰符本质是:被应用后产生相应的功能
	命名的话,官方的规矩有点多,咱也懒得看,就直接用 烤肉串 命名,有必要就加个前缀
		例如: v-abc , 按钮-发生 , div-中心框


--开端--
Vue函数介绍:		-----------------------------------------------------------
	Vue.extend()		创建组件
		(对象)
	Vue.component()		注册组件(全局)	
		(String name ,对象)
		name表示在使用组件时的标签名
		全局优先级 没 局部优先级大,也就是相同name优先选择局部组件
		全局的意思是可以在所有 [根组件,组件] 里使用
		全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生

Vue属性介绍:		-----------------------------------------------------------
var vm = new Vue({
    el:
        :String
    data:
        :对象
    filters: 过滤器
        :对象
        过滤器可以用在两个地方：双花括号插值和 v-bind 表达式
        由“管道”符号指示：
			<!-- 在双花括号中 -->
			{{ message | capitalize }}
			<!-- 在 `v-bind` 中 -->
			<div v-bind:id="rawId | formatId"></div>
		.*:函数
			(过滤值,...)
			{{被过滤的值 , 过滤器(a,b)}} 
			此时过滤器应该是 过滤器(过滤值,a,b){} 这样的定义
			过滤器 返回的值将代替 过滤值
			过滤器可以串联：
				{{ val | 过滤器A | 过滤器B }}
				过程: A(val) -> A返回值 -> B(A返回值) ->过滤后的值(B返回值)
			
    methods: 方法
   		:对象
		每一次渲染都会运行一次方法,对于中大型页面,十分消耗资源
			这里的方法指的是{{.*()}} ,非必要,建议使用 computed(计算属性)
			至于触发式执行的方法,不会运行,必须满足触发条件,比如click点击

    computed: 计算属性
        :对象
        快速理解:
        	修改.*会触发.*.set(),本身的值根据get的返回值,并不会被真实修改
        	get返回的值会被缓存起来,只有get才能修改缓存值
        	但get内部的$data.*变化时,触发get() ,因为vue知道.*依赖于那些$data.*
        就像$data和$filters的组合
        .*可以像$data的值一样使用,不过会经过像$filters的过滤,过滤有get和set
        .* : 函数,对象
            函数 == .*.get
            对象命名属性: .get 和 .set
            具有响应特性,响应根据 get函数 里面的$data.*是否变化决定的
            {
                a: function(){return this.a;},//默认get , this.a == $data.a
                b:{ get: function(){ return this.a + "无艹!"; },//,当this.a变化就会运行get ,{{b}} == get返回的值
                    set: function( s ){ this.a = s; }//{{b}}被修改时会运行set
                }
            }
                例如: vm.b="什么玩意!"//set()导致 vm.a="什么玩意!" ,由于vm.a变化,get()导致 {{b}}="什么玩意!无艹!"
            要记住只有get才能改变{{b}}的显示,vm.b=啥啥的不会改变 ,至于内部是如何运行的我们暂时不需要知道这么多
    watch: 监听器
        :对象
        好像就是$data.*更新时运行.*:函数 (提前是 .* == $data.* )
        监听.*对应的$data.*变化
        命名规定: .* == $data.* 例如: .a == $data.a
        .*:函数
            函数(参数1,参数2)
            参数1: 修改后的值
            参数2: 修改前的值
    components: 局部组件
        :对象
        全局组件: Vue.component(tagName, options) //tagName 为组件名，options 为配置选项
        注意局部注册的组件在其子组件中不可用 ,局部只对当前组件管用
        	例如:	<子组件1> <子组件2></子组件2> </子组件1>
        	需要的话,要在 子组件1 声明 子组件2
        局部优先级并非是根据作用域,而是谁先加载 , 咱还是尽量不重名
        .*
        {
            组件名(标签名):组件 //组件:对象
            ABC		//import ABC from './ABC.vue'	//大部分是使用文件引用的
            	//其实ABC是 ABC:ABC 的缩写
        }

    template: 组件模板
    	内部就是写html的
    	template标签中的内容在页面中不会直接显示
    	在根组件中会直接显示,所以不要写在根组件中
    	组件中启用了template后,在html中组件包含的内容全部会被template取代,除非有插槽
    	记住!template中只能有一个根元素(根标签),第二个不会显示,这应该是vue的优化原因
    		每个组件必须只有一个根元素//官方说的
    		例如:<template> <div>我会显示</div> <div>我不会显示</div> </template>
    	应该有3种方法
    		1.直接写字符串应用,适合少量html
    		2.在外部写好<template id="xx">--模板html代码--</template>
    			然后tempplate:"#xx",就应用了那些模板html代码
    			甚至可以直接获取任何带id属性的标签,比如<div id="a"></div>
    				不过不建议这样,虽然可以使用vue的牛逼功能,但是你要知道div本身是会显示的,也就是说 会直接显示{{}}等等
    		3.在.vue文件里<template>--模板html代码--</template>
    			会默认为.vue组件的模板html代码
    			不知道是不是这样,我猜的
    props: 向子组件传递数据
    	:数组,对象
    	数组: ["属性名",...]  //获取对应属性名的值
    	对象: {属性名:指定的类型} //可以指定类型
    		props:{
    			a: Number,
    			b: [String, Number],	//多个可能的类型
    			c: { type: String , required: true },//必填的
    			d: { type: Number , default: 100 },//带有默认值
				e: { validator: function (value) {	//自定义验证函数
                           return value == "abc";	// ==treu 就验证成功
                    	}
                	}
    			}
    			当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告 ,不会不给值
    			注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的
    	prop <=翻译=> 道具
    	Prop是你可以在组件上注册的一些自定义属性,例如<组件 自定义属性=""></组件>
    	直接当$data.*使用 就好了
    	传递数据首先得 在组件标签中声明属性 <组件 :a="动态" b="静态"></组件>
			"动态"是父组件中的变量,"静态"是字符串
			父组件"动态"改变 会响应 a 属性,进行重新传递
				而子组件改变 a 并不会影响父组件,因为父组件只是传递值,可理解成:单向绑定
		若在组件上声明了属性,但没有在props声明,那么该属性会自动添加到根元素上,若根元素存在该属性,则会替换掉原有的属性
			唯有class 和 style会合并,其他都是替换
			例如: 组件中的模板: <根元素 abc="www" class="red"></根元素>
				<组件 aaa="123" abc="qqq" class="green" ></组件>	//题外说明:这里的123是字符串,这才是数字v-bind:aaa="123" ,因为这是js表达式
				//提前是 abc和aaa没有在props中声明
				展示效果是: <根元素 aaa="123" abc="qqq" class="red green" ></根元素>
			如果你不希望组件的根元素继承 属性，你可以在组件的选项中设置 inheritAttrs: false
				注意 inheritAttrs: false 选项不会影响 style 和 class 的绑定
			你还可以使用$attrs来访问所有 没有被props声明的属性,class 和 style 除外


});

特殊介绍		-----------------------------------------------------------

	动态参数
		使用 [] 套起来 ,  语法: [$data.*]
		$data.a = "url"
		$data.b = "abc"
		<p [a]="ww" :[b]="a" ></p>	//a,b是变量 ":"是v-bind的简写
			//vue解析后 == <p url="ww" abc="url" ></p>
	class与style绑定
		在将v-bind用于class和style时,Vue.js做了专门的增强
			表达式结果的类型除了字符串之外,还可以是对象或数组
		 	当然如果使用v-bind的话,在用字符串也没太大意义了
		:class和class可以共存,class优先级大,:class不会影响class
		class对象语法:
			{ 类名:判断变量 }
			类名就是class名	例如:.red{color:red;}
			判断变量就是$data.* ,需要为真值才会应用class
		style对象语法:
			{ 样式名:值 }	//例如:{ color:颜色;}	$data.颜色="red"
		class数组语法:
			[类名]
			数组里可以包含对象
			可以用三元表达式
		style数组语法:
			[样式对象]
			样式对象就是上面的 style对象语法 的对象
	key管理可复用的元素
		Vue 会尽可能高效地渲染元素，通常会复用已有元素而不是从头开始渲染。这么做除了使 Vue 变得非常快之外
			这就是 就地复用 策略 , (发现的,不一定对)提前条件是 元素的属性相同
		当key改变时，Vue认为一个新的元素产生了，从而会新插入一个元素来替换掉原有的元素
		相同key并不会复制出2个以上的元素,因为渲染时并非复制,而是采用 就地复用 策略
		若希望完全替换,也就是删除原来的插入新的,可以使用不同的key
		这个还是看网站吧:
			https://cn.vuejs.org/v2/guide/conditional.html#%E7%94%A8-key-%E7%AE%A1%E7%90%86%E5%8F%AF%E5%A4%8D%E7%94%A8%E7%9A%84%E5%85%83%E7%B4%A0
			https://blog.csdn.net/zyj362633491/article/details/86654014?utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7EBlogCommendFromMachineLearnPai2%7Edefault-1.control
			https://blog.csdn.net/weixin_45393094/article/details/113872849?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162822419216780265470413%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=162822419216780265470413&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~times_rank-4-113872849.first_rank_v2_pc_rank_v29&utm_term=vue+key&spm=1018.2226.3001.4187
			https://blog.csdn.net/weixin_42657492/article/details/106142225?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162822767016780269822003%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=162822767016780269822003&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v29-1-106142225.first_rank_v2_pc_rank_v29&utm_term=vue%E4%B8%ADkey%E9%BB%98%E8%AE%A4&spm=1018.2226.3001.4187
		没有key属性会默认进行 就地服用 策略
		有key会对应相应的key来渲染	,也就是 渲染过key 和 准备渲染的key 相同将采取 就地复用 策略
			若不同则会完全替换
			这个在v-for中尤其体现
			例如:
				<div v-for="a in arr" :key="a"> {{a}}:<input /> <br/> </div> //$data.arr=[1,2,3]
					渲染出来是这样([]是输入框):
						1:[ A ]		//输入的ABC
						2:[ B ]
						3:[ C ]
					//改变$data.arr=[0,3,4,2,1] , 当开始渲染时,发现有key相同
					渲染后
						0:[]		//新key,
						3:[ C ]		//虽说input没有key,但是Vue默认使用了 就地复用 策略
						4:[]
						2:[ B ]
						1:[ A ]
	$event 事件对象
		原生DOM事件的事件对象,这是Vue的,别拿html的属性开玩笑,例如:οnclick="console.log($event)"//别这样,会报错
		事件对象指的是:@click这样的,自定义的也算,不过默认是undefined
			<button @click="$event" @keyup.delete="$event" @aa="$event">按钮</button>
				这3个$event都不同
		有些$event会根据标签是否满足所需条件而生成
			例如:
				<div @input="console.log($event)" ></div>
					//很明显div不能输入文本,所以文本不存在变化,自然不会有$event,此时的@input等于自定义事件
				<div contenteditable="true" @input="console.log($event)" ></div>
					//现在div可以输入文本,那么$event就存在
			当然不存在,不代表不可以用,比如在组件上使用时,子组件可以通过$emit(事件名,参数),把参数传到$event
	插槽 <slot></slot>




	动态组件 :is
		首先is属性可以设置在常规HTML元素中,一旦设置 这些元素将被视为组件
		动态无非就是 :is ,这样



Vue指令介绍:		-----------------------------------------------------------

	v-bind: 响应式属性
		缩写: :

	v-on: 事件处理器
		缩写: @
		监听DOM事件 ,总而言之,就是当事件满足条件时触发
		有时也需要在内联语句处理器中访问原始的DOM事件,可以用特殊变量 $event 把它传入方法
		在v-on的值中,$methods方法可以不用写括号(),不写的好处 体现 在自定义事件中
			例如: @click="f()"	或	@click="f"	//自定义事件在后面的描述中有
		事件:
			语法: v-on:事件 =""
			-名称-		-触发条件-
			click		单击
			input		文本发生变化


		事件修饰符:
			语法:
				v-on:事件.* =""	//事件: 例如click是点击事件
				v-on:事件.*		//只有修饰符,这是官方的,安啦~
    		.stop
    		.prevent
    		.capture
    		.self
    		.once
    		.passive
    		使用修饰符时,顺序很重要;相应的代码会以同样的顺序产生
    			因此,用 v-on:click.prevent.self 会阻止所有的点击
    			而 v-on:click.self.prevent 只会阻止对元素自身的点击
		按键修饰符:
			语法: v-on:keyup.* =""
			我哭了,谁知道,不是因为难受,是因为Vue的按键事件太!方!便!了!啊!
			按键码 的事件用法已经被废弃了,并可能不会被最新的浏览器支持
            	使用按键码也是允许的
            		<input v-on:keyup.8="f()">	//8是退格键,但获得焦点,按下退格键,触发f()方法
            	这是按键码查询网站: https://www.bejson.com/othertools/keycodes/
            你还可以通过全局config.keyCodes对象自定义按键修饰符别名
            	例如:
            		Vue.config.keyCodes.退格 = 8;	//此时按键修饰符就多出来一个 .退格
            注意一点,当使用多个按键修饰符时,都会任意一个满足,是逻辑或的关系
            	例如: <input @keyup.up.down.left.right="f()"> //上下左右都会触发f()
            	其实并未改变修饰符的意思,修饰符本质还是 被应用后产生相应的功能
            		按键修饰符的功能就是,当按下这个键就触发对应的事件
            .enter	回车
            .tab
            .delete (捕获delete键和退格键)
            .esc
            .space	空格
            .up		上
            .down	下
            .left	左
            .right	右
            .*		*可以是abcd等等,我懒得一个一个试,如果不行就用按键码
        系统修饰键:
        	语法: v-on:事件.* =""
        	可以用如下修饰符来 实现仅在按下 相应按键时才 触发鼠标或键盘事件 的监听器
        		系统修饰键必须处于按下状态,才能触发,而且单个没有效果,必须组合,若想要有效果就得用 按键码
        		例如: @keyup.ctrl.delete 必须按下ctlr+delete才会触发,系统修饰键就像一个开关一样,单开没有用,还得有电才行
			.ctrl
			.alt
			.shift
			.meta	==win键
			.exact 	修饰符允许你控制由精确的系统修饰符组合触发的事件
				只有指定的 系统修饰键 按下时才会触发,多余的按下就不会触发
				例如:
					@click.ctrl.exact	只有ctrl系统修饰键按下+点击才会触发
						若是按下了ctrl和alt,在点击,就不满足.exact的条件,所以就不会触发
					@click.exact	在没有任何 系统修饰键 按下时点击,就满足事件,即触发
		鼠标按钮修饰符:
			语法: @关于点击的事件.* =""
			仅响应特定的鼠标按钮
			.left	左
			.right	右
			.middle	中
		自定义事件
			语法: v-on:事件名 =""
			主要用于被 子组件触发
				使用$emit()方法触发
				$emit()
					(事件名,事件函数参数1,...)
					触发当前实例(组件)上的事件。附加参数都会传给监听器回调
					后面的 事件函数参数n 会被应用的 函数里去
						例如:<abc @aa="f"></abc>		//记住函数不要带括号(),不然就变成单纯的使用了
							f(a,b,c) 对应的参数是 $emit('aa',a,b,c)
						不过$event事件对象 会默认等于第二个参数(a)




	v-model: 双向绑定
		一般用在表单上
		<input v-model="a">
			等价于:
            <input 	v-bind:value="a"
              		v-on:input=" a =$event.target.value">
			组件等价于:
			<组件 	v-bind:value="a"
              		v-on:input="a = $event"></组件>
           		//这里的v-on:input是自定义事件,如果你要写这么复杂,input可以改名,value也可以改名
           		//但用v-model这样写,input和value是默认存在的,不过value得在props中声明出来
           		在组件中使用就比较麻烦了 //官方的,主要是为了让大家方便理解
           			<input :value="value" @input="$emit('input',$event.target.value)"> //这是默认是,没改名的
           		当然我们可以挖掘方便的方法
           			写个监听器,岂不美哉?
						watch:{value:function(){this.$emit('input',this.value);}}
						然后直接双向绑定就好了:<input v-model="value">
		v-model会忽略所有表单元素的value、checked、selected 属性的初始值而总是将Vue实例的数据作为数据来源
			你应该通过js在组件的$data.*选项中声明初始值,而非html
		它会把表单的value属性的值更新到 变量上
		不要看 标签上的value 没有改变,其实内部已经改变了
		其中选项表单是 根据value比较变量, 多选得是数组,数组中存在就选上 , 单选是 变量==value
			简单描述:
				多选是数组,若非数组,会根据真假值判断,会导致一选全选的局面
				单选随意,它会直接等于对应的value,不管你是啥
		你还可以用动态的 :value ,你选中后$data.*(变量)都会等于 value,只不过改成了$data.* = :value
		修饰符:
			语法:v-model.* =""
			.lazy:
				在脱离焦点后更新或回车,而非立刻更新
			.trim:
				自动过滤用户输入的首尾空格
			.number:
				自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值）

	v-for: (-_-')for懂得都懂
		语法: 参数组 in 集合
		参数组:
			默认: 值(value)
			( 值(value) , 属性名(key) , 下标(数组不存在,被key替代) ) in 集合
		v-for 的优先级比 v-if 更高
	v-if: 条件渲染
		真值即渲染,反之假值不渲染
		v-else和v-else-if,你已经学到框架了,这些就不解释了
			v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别
			类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后
		提醒!与v-show不同,v-show是 显示/不显示,不代表跳过渲染
	v-show: 是否展示
		注意，v-show 不支持 <template> 元素，也不支持 v-else
		带有 v-show 的元素始终会被渲染并保留在 DOM 中
		v-if VS v-show
        	v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
        	v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
       		相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
        	一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好









--下标--