思享工具箱

Vue入门常用指令

摘要：
I Vue简介Vue是一个用于构建用户界面的渐进式框架。与其他大型框架不同，Vue被设计为从下到上逐层应用。另一方面，当与现代工具链和各种支持类库相结合时，Vue还可以为复杂的单页应用程序提供驱动程序。编写实例Vue时，请注意属性和属性名称之间的空格指令。本质上，自定义属性vue中的指令都是以v˂！

一.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="http://t.zoukankan.com/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="http://t.zoukankan.com/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="http://t.zoukankan.com/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="http://t.zoukankan.com/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="http://t.zoukankan.com/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="http://t.zoukankan.com/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="http://t.zoukankan.com/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="http://t.zoukankan.com/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="http://t.zoukankan.com/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_LBUTTON011鼠标左键
VK_RBUTTON022鼠标右键
VK_CANCEL033Ctrl-Break键
VK_MBUTTON044鼠标中键
VK_BACK088Backspace键
VK_TAB099Tab键
VK_CLEAR0C12Clear键
VK_RETURN0D13Enter键
VK_SHIFT1016Shift键
VK_CONTROL1117Ctrl键
VK_MENU1218Alt键
VK_PAUSE1319Pause键
VK_CAPITAL1420Caps Lock键
VK_ESCAPE1B27Esc键
VK_SPACE2032Space键
VK_PRIOR2133Page Up键
VK_NEXT2234Page Down键
VK_END2335End键
VK_HOME2436Home键
VK_LEFT2537←键
VK_UP2638↑键
VK_RIGHT2739→键
VK_DOWN2840↓键
VK_SELECT2941Select键
VK_PRINT2A42Print键
VK_EXECUTE2B43Execute键
VK_SNAPSHOT2C44Print Screen键
VK_INSERT2D45Ins键
VK_DELETE2E46Del键
VK_HELP2F47Help键
VK_00x30480键
VK_10x 31491键
VK_20x 32502键
VK_30x 33513键
VK_40x 34524键
VK_50x 35535键
VK_60x 36546键
VK_70x 37557键
VK_80x 38568键
VK_90x 39579键
VK_A4165A键
VK_B4266B键
VK_C4367C键
VK_D4468D键
VK_E4569E键
VK_F4670F键
VK_G4771G键
VK_H4872H键
VK_I4973I键
VK_J4A74J键
VK_K4B75K键
VK_L4C76L键
VK_M4D77M键
VK_N4E78N键
VK_O4F79O键
VK_P5080P键
VK_Q5181Q键
VK_R5282R键
VK_S5383S键
VK_T5484T键
VK_U5585U键
VK_V5686V键
VK_W5787W键
VK_X5888X键
VK_Y5989Y键
VK_Z5A90Z键
VK_LWIN5B91左Windows键
VK_RWIN5C92右Windows键
VK_APPS5D93应用程序键
VK_SLEEP5F95休眠键
VK_NUMPAD06096小数字键盘0键
VK_NUMPAD16197小数字键盘1键
VK_NUMPAD26298小数字键盘2键
VK_NUMPAD36399小数字键盘3键
VK_NUMPAD464100小数字键盘4键
VK_NUMPAD565101小数字键盘5键
VK_NUMPAD666102小数字键盘6键
VK_NUMPAD767103小数字键盘7键
VK_NUMPAD868104小数字键盘8键
VK_NUMPAD969105小数字键盘9键
VK_MULTIPLY6A106乘号键
VK_ADD6B107加号键
VK_SEPARATOR6C108分割键
VK_SUBSTRACT6D109减号键
VK_DECIMAL6E110小数点键
VK_DIVIDE6F111除号键
VK_F170112F1键
VK_F271113F2键
VK_F372114F3键
VK_F473115F4键
VK_F574116F5键
VK_F675117F6键
VK_F776118F7键
VK_F877119F8键
VK_F978120F9键
VK_F1079121F10键
VK_F117A122F11键
VK_F127B123F12键
VK_F137C124F13键
VK_F147D125F14键
VK_F157E126F15键
VK_F167F127F16键
VK_F1780128F17键
VK_F1881129F18键
VK_F1982130F19键
VK_F2083131F20键
VK_F2184132F21键
VK_F2285133F22键
VK_F2386134F23键
VK_F2487135F24键
VK_NUMLOCK90144Num Lock键
VK_SCROLL9145Scroll Lock键
VK_LSHIFTA0160左Shift键
VK_RSHIFTA1161右Shift键
VK_LCONTROLA2162左Ctrl键
VK_RCONTROLA3163右Ctrl键
VK_LMENUA4164左Alt键
VK_RMENUA5165右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="http://t.zoukankan.com/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="http://t.zoukankan.com/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="http://t.zoukankan.com/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="http://t.zoukankan.com/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="http://t.zoukankan.com/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="http://t.zoukankan.com/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-if 和 v-for
  • 当 v-if 与 v-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="http://t.zoukankan.com/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   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="http://t.zoukankan.com/img.path" v-bind:style="showImg">
					</li>
					<!--不等于的就隐藏 -->
					<li v-else>
						<img :src="http://t.zoukankan.com/img.path">
					</li>
				</ul>
			</div>
		</div>
		<script src="http://t.zoukankan.com/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

