Vue - 指令总结

最新推荐文章于 2023-05-25 18:55:00 发布
最新推荐文章于 2023-05-25 18:55:00 发布
阅读量364 收藏 2
点赞数
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33961117/article/details/83512484
版权

目录

一、文本类指令

1、v-text：元素的纯文本内容

2、v-html：更新文本的html内容（结构+内容）

3、v-once：一次性渲染文本（第一次赋予的值就是永久值，无法改动）

4、效果实现

二、防止页面加载闪烁的两种方式

1- js加载位置改变（head内加载js文件）

2-  v-cloak ：保持在元素上直到关联实例结束编译

三、v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。

1- 属性的绑定

2、class的绑定

3、style的绑定

4、其他绑定

四、v-on：监听原生DOM事件，触发自定义事件。

五、v-model：在表单控件或组件上创建双向绑定。

六、v-if、v-else-if、v-else and v-show（条件渲染）

1、实例1- 显隐切换

2、实例2-  条件判断实现渲染切换

3、实例3- v-show实现页面渲染切换

七、v-for：循环绑定，列表渲染

Vue-API查询

一、文本类指令

1、v-text：元素的纯文本内容

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

2、v-html：更新文本的html内容（结构+内容）

<div v-html="html"></div>

<script type="text/javascript">
	new Vue({
		data: {
                    //结果：加粗的html-text
			html: "<b>html-text</b>"
		}
	})
</script>

3、v-once：一次性渲染文本（第一次赋予的值就是永久值，无法改动）

<span v-once="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

4、效果实现

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>文本类指令</title>
	<style type="text/css">
		p {
			line-height: 21px;
			background-color: orange
		}
	</style>
</head>
<body>
	<div id="app">
		<!-- html全局属性语法: 全局属性名="属性值" -->
		<p v-bind:title="title" a="a" b="b">v-bind</p>

		<!-- v-model也是对文本操作的指令,操作的是表单元素的value文本 -->
		<input type="text" v-model="msg">
		<!-- 采用文本指令后,页面标签的内容由vue实例控制,原来用于表示标签的文本均会被替换 -->
		<p>{{ msg }}</p>
		<!-- eg:原文本会被msg替换 -->
		<p v-text='msg'>原文本</p>
		<!-- 可以解析带html标签的文本信息 -->
		<p v-html='msg'></p>
		<p v-html='html'></p>
		<!-- v-once控制的标签只能被赋值一次 -->
		<p v-once>{{ msg }}</p>
	</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
	// 指令: 出现在html标签中可以被vue解析处理的全局属性
	new Vue({
		el: "#app",
		data: {
			title: "",
			msg: "message",
			html: "<b>html-text</b>"
		}
	})
</script>
</html>

二、防止页面加载闪烁的两种方式

1- js加载位置改变（head内加载js文件）

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<!-- 加载js文件 -->
	<script src="js/vue-2.5.17.js"></script>
</head>
<body>

</body>
<!-- <script src="js/vue-2.5.17.js"></script> -->
<script type="text/javascript">
    //……
</script>
</html>

 

2-  v-cloak ：保持在元素上直到关联实例结束编译

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		[v-cloak] {
			display: none;
		}
	</style>
</head>
<body>

	<div id="app" v-cloak>
		{{ msg }}
	</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			msg: "message"
		}
	})
</script>
</html>

 

三、v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。

总结：

  • v-bind定义的变量名在data内未定义，则会报错
  • v-bind 缩写 ‘：’ ；例如：<img :src="imageSrc">
  • 可以进行内联字符串的拼接操作：<img :src="'/path/to/images/' + fileName">

 

1- 属性的绑定

  • 绑定属性，v-bind：全局属性名=‘变量名’ ；例如：<img v-bind:src="imageSrc">，变量名在data内赋值
  • 绑定属性，v-bind：全局属性名=" '  变量值 ' " ，变量值为原data内定义内容
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>v-bind</title>
	<style type="text/css">
		.abc {
			background-color: red
		}
	</style>
