Vue入门常用指令

一.Vue 介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。 另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二.使用方法

下载到本地引用：

开发版： https://cn.vuejs.org/js/vue.js

生产版：https://cn.vuejs.org/js/vue.min.js

在线引用：

npm安装:

// 最新稳定版
npm install vue
// 安装vue-cli脚手架构建工具
npm install --global vue-cli

官网：https://cn.vuejs.org/

三.vue入门指令

vue实例创建

				
			
			{{msg}}		
				
		

注意：vue 表达式语法是两个花括号{{msg}} 里面写实例中对应的数据名，数据名必须在对应的vue实例之下。

在写实例vue时 要注意 属性和 属性名之间的空格

• 指令

1. 本质就是自定义属性
2. Vue中指令都是以 v- 开头

v-text指令

v-html指令

• 用法和v-text 相似  但是他可以将HTML片段填充到标签中

• 可能有安全问题, 一般只在可信任内容上使用 v-html，永不用在用户提交的内容上

• 它与v-text区别在于v-text输出的是纯文本，浏览器不会对其再进行html解析，但v-html会将其当html标签解析后输出。

v-text 和  v-html相当于原生js中的  .text  和  .html  相同 是一样的性质

v-pre指令

• 显示原始信息跳过编译过程
• 跳过这个元素和它的子元素的编译过程。
• 一些静态的内容不需要编译加这个指令可以加快渲染

	
				{{msg}}
	
	
	

v-model指令

• v-model是一个指令，限制在 、中使用

• v-model是一个双向数据绑定指令

双向数据绑定

• 当数据发生变化的时候，视图也就发生变化
• 当视图发生变化的时候，数据也会跟着同步变化

v-once指令

		
						{{msg}}
		
		
		
	

mvvm概念

• MVC 是后端的分层开发概念； MVVM是前端视图层的概念，主要关注于 视图层分离，也就是说：MVVM把前端的视图层，分为了 三部分 Model, View , VM ViewModel
• m   model
  • 数据层   Vue  中 数据层 都放在 data 里面
• v   view     视图
  • Vue  中  view      即 我们的HTML页面
• vm   （view-model）     控制器     将数据和视图层建立联系
  • vm 即  Vue 的实例  就是 vm

v-on指令

		
			{{num}}
						普通点击
			点击
			带参点击
		
		
		
	

拓展：$event 经过对参数的对比，发现 该event传入的是当前标签的对象，我们可以使用该对象获取参数类如获取文本内容 event.target.innerHTML 或者event.target.name

按键修饰符

在做项目中有时会用到键盘事件，在监听键盘事件时，我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符

	
		
						
						
						
			    enter键
					.tab => tab键
					.delete (捕获“删除”和“退格”按键) =>  删除键
					.esc => 取消键
					.space =>  空格键
					.up =>  上
					.down =>  下
					.left =>  左
					.right =>  右
			-->		

		
		
	

自定义按键别名

• 在Vue中可以通过config.keyCodes自定义按键修饰符别名

		
			我是自定义按键
		
		
		
	

keyCode值一览表

