欢迎光临
我的个人博客网站

Vue入门常用指令


一.Vue 介绍

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

二.使用方法

下载到本地引用:

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

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

在线引用:

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>   

npm安装:

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

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

三.vue入门指令

vue实例创建

<body> 		<!--  定义id为app作为 锚点 --> 		<p id="app"> 			<!-- vue 表达式{{}} 两个花括号 ,里面是数据名--> 			{{msg}} 		</p> 		<!-- 引入 vue.js --> 		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			// 创建 vue 实例 			new Vue({ 				// el 代表的是 页面中的 id值 				el: '#app', 				// data 是数据 ,与json数据一样 				data: { 					msg: "hello vue", 				} 			}) 			// 在页面就会显示 hello vue 		</script> </body> 

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

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

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

v-text指令

	<body> 		<div id="app"> 			<!-- 在使用 v-text标签时就不需要{{}} 效果等同于{{msg}} --> 			<p v-text="msg"></p> 			<p>{{msg}}</p> 		</div> 		<!-- 导入vue.js --> 		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			// 在写实例vue时 要注意 属性和 属性名之间的空格 			new Vue({ 				el: '#app', 				data: { 					msg: "v-text 测试" 				} 			}) 		</script> 	    <!-- 页面效果 打印了两个 v-text 测试--> 	</body> 

v-html指令

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

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

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

<body> 	<div id="app"> 		<!-- v-html 指令会将标签渲染解析 --> 		<p v-html="html"></p> 		<!-- 输出:<span>html标签在渲染的时候被源码输出</span> --> 		<p v-text="text"></p> 		<!-- msg 普通语法 --> 		<p>{{msg}}</p> 	</div> 	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 	<script type="text/javascript"> 		let app = new Vue({ 			el: "#app", 			data: { 				msg: "<span >普通双标签不会解析span标签</span>", 				html: "<span>v-html指令可以渲染解析标签</span>", 				text: "<span>v-text 不会解析 标签 跟双花括号一样</span>" 			} 		}) 	</script> </body> 

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

v-pre指令

  • 显示原始信息跳过编译过程
  • 跳过这个元素和它的子元素的编译过程。
  • 一些静态的内容不需要编译加这个指令可以加快渲染
<body> 	<div id="app"> 		<!--  			使用v-pre 指令 会跳过vue的编译过程  			所以p标签中的{{msg}} 不会被vue识别编译 			则页面会直接显示 {{msg}} 		 --> 		<p v-pre>{{msg}}</p> 	</div> 	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 	<script type="text/javascript"> 		new Vue({ 			el: "#app", 			data: { 				msg: "v-pre 指令会使该语法表达式不会被识别" 			} 		}) 	</script> </body> 

v-model指令

  • v-model是一个指令,限制在 <input>、<select>、<textarea>、components中使用

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

双向数据绑定
  • 当数据发生变化的时候,视图也就发生变化
  • 当视图发生变化的时候,数据也会跟着同步变化
<body> 	<div id="app"> 		<span>{{msg}}</span> 		<br> 		<!--  			在页面测试时 当修改 input 内容,vue实例中的msg值会跟着改变 			上面的span标签中的值 也会跟随 vue实例中数据改变,v-model 双向 			绑定的好处已经很明显了 		 --> 		<input type="text" name="" id="" v-model="msg" /> 	</div> 	<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 	<script type="text/javascript"> 		let app = new Vue({ 			el: "#app", 			data: { 				msg: "v-model指令测试" 			} 		}) 	</script> </body> 

v-once指令

<body> 		<div id="app"> 			<!--  				使用v-pre 指令 会跳过vue的编译过程  				所以p标签中的{{msg}} 不会被vue识别编译 				则页面会直接显示 {{msg}} 			 --> 			<p v-pre>{{msg}}</p> 		</div> 		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			new Vue({ 				el: "#app", 				data: { 					msg: "v-pre 指令会使该语法表达式不会被识别" 				} 			}) 		</script> 	</body> 

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指令