</head>
<body>
	<div id="app">
		<!-- 该指令 绑定 的是属性(html标签的全局属性) -->
		<!-- 绑定后的属性的属性值可以由变量控制 -->
		<p v-bind:abc="abc"></p>
		
		<!-- 绑定后 操作单一变量 -->
		<p v-bind:title="t1">p1p1p1p1p1p1p1</p>
		<!-- 绑定后 操作普通字符串 -->
		<p v-bind:title="'t2'">p2p2p2p2p2p2p2</p>

	</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data: {
			abc: "ABC",
			t1: "p1的title",
		},

	})
</script>
</html>

2、class的绑定

  • v-bind:class="classA" ，data内对classA赋值
  • v-bind:class="[classA,classB]” ，在data内进行赋值，多类名赋值；结果：class：classA classB
  • v-bind:class="{ red: isRed }"，==> {类名：true|false} ===> value的真假值用来标识该类名的显隐模式。
  • v-bind:class="[classA, { classB: isB }]"，==> class：classA classB ==>classB的值用来设置显隐

总结：

       [a, b] ==> a,b为变量,对其赋值的是class的具体值 ；a:active b:red => class="active red"

       {a: b} ==> a为class值, b为值为true|false的变量,控制a的显隐 ； b:true => class="a"   ； b:false => class=""

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>v-bind</title>
	<style type="text/css">
		.abc {
			background-color: red
		}
	</style>
</head>
<body>
	<div id="app">

		<!-- 多类名 单一变量操作 -->
		<p v-bind:class="t3">p3p3p3p3p3p3p3</p>
		<p v-bind:class="[t4, tt4]">p4p4p4p4p4p4</p>

		<!-- 绑定class的{}语法 {key: value} key就是实际的类名,value是该类名的显隐(true就是起作用,false就是不起作用) -->
		<p v-bind:class="{abc: false}">p5p5p5p5p5p5</p>
		<p v-bind:class="{abc: t5}" v-on:click="fn">p5p5p5p5p5p5</p>

		<!-- class的[] {} 结合使用 -->
		<!-- class的值为p6 pp6, t6 tt6是值为true|false的变量,控制p6 pp6是否起作用 -->
		<p v-bind:class="[{p6: t6}, {pp6: tt6}]">p6p6p6p6p6p6p6p6</p>


	</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data: {

			t3: "p3 pp3",
			t4: "p4",
			tt4: "pp4",
			t5: false,
			t6: true,
			tt6: true,

		},
                methods: {
		    fn () {
			this.t5 = !this.t5;
		    }
		}

	})
</script>
</html>

3、style的绑定

  • :style="div_style"  ===> data内设定 div_style 的值

  • :style="{ fontSize:100 + 'px' }"   ===>  style = ‘fontSize: 100px ’

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>v-bind</title>
	<style type="text/css">
	</style>
</head>
<body>
	<div id="app">
		<!-- style一般都是多条样式 -->
		<div :style="div_style"></div>
		<div :style="{width: '100px', height: '100px', backgroundColor: 'blue'}"></div>
	</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
	new Vue({
		el:"#app",
		data: {
			div_style: {
				width: "200px",
				height: "200px",
				backgroundColor: "cyan"
			}
		},
	})
</script>
</html>

4、其他绑定

  • <!-- 绑定一个有属性的对象 -->
    <div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
  • <!-- 通过 prop 修饰符绑定 DOM 属性 -->
    <div v-bind:text-content.prop="text"></div>
  • <!-- prop 绑定。“prop”必须在 my-component 中声明。-->
    <my-component :prop="someThing"></my-component>
  • <!-- 通过 $props 将父组件的 props 一起传给子组件 -->
    <child-component v-bind="$props"></child-component>
  • <!-- XLink -->
    <svg><a :xlink:special="foo"></a></svg>

 

四、v-on：监听原生DOM事件，触发自定义事件。