gitee： https://gitee.com/li_shang_shan/vue-entry-instruction-demo

标签：#vue#https | 浏览：242 | 发布日期：

免责声明：文章转载自《Vue入门常用指令》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇document.all的详细解释(document.all基本上所有浏览器可用！)19、求s=a+aa+aaa+aaaa+aa...a的值，其中a是一个1~9的数字。例如2+22+222+2222+22222(此时共有5个数相加)。下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

Vue项目中左右布局支持拉伸宽度

<template> <el-row :gutter="10"> <el-col :span="5" v-show="type === '2' && sidebar.opened" > <data-tree :t...

vue中import和require的用法

其实用了这么久的vue，里面有很多东西都没有去细细整理分析，今天就整理一下 Import(模块、文件)引入方式 　　1.引入js文件 　　　　在用的那一页，引入文件 　　　　Import tools from ‘./tools.js’ 　　　　相应的js文件，必须暴露出来 　　2.引入组件 　　　　Import Hello from ‘./componen...

Vue中进行断点调试的两种方式(使用外部浏览器和VsCode Debug for Chrome 插件)

场景 在使用IDEA等进行后台开发时可以直接在想要进行断点调试的地方双击添加一个断点，然后逐步或者逐过程进行调试。 但是在Vue中如果想要进行调试时，如果是在js中调试的话，可以直接添加一个debugger，然后在浏览器中打开检查进行断点调试。 但是如果在vue界面的话则没法逐步查看变量的值。 比如： 在Vue页面中，点击搜索按钮时 <el-butt...

PostMan Setting Proxy 设置 代理

postman的代理使用篇(四) - codingstudy - SegmentFault 思否https://segmentfault.com/a/1190000012024844 postman 设置代理 - 凯宾斯基 - 博客园https://www.cnblogs.com/kaibindirver/p/8916278.html Postman 入门...

飞利浦医学成像系统披露多个安全漏洞，黑客可远程控制！

近日，飞利浦临床协作平台门户（又名 Vue PACS）中披露了多个安全漏洞，其中一些漏洞可能被攻击者利用来控制受影响的系统。 知名网络安全专家、东方联盟创始人郭盛华透露：“黑客成功利用这些漏洞可能允许未经授权的人或进程窃听、查看或修改数据、获得系统访问权限、执行代码、安装未经授权的软件或影响系统数据完整性，从而对机密性、完整性产生负面影响或系统的可用性。“...

微信 ios端config配置失败 android端正常

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 如果你页面启用了https，务必引入 https://res.wx.qq.com/open/js/jweixin-1.0.0.js ，否则将无法在iOS9.0以上系统中成功使用JSSDK...

最新文章

随机推荐

思享工具箱导航