虚拟键	十六进制值	十进制值	相应键盘或鼠标键
VK_LBUTTON	01	1	鼠标左键
VK_RBUTTON	02	2	鼠标右键
VK_CANCEL	03	3	Ctrl-Break键
VK_MBUTTON	04	4	鼠标中键
VK_BACK	08	8	Backspace键
VK_TAB	09	9	Tab键
VK_CLEAR	0C	12	Clear键
VK_RETURN	0D	13	Enter键
VK_SHIFT	10	16	Shift键
VK_CONTROL	11	17	Ctrl键
VK_MENU	12	18	Alt键
VK_PAUSE	13	19	Pause键
VK_CAPITAL	14	20	Caps Lock键
VK_ESCAPE	1B	27	Esc键
VK_SPACE	20	32	Space键
VK_PRIOR	21	33	Page Up键
VK_NEXT	22	34	Page Down键
VK_END	23	35	End键
VK_HOME	24	36	Home键
VK_LEFT	25	37	←键
VK_UP	26	38	↑键
VK_RIGHT	27	39	→键
VK_DOWN	28	40	↓键
VK_SELECT	29	41	Select键
VK_PRINT	2A	42	Print键
VK_EXECUTE	2B	43	Execute键
VK_SNAPSHOT	2C	44	Print Screen键
VK_INSERT	2D	45	Ins键
VK_DELETE	2E	46	Del键
VK_HELP	2F	47	Help键
VK_0	0x30	48	0键
VK_1	0x 31	49	1键
VK_2	0x 32	50	2键
VK_3	0x 33	51	3键
VK_4	0x 34	52	4键
VK_5	0x 35	53	5键
VK_6	0x 36	54	6键
VK_7	0x 37	55	7键
VK_8	0x 38	56	8键
VK_9	0x 39	57	9键
VK_A	41	65	A键
VK_B	42	66	B键
VK_C	43	67	C键
VK_D	44	68	D键
VK_E	45	69	E键
VK_F	46	70	F键
VK_G	47	71	G键
VK_H	48	72	H键
VK_I	49	73	I键
VK_J	4A	74	J键
VK_K	4B	75	K键
VK_L	4C	76	L键
VK_M	4D	77	M键
VK_N	4E	78	N键
VK_O	4F	79	O键
VK_P	50	80	P键
VK_Q	51	81	Q键
VK_R	52	82	R键
VK_S	53	83	S键
VK_T	54	84	T键
VK_U	55	85	U键
VK_V	56	86	V键
VK_W	57	87	W键
VK_X	58	88	X键
VK_Y	59	89	Y键
VK_Z	5A	90	Z键
VK_LWIN	5B	91	左Windows键
VK_RWIN	5C	92	右Windows键
VK_APPS	5D	93	应用程序键
VK_SLEEP	5F	95	休眠键
VK_NUMPAD0	60	96	小数字键盘0键
VK_NUMPAD1	61	97	小数字键盘1键
VK_NUMPAD2	62	98	小数字键盘2键
VK_NUMPAD3	63	99	小数字键盘3键
VK_NUMPAD4	64	100	小数字键盘4键
VK_NUMPAD5	65	101	小数字键盘5键
VK_NUMPAD6	66	102	小数字键盘6键
VK_NUMPAD7	67	103	小数字键盘7键
VK_NUMPAD8	68	104	小数字键盘8键
VK_NUMPAD9	69	105	小数字键盘9键
VK_MULTIPLY	6A	106	乘号键
VK_ADD	6B	107	加号键
VK_SEPARATOR	6C	108	分割键
VK_SUBSTRACT	6D	109	减号键
VK_DECIMAL	6E	110	小数点键
VK_DIVIDE	6F	111	除号键
VK_F1	70	112	F1键
VK_F2	71	113	F2键
VK_F3	72	114	F3键
VK_F4	73	115	F4键
VK_F5	74	116	F5键
VK_F6	75	117	F6键
VK_F7	76	118	F7键
VK_F8	77	119	F8键
VK_F9	78	120	F9键
VK_F10	79	121	F10键
VK_F11	7A	122	F11键
VK_F12	7B	123	F12键
VK_F13	7C	124	F13键
VK_F14	7D	125	F14键
VK_F15	7E	126	F15键
VK_F16	7F	127	F16键
VK_F17	80	128	F17键
VK_F18	81	129	F18键
VK_F19	82	130	F19键
VK_F20	83	131	F20键
VK_F21	84	132	F21键
VK_F22	85	133	F22键
VK_F23	86	134	F23键
VK_F24	87	135	F24键
VK_NUMLOCK	90	144	Num Lock键
VK_SCROLL	91	45	Scroll Lock键
VK_LSHIFT	A0	160	左Shift键
VK_RSHIFT	A1	161	右Shift键
VK_LCONTROL	A2	162	左Ctrl键
VK_RCONTROL	A3	163	右Ctrl键
VK_LMENU	A4	164	左Alt键
VK_RMENU	A5	165	右Alt键

v-bind指令

• v-bind 指令被用来响应地更新 HTML 属性

v-bind绑定class

绑定对象和绑定数组 的区别

• 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
• 绑定数组的时候数组里面存的是data 中的数据

绑定style       v-bind:style

		
						
				v-bind:style 样式绑定 内联样式			
			
				v-bind:style 样式绑定 数组绑定			
		

		
		
	

分支循环

v-if指令

		
						
				{{msg}}			
			
				{{msg2}}			
			点我
		

		
		
	

v-show指令

		
			v-show判断为true时我显示了
			v-show为flase时我隐藏
						
				{{msg}}			
			
				{{msg2}}			
			点我
		

		
		
	

v-show 和 v-if的区别

• v-show本质就是标签display设置为none，控制隐藏
  • v-show只编译一次，后面其实就是控制css，而v-if不停的销毁和创建，故v-show性能更好一点。
• v-if是动态的向DOM树内添加或者删除DOM元素
  • v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件

v-for循环指令

注意点:

• 不推荐同时使用 v-if 和 v-for
• 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级。

"="和""和"="的区别

				
						我是双等于 双等于 不严谨 普通的数字1可以等于字符串"1"
						我是双等于 双等于 不严谨 普通的数字1可以等于字符串"1"

					
		
		
	

四.Vue选项卡案例

				
			
				
					
												
												{{title.title}}