总结：

  • v-on:click="doThis" ，方法doThis在methods内定义，当click事件触发时，方法dothis被调用，可以取到事件参数ev
  • @click="doThis" ，同上，@是v-on：的缩写方式，可以取到事件参数ev
  • @click="fn(10)"，方法fn自定义传参，回调取实参值，事件参数ev丢失
  • @click="fn($event, 10, 20)"，传入自定义参数和事件参数$event，回调的方法fn可以取到对应的事件参数ev（例如点击参数等）
  • @click="fn(10, $event, 20)"，methods内的定义方法：fn (n1, ev, n2){}，二者形参位置一一对
  • @click.stop="doThis"，停止冒泡，在子级设置
  • @click.prevent="doThis" 或者 @submit.prevent，阻止默认行为
  • v-on:click.once="doThis"，设置有且仅回调一次方法
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>v-on指令</title>
	<style type="text/css">
		p {
			width: 100px;
			height: 100px;
			background-color: orange
		}
		div {
			width: 100px;
			height: 100px;
			background-color: orange
		}
		.d7{
			width: 50px;
			height: 50px;
			background-color: cyan
		}
	</style>
</head>
<body>
	<div id="app">
		<!-- v-on: 指令 -->
		<!-- 简写: @ -->
		<!-- 绑定的是事件,操作的是事件对应的方法名 -->
		<p @click="fn1"></p>
		<!-- 直接绑定方法名,不会携带自定义参数,但回调时能取到事件参数ev -->
		<p @click="fn2"></p>
		<!-- 带()的方法绑定,只传自定义参数,回调时只能取到自定义参数,事件参数ev丢失 -->
		<p @click="fn3(10)"></p>
		<!-- 带()的方法绑定,传入自定义参数同时,显式传入事件$event,回调时可以取到自定义参数及事件参数ev -->
		<p @click="fn4($event, 10, 20)"></p>
		<p @click="fn5(10, $event, 20)"></p>

		<!-- 有且仅回调一次 -->
		<p @click.once="fn6"></p>

		<!-- 子级设置阻止冒泡 -->
		<div @click="fn7">
			<div @click="fn7" class="d7"></div>
		</div>
		<br>
		<div @click="fn7"  >
			<div @click.stop="fn7"class="d7"></div>
		</div>
		
	</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
	new Vue({
		el: "#app",
		methods: {
			fn1: function () {
				console.log("click event");
			},
			fn2 (ev) {
				console.log(ev);
			},
			fn3 (num) {
				console.log(num);
			},
			fn4 (ev, n1, n2) {
				console.log(ev);
				console.log(n1);
				console.log(n2);
			},
			fn5 (n1, ev, n2) {
				console.log(ev);
			},
			fn6 (ev) {
				console.log(ev);
			},
			fn7 (ev) {
				console.log("fn7");
			},
		}
	})
</script>
</html>

五、v-model：在表单控件或组件上创建双向绑定。