<body> 		<div id="app"> 			<p>{{num}}</p> 			<!-- 绑定点击事件 每点击一下,num值++一下 一般不推荐这样操作--> 			<button type="button" v-on:click="num++">普通点击</button> 			<button type="button" v-on:click="handlel($event)" name="event测试">点击</button> 			<button type="button" v-on:click="handlel2(123,222,$event)">带参点击</button> 		</div> 		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			new Vue({ 				el: "#app", 				data: { 					num: 0 				}, 				methods: { // methods 存放调用的方法 					handlel: function(event) { 						console.log(event.target.innerHTML) 						console.log(event.target.name) 					}, 					handlel2: function(p, p1, event) { 						console.log(p, p1) 						console.log(event.target.innerHTML) 						// this的指向为当前vue实例 this.num++ 就是将num的值++ 						this.num++; 					} 				} 			}) 		</script> 	</body> 

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

按键修饰符

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

	<body> 		<div id="app"> 			<!-- 当键盘每点击一次时触发事件调用submit方法--> 			<input v-on:keyup="submit($event)" value="键盘点击" /> 			<!-- 指定特定的键盘键值 来调用 只有当点击小写a时才会触发 --> 			<input v-on:keyup.65="submit($event)" type="button" value="65" /> 			<!-- 当鼠标键抬起时触发事件 调用 mouseup 方法 --> 			<input v-on:mouseup="mouseup($event)" type="button" value="鼠标点击" /> 			<!--  					以上 是键盘鼠标事件的演示 ,还可以拓展其他的类似的操作、 					常用的按键修饰符 					.enter =>    enter键 					.tab => tab键 					.delete (捕获“删除”和“退格”按键) =>  删除键 					.esc => 取消键 					.space =>  空格键 					.up =>  上 					.down =>  下 					.left =>  左 					.right =>  右 			-->  		</div>  		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			new Vue({ 				el: "#app", 				data: {  				}, 				methods: { 					submit: function(event) { 						console.log(event.target.value); 					}, 					mouseup: function(event) { 						console.log(event.target.value); 					} 				} 			}) 		</script> 	</body> 

自定义按键别名

  • 在Vue中可以通过config.keyCodes自定义按键修饰符别名
<body> 		<div id="app"> 			<button type="button" v-on:keydown.fn="prompt($event)" value="我是自定义按键">我是自定义按键</button> 		</div> 		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			// 将 a 的 键值自定义成fn ,然后在控件中直接使用fn  一般情况下不会这样使用 			Vue.config.keyCodes.fn = 65; 			new Vue({ 				el: "#app", 				methods: { 					prompt: function(event) { 						alert(event.target.value); 					} 				} 			}) 		</script> 	</body> 

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 属性
		<style type="text/css"> 			/* 定义几组样式 */ 			.p1Color { 				color: blue; 			}  			.p2Color { 				color: darkred; 			}  			.p1Text { 				font-size: 18px; 			}  			.p1Text { 				font-size: 10px; 			} 		</style> 	</head> 	<body> 		<div id="app"> 			<!-- 绑定 p1Color 并选择isColor isColor定义为true 也可以直接写true--> 			<p v-bind:class="{p1Color:isColor}"> 				学习 v-bind 指令 			</p> 			<button v-on:mouseup="changeColor">{{chgColor}}</button> 			<p></p> 			<p></p> 		</div> 		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			new Vue({ 				el: "#app", 				data: { 					isColor: true, 					isText: true, 					color: "yellow", 					size: "14px", 					chgColor: "关闭样式" 				}, 				methods: { 					changeColor: function() { 						// 点击事件 关闭开启 p标签的样式 						if (this.isColor === true) { 							this.isColor = false; 							this.chgColor = "开启样式" 						} else { 							this.isColor = true; 							this.chgColor = "关闭样式" 						} 					} 				} 			}) 		</script> 	</body> 
v-bind绑定class
		<style type="text/css"> 			/* 定义几组样式 */ 			.p1Color { 				color: blue; 			}  			.p2Color { 				color: darkred; 			}  			.p1Text { 				font-size: 18px; 			}  			.p1Text { 				font-size: 10px; 			} 		</style> 	</head> 	<body> 		<div id="app"> 			<!-- 将 样式 定义在vue实例中,然后 绑定到DOM上 --> 			  <!-- :class 等同于 v-on:calss --> 			<p :class="[colorA,textA]"> 				学习 v-bind 指令 			</p> 			<button v-on:mouseup="changeAColor">{{chgColor}}</button> 			 			<p v-bind:class="[colorB,textB]"> 				学习 v-bind 指令绑定 class 			</p> 			<button v-on:mouseup="changeBColor">{{chgColor}}</button> 			<p></p> 		</div> 		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			new Vue({ 				el: "#app", 				data: { 					colorA: "p1Color", 					colorB: 'p2Color', 					textA: 'p1Text', 					textB: 'p2Text', 					chgColor: "切换样式" 				}, 				/*定义 两个 方法切换样式 */ 				methods: { 					changeAColor: function() { 						if ("p1Color" === this.colorA) { 							this.colorA = 'p2Color'; 						} else { 							this.colorA = 'p1Color'; 						} 					}, 					changeBColor: function() { 						if ("p2Color" === this.colorB) { 							this.colorB = 'p1Color'; 						} else { 							this.colorB = 'p2Color'; 						} 					} 				} 			}) 		</script> 	</body> 
绑定对象和绑定数组 的区别
  • 绑定对象的时候 对象的属性 即要渲染的类名 对象的属性值对应的是 data 中的数据
  • 绑定数组的时候数组里面存的是data 中的数据
绑定style v-bind:style
<body> 		<div id="app"> 			<!-- :style 等同于 v-bind:style --> 			<p :style="{ color:colorB, fontSize:fontSize}"> 				v-bind:style 样式绑定 内联样式 			</p> 			<p v-bind:style="[styleB, styleA]"> 				v-bind:style 样式绑定 数组绑定 			</p> 		</div>  		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			new Vue({ 				el: "#app", 				data: { 					/* 在data里面定义几组 样式数据 */ 					styleObject: { 						color: "green", 						fontSize: "18px" 					}, 					 					colorB:"green", 					fontSize:"18px", 					 					styleA: { 						color: "red" 					}, 					styleB: { 						fontSize: "28px" 					} 				} 			}) 		</script> 	</body> 

分支循环

v-if指令

<body> 		<div id="app"> 			<!-- 使用v-if 指令来判断flag --> 			<p v-if="flag === true"> 				{{msg}} 			</p> 			<p v-if="flag === false"> 				{{msg2}} 			</p> 			<button type="button" @click="changeClick">点我</button> 		</div>  		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			new Vue({ 				el: "#app", 				data: { 					flag: true, // 设置标志 为true 用于页面判断 					msg: "我出来了", 					msg2: "我消失了" 				}, 				methods: { 					changeClick: function() { 						if (this.flag === true) { 							this.flag = false; 						} else { 							this.flag = true; 						} 					} 				} 			}) 		</script> 	</body> 

v-show指令

<body> 		<div id="app"> 			<p v-show="1===1">v-show判断为true时我显示了</p> 			<p v-show="1===2">v-show为flase时我隐藏</p> 			<!-- 使用 v-show 指令来判断flag --> 			<p v-show="flag === true"> 				{{msg}} 			</p> 			<p v-show="flag === false"> 				{{msg2}} 			</p> 			<button type="button" @click="changeClick">点我</button> 		</div>  		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			new Vue({ 				el: "#app", 				data: { 					flag: true, // 设置标志 为true 用于页面判断 					msg: "我出来了", 					msg2: "我消失了" 				}, 				methods: { 					changeClick: function() { 						if (this.flag === true) { 							this.flag = false; 						} else { 							this.flag = true; 						} 					} 				} 			}) 		</script> 	</body> 

v-show 和 v-if的区别

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

v-for循环指令

<body> 		<div id="app"> 			<!-- 循环遍历 data中 items 数据 --> 			<p v-for="item in items"> 				<span>id: {{item.id}} </span> 				<span>name: {{item.name}} </span> 				<span>age: {{item.age}} </span> 				<br> 			</p>  			<!-- 页面中将会循环遍历 			 id: 1 name: 李四 age: 20 			  			 id: 2 name: 王五 age: 19 			  			 id: 3 name: 张飞 age: 33 			 --> 		</div> 		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			new Vue({ 				el: "#app", 				// 准备 循环模拟数据 				data: { 					items: [{ 							id: 1, 							name: "李四", 							age: 20 						}, 						{ 							id: 2, 							name: "王五", 							age: 19 						}, 						{ 							id: 3, 							name: "张飞", 							age: 33 						}, 					] 				} 			}) 		</script> 	</body> 

注意点:

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

“=”和”“和”=”的区别

<body> 		<!-- 一个等号 是赋值的意思 主要用于js里面 --> 		<div id="app"> 			<!-- 使用双等时 --> 			<p v-if="num == '1' ">我是双等于 双等于 不严谨 普通的数字1可以等于字符串"1"</p> 			<!-- 使用三等时 由于strNum定义为字符型1 所以不等于数字型1--> 			<p v-if="strNum==='1'">我是双等于 双等于 不严谨 普通的数字1可以等于字符串"1"</p>  			<!-- 同样使用于其他类型数据 eg Boolean和string的ture相对比 --> 		</div> 		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<script type="text/javascript"> 			new Vue({ 				el: "#app", 				data: { 					// 定义一个普通的1 一个字符类型的1 					num: 1, 					strNum: '1' 				}, 			}) 		</script> 	</body> 

四.Vue选项卡案例

<body> 		<!-- 选项卡主体 --> 		<div id="app" class="tableCard"> 			<div id="" class="tableHead"> 				<ul> 					<!-- 取选项卡数据 遍历标题 --> 							<!-- defaultStyle 如果标志id等于遍历id则加上默认样式 --> 					<li v-for="title in tableLists" :class="title.id===flagId?'defaultStyle':''"> 						<!-- 绑定点击事件change 传入对应数据id --> 						<span v-on:click='change(title.id)'>{{title.title}}</span> 					</li> 				</ul> 			</div> 			<div id="" class="tableBody"> 				<!-- 取选项卡数据 遍历图片路径 --> 				<ul v-for="img in tableLists"> 					<!-- 数据id等于标志id 则让改图片显现 --> 					<li v-if="img.id === flagId"> 						<img :src="img.path" v-bind:style="showImg"> 					</li> 					<!--不等于的就隐藏 --> 					<li v-else> 						<img :src="img.path"> 					</li> 				</ul> 			</div> 		</div> 		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script> 		<!-- vue 实例--> 		<script type="text/javascript"> 			new Vue({ 				el: "#app", 				// 定义图片样式 				data: { 					flagId: 1, 					showImg: "display: block;", 					tableLists: [{ 						id: 1, 						title: "选项卡1", 						path: "img/3Dbg01.jpg" 					}, { 						id: 2, 						title: "选项卡2", 						path: "img/3Dbg02.jpg" 					}, { 						id: 3, 						title: "选项卡3", 						path: "img/3Dbg03.jpg" 					}, ] 				}, 				methods: { 					// 每点击一次修改flagId的值为传入的值 					change: function(titleId) { 						this.flagId = titleId; 					} 				} 			}) 		</script> 	</body> 

参考demo

giteehttps://gitee.com/li_shang_shan/vue-entry-instruction-demo

赞(0) 打赏
未经允许不得转载:张拓的天空 » Vue入门常用指令
分享到: 更多 (0)

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

专业的IT技术经验分享 更专业 更方便

联系我们本站主机

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