总结：

  • v-model="value"，v-model绑定的是控件内的值，value（变量名）对应data内，value：‘实际值’
  • 数据的双向绑定：可修改的控件，能互相进行修改值对应
  • v-model绑定的值随着控件的不同而不同。
  • 可以通过true-value="选中" false-value="未选中"，自定义选中、不选中的反馈值
  • v-model在复选框中，选定的值以数组的形式保存
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>v-model</title>
</head>
<body>
	<div id="app">
		<form action="">
			
			<!-- 数据的双向绑定 -->
			<!-- v-model绑定的是value,所以省略 -->
			数据的双向绑定:<input type="text" v-model="val1" name="usr">
			<textarea v-model="val1"></textarea>
			<p v-text="val1"></p>

			<!-- 单一复选框 checkbox -->
			<!-- val2值为true|false的变量,控制单选框是否被选中 -->
			<!--  -->
			ck1 :<input type="checkbox" v-model="val2" name="ck1">

			<!-- val3值为自定义"选中"|"未选中",控制单选框是否被选中 -->
			<!-- 选中状态,提交给后台可以对应的value为on,为选中状态,不向后台提交value值 -->
			ck2 :<input type="checkbox" v-model='val3' true-value="选中" false-value="未选中" name="ck2" />

			<!-- 多复选框  checkbox-->
			<!-- 多个复选框的v-model绑定一个变量 -->
			<!-- 该变量为数组数据,存放的是复选框的value值(value值必须明确) -->
			<!-- 出现在数组中的value值对应的复选框默认为选中状态 -->
			
			<div>
				ck3 : 篮球<input type="checkbox" value="lq" v-model="val4" name="ck3">
				足球<input type="checkbox" value="zq" v-model="val4" name="ck3">
				乒乓球<input type="checkbox" value="ppq" v-model="val4" name="ck3">
			</div>
			
			<!-- 多单选框  radio-->
			<!-- 多个单选框的v-model绑定一个变量 -->
			<!-- 变量值为多个单选框中一个的value值,则该单选框为默认选中状态 -->
			
			<div>
				sex : 男:<input type="radio" value="男" v-model='val5' name="sex" />
				女:<input type="radio" value="女" v-model='val5' name="sex" />
			</div>

			<button type="submit">提交</button>
		</form>
	</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			val1: "",
			val2: false,
			val3: "选中",
			val4: ['lq', 'ppq'],
			val5: "女",
		}
	})
</script>
</html>

六、v-if、v-else-if、v-else and v-show（条件渲染）

总结：

  • v-if：根据表达式的值的真假条件渲染元素，且当条件变化时，该指令触发过渡效果
  • v-else-if：前一兄弟元素必须有 v-if 或者 v-else-if
  • v-else：不需要表达式，但前一兄弟元素必须有 v-if 或者 v-else-if
  • v-show：根据表达式真假值，切换元素display的css属性，当条件变化，该指令触发过渡效果

1、实例1- 显隐切换

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>条件渲染</title>
	<script src="js/vue-2.5.17.js"></script>
	<style type="text/css">
		.box {
			width: 200px;
			height: 200px;
		}
		.r {background-color: red}
		.o {background-color: orange}
	</style>
</head>
<body>
	<div id="app">
		<button @click="toggle">显隐切换</button>
		<!-- v-if -->
		<div class="box r" v-if="isShow"></div>
		<!-- v-show -->
		<div class="box o" v-show="isShow"></div>

		<!-- 1.条件渲染的值为true|false -->
		<!-- 2.true代表标签显示方式渲染 -->
		<!-- 3.false v-if不渲染到页面,v-show以display:none渲染到页面,但也不会显示 -->
	</div>
</body>

<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			isShow: false,
		},
		methods: {
			toggle () {
				this.isShow = !this.isShow;
			},
		}
	})
</script>
</html>

2、实例2-  条件判断实现渲染切换

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>条件渲染</title>
	<script src="js/vue-2.5.17.js"></script>
	<style type="text/css">
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.wrap, .main {
			width: 500px;
			height: 240px;
		}
		li {
			float: left;
			background-color: #666;
			margin-right: 20px;
		}
		ul:after {
			content: "";
			display: block;
			clear: both;
		}
		.red {background-color: red}
		.green {background-color: green}
		.blue {background-color: blue}
	</style>
</head>
<body>
	<div id="app">

		<!-- v-if v-else-if v-else -->
		<!-- 每个li绑定一个参数，并传入相同的方法 -->
		<ul>
			<li @mouseover="changeWrap(0)">red</li>
			<li @mouseover="changeWrap(1)">green</li>
			<li @mouseover="changeWrap(2)">blue</li>
		</ul>
		<!-- red页面逻辑结构 -->
		<div class="wrap red" v-if="tag == 0" key="0">...</div>
		<!-- green页面逻辑结构 -->
		<div class="wrap green" v-else-if="tag == 1" key="1">...</div>
		<!-- blue页面逻辑结构 -->
		<div class="wrap blue" v-else key="2">...</div>

		<!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 -->
		<!-- 有相同父元素的子元素必须有独特的 key。重复的 key 会造成渲染错误。 -->
		<!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 -->


	</div>
</body>

<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			tag: 0,
		},
		methods: {
			// 修改data内的属性
			changeWrap (num) {
				this.tag = num;
			},

		}
	})
</script>
</html>

3、实例3- v-show实现页面渲染切换

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>条件渲染</title>
	<script src="js/vue-2.5.17.js"></script>
	<style type="text/css">
		ul {
			margin: 0;
			padding: 0;
			list-style: none;
		}
		.wrap, .main {
			width: 500px;
			height: 240px;
		}
		li {
			float: left;
			background-color: #666;
			margin-right: 20px;
		}
		ul:after {
			content: "";
			display: block;
			clear: both;
		}
		.red {background-color: red}
		.green {background-color: green}
		.blue {background-color: blue}
	</style>
</head>
<body>
	<div id="app">
		<ul>
			<li @mouseover="changeMain(0)">red</li>
			<li @mouseover="changeMain(1)">green</li>
			<li @mouseover="changeMain(2)">blue</li>
		</ul>
		<!-- v-show调用方法，返回值false、true进行切换 -->
		<!-- red页面逻辑结构 -->
		<div class="main red" v-show="whoShow(0)">...</div>
		<!-- green页面逻辑结构 -->
		<div class="main green" v-show="whoShow(1)">...</div>
		<!-- blue页面逻辑结构 -->
		<div class="main blue" v-show="whoShow(2)">...</div>

	</div>
</body>

<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			flag: 0
		},
		methods: {
			changeMain (num) {
				// this.flag num
				this.flag = num;
			},
			whoShow (num) {
				// this.flag num
				return this.flag == num;
			}
		}
	})
</script>
</html>

七、v-for：循环绑定，列表渲染

总结：

  • v-for=‘（n，i） in list’，list位于data内的列表，n为值，i为索引
  • <ul>
	<li>{{ list[0] }}</li>
	<li>{{ list[1] }}</li>
	<li>{{ list[2] }}</li>
	<li>{{ list[3] }}</li>
	<li>{{ list[4] }}</li>
</ul>

<!-- 二者结果相同 -->
<ul>
	<li v-for="n in list">{{ n }}</li>
</ul>
  • 可遍历对象：数组[]，对象（字典）{}
  • v-for的使用需要绑定：key使用；
    key的作用：建立缓存，防止重复的key渲染错误；
    key必须绑定v-bind处理，需要data内的值
  • <ul>
	<li v-for="(n, i) in list" :key="i">value:{{ n }} - index: {{ i }}</li>
</ul>
  • 对象{}的遍历
  • <ul>
	<li>{{ dic['name'] }}</li>
	<li>{{ dic.age }}</li>
	<li>{{ dic.gender }}</li>
</ul>

<!-- v-for变量对象{}时,接收三个值时,第一个为元素值,第二个为元素键,第三个为元素索引 -->
<ul>
	<li v-for="(v, k, i) in dic" :key="k">value:{{ v }} - key:{{ k }} - index: {{ i }}</li>
</ul>

     

  • 遍历的嵌套
  • <!-- 遍历的嵌套 -->
<div v-for="(person, index) in persons" :key="index" style="height: 21px;">
	<div v-for="(v, k) in person" :key="k" style="float: left;">{{ k }} : {{ v }}&nbsp;&nbsp;&nbsp;</div>
</div>

     

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>列表渲染</title>
</head>
<body>
	<div id="app">
		<h1>{{ msg }}</h1>
		<!-- v-for="item in items" -->
		<!-- 遍历的对象: 数组[] 对象(字典){} -->
		<ul>
			<li>{{ list[0] }}</li>
			<li>{{ list[1] }}</li>
			<li>{{ list[2] }}</li>
			<li>{{ list[3] }}</li>
			<li>{{ list[4] }}</li>
		</ul>

		<!-- n为遍历的元素值 -->
		<ul>
			<li v-for="n in list">{{ n }}</li>
		</ul>

		<!-- 一般列表渲染需要建立缓存 -->
		<!-- 列表渲染是循环,需要赋值变量给key,使用key需要v-bind:处理 -->
		<!-- v-for变量数组[]时,接收两个值时,第一个为元素值,第二个为元素索引 -->
		<ul>
			<li v-for="(n, i) in list" :key="i">value:{{ n }} - index: {{ i }}</li>
		</ul>

		<ul>
			<li>{{ dic['name'] }}</li>
			<li>{{ dic.age }}</li>
			<li>{{ dic.gender }}</li>
		</ul>
		
		<!-- v-for变量对象{}时,接收三个值时,第一个为元素值,第二个为元素键,第三个为元素索引 -->
		<ul>
			<li v-for="(v, k, i) in dic" :key="k">value:{{ v }} - key:{{ k }} - index: {{ i }}</li>
		</ul>


		<!-- 遍历的嵌套 -->
		<div v-for="(person, index) in persons" :key="index" style="height: 21px;">
			<div v-for="(v, k) in person" :key="k" style="float: left;">{{ k }} : {{ v }}&nbsp;&nbsp;&nbsp;</div>
		</div>
	</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
	new Vue({
		el: "#app",
		data: {
			msg: "列表渲染",
			list: [1, 2, 3, 4, 5],
			dic: {
				name: 'name',
				age: 18,
				gender: 'gender'
			},
			persons: [
				{name: "name1", age: 8},
				{name: "name2", age: 78},
				{name: "name3", age: 77},
				{name: "name4", age: 38}
			]
		}
	})
</script>
</html>

 

 

 

LSYHhhhh
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue3 - style v-bind 动态样式（详细使用教程）
王佳斌
11-13 7687
Vue3 官方文档教程，vue3.js style v-bind 动态样式如何使用，Vue3动态样式你不会吗，Vue指令中的v-bind之动态更改样式，Vue3 样式绑定 | 菜鸟教程，Vue:动态绑定样式(v-bind)，vue系列教程-07vue动态绑定样式，Vue中Class和Style实现v-bind绑定的几种用法，Vue3 - style v-bind 动态样式（详细使用教程）。
vue3 使用css新属性v-bind (v-bind+pinia)实现颜色主题切换
最新发布
w1314_1314的博客
04-29 704
这样下面的组件能直接使用piniaProvider.vue 定义的css。这里我使用了pinia的持久化 如果你也想持久化 跳转以下。不喜欢单个页面写css样式 请看下一步。
vue 3 第二十六章：样式（scoped、深度选择器、全局选择器、css modules、自定义注入名称、css中v-bind）
to_the_Future的博客
05-25 3999
在 Vue 中，我们可以使用scoped特性来给组件的样式添加作用域。通过为组件的标签添加scoped特性，我们可以确保组件的样式仅应用于该组件的模板中，而不会影响其他组件或全局样式。
:class v-bind class没有效果 无效果
wsy12123_的博客
11-26 1674
v-bind class失效的原因之一 :class 无效果的原因之一
用Vue的三种方法实现加减乘除运算
m0_74911203的博客
04-02 4670
接下来我们在id为"app"的div下面或者body的下面创建一个script，定义一个Vue方法并且绑定id为"app"的div。然后用 methods方法 computed方法 watch(侦听器)方法 做出3种不同的加减乘除运算。然后在body里面创建一个div并设置id，我这里给id命名为"app"然后在body里面创建一个div并设置id，我这里给id命名为"app"在body里面创建一个div并设置id，我这里给id命名为"app"在id命名为"app"的div内使用input标签和。
vue常用指令代码实例总结
12-20
vue常用内置指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>12_指令_内置指令</title> <style> [v-cloak] { display: none } </...
vue总结.xmind
03-22
2、vue常见指令 3、Vue生命周期的介绍 4、组件间通信 5、路由的使用 vue-router 6、vue发送 ajax请求 7、计算属性,方法与侦听器 8、组件间绑定原生事件 9、vue常见插件 10、全局事件的绑定与解绑 11、vue...
vue-reading:Vue源码阅读
03-23
doc：阅读期间的总结笔记 组件部分 功能函数式组件 ☐文档编写 插槽 :check_mark:文档编写@done（9/26/2018，3:06:39 PM） ☐插槽作用域（更新流程） 属性定义 Struts :check_mark:基本文档完成@done（9/27/2018...
总结vue前端面试题
10-27
本人总结前端vue面试，包含vue的基础，以及vue的高级和组件话开发，和vue的2.0 版本，包含vue指令，插槽路由vuex等
vue3在css中使用js中变量（v-bind() in CSS）
qq_35703552的博客
06-08 4215
vue3 js 控制css变量
Vue3 JS 与 SCSS变量相互使用
youyacoder的博客
10-17 2784
el-menuel-menu本文提供解决上述问题的思路。
Vue 的样式绑定和 Sass 快速入门 （七）
d2235405415的博客
03-21 2855
操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因此，在将`v-bind`用于class 和style时，Vue 做了专门的增强。本章将对此做详细的说明并额外推荐在项目中使用`Sass`提升样式的编码效率
vue常见错误
热门推荐
sunny1660的博客
10-24 2万+
初学vue常见一些错误，常常一脸蒙逼...觉得应该记录一下。 ERROR in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-8b4df900","hasScoped":false,"transformToRequire":{"video":"src","source":"src","img":"src","image
svg在vue里面的使用
sxy1847589546的博客
02-09 2万+
最近写的项目,用的svg,哇晒,总是粘贴,简直是恶心代码一点不美观,然后今天网上查了一下,发现可以这么用,就是引用一次,在要用的地方就引入就可以了,不用每次都粘贴.感觉代码又可以干净一点了,66666image.png上面是一个很常规的svg引入到HTML文件中的样子,那么如果我一个HTML里面很多地方都有用这个svg,如果我用我就粘贴就真的很恶心,那我可以像下面这样子,给他用一个symbols标...
vue3响应式CSS（真香）
qq_43426246的博客
02-19 5496
vue3中真香的响应式CSS
XSS Cheat Sheet
ITgougou_的博客
12-02 6634
XSS Cheat Sheet 本文只发在Mannix基佬群和先知社区，非原创，实为整理所得，如果不喜欢，请点击左上角叉号关闭本页。 XSS 101 <h1>Hello,<script>alert(1)</script>!</h1> 1. With <script> tag <script>alert(1)</script> 2. With regular HTML tags 2.1 Event-based <TAG
vue 官网之内置指令
qq_36437172的博客
10-22 192
1.v-text:更新文本内容（textContent）。 <span v-text="msg"></span> <!-- 和下面的一样 --> <span>{{msg}}</span> v-text可以防止{{}}出现在页面上。 2.v-html：把html当成html渲染（innerHTML）。 <divv-html="html"></div> 3.v-show：根据表达式之真假值，切换...
Vue3样式绑定
q709971076的博客
09-01 711
今天和大家分享关于Vue中的样式和class的绑定， 首先声明，这篇文章出现的class不是类声明的关键字，而是标签内部的属性，用于实现样式 在原生html中，我们给一个元素添加样式的时候，大概有这么两种方式 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"&
vue-scroll和vue-seamless-scroll的区别
03-23
- 使用方式：通过在Vue组件中引入vue-scroll插件，并在需要滚动的元素上添加相应的指令来实现滚动效果。 2. vue-seamless-scroll： - 功能：vue-seamless-scroll是一个无缝滚动插件，可以实现文字、图片等内容的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值