Vue结构搭建和指令使用

最新推荐文章于 2022-10-10 18:31:11 发布

qq_41989151

最新推荐文章于 2022-10-10 18:31:11 发布

阅读量121

点赞数

本文链接：https://blog.csdn.net/qq_41989151/article/details/117607015

版权

1.使用vue

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			{{msg}}
		</div>

		<!-- 第一步：引入框架 -->
		<script src="js/vue.js"></script>
		<script>
		// 实例化对象
			new Vue({
				// el代表绑定的标签 绑定该区域可以使用vue语法
				el:'#app',
				// data放置的是数据
				data:{
					msg:'hello vue'
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body id="wrap">
		<div class="app">
			<!-- {{变量}}插值表达式 会去实例化对象中的data里面寻找该变量 -->
			<p>{{msg}}</p>
			<p>{{list}}</p>
		</div>
		<div class="app1">
			{{msg}}
		</div>

		{{msg}}
		
		<script src="js/vue.js"></script>

		<script>
		 // 如果想要使用vue的语法，第一步需要实例化 new Vue对象 
			new Vue({
				// el绑定标签内部可以使用vue的语法。一般使用的是id名字(可以确保唯一性)。可以使用类名(.+类名)/标签名 如果有多个符合条件的值，优先绑定最上面的。不能绑定html/body
				el:'div',
				// data放置的是数据
				data:{
					// k:v k代表的是变量名 v变量的值
					msg:'hello vue',
					list:[1,2,3]
				}
			})

			// 一个页面可以实例化多个标签，但是不推荐
			new Vue({
				el:'.app1',
				data:{
					msg:'第二个'
				}
			})
		</script>
	</body>
</html>

2.v-text和v-html指令

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<p>{{msg}}</p> //<b>hello</b>
			<!-- 如果变量作为属性的值，不加{{}} -->
			<!-- v-html和v-text类似于之前的innerHTML和innerText  html可以识别标签 text识别不了标签
				html有xss风险(可以通过在标签内部书写病毒，攻击网站)
			 -->
			<p v-html="msg"></p>//hello
			<p v-text="msg"></p>//<b>hello</b>
		</div>

		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					msg:'<b>hello</b>'
				}
			})
		</script>

	</body>

</html>

3.v-on指令

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<!-- 事件结构：v-on:事件类型="方法名" click mouseenter  mouseleave focus blur -->

		<div id="app">
			<button v-on:click="change()">按钮</button>
			{{num}}
		</div>

		<script src="js/vue.js"></script>
		<script>
		 	new Vue({
		 		el:'#app',
		 		// methods专门书写函数的地方
		 		data:{
		 			num:0
		 		},
		 		methods:{
		 			// 简写方案
		 			// change(){
		 			// 	alert(1)
		 			// }
		 			// 方法名:function(){}
		 			change:function(){
		 				// this指向的是当前实例化的对象  获取data中的值：this.变量 修改data中的值 this.data='值'
		 				console.log(this)
		 				this.num++
		 			}
		 		}

		 	})
		</script>
	</body>
</html>

4.v-bind指令

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			p{
				width: 100px;
				height: 100px;
				background: lime;
			}
			.one{
				border-radius: 50%;
			}
			.two{
				background:yellow;
			}
			#one{
				background:red;
			}
		</style>
	</head>
	<body>
		<!-- v-bind:属性="变量" 动态控制属性
				多个变量直接书写成数组形式
				属性值有多个，有一些值确定，一些值不确定
		 -->
		<div id="app">
			<img v-bind:src="src" alt="" v-on:mouseenter="change()">
			<!-- 有一个类名对应的值为txt变量对应的值  id值txt变量对应的值 -->
			<!-- <p v-bind:class="txt" v-bind:id="txt" ></p> -->

			<!-- 两个类名分别任one和txt对应的值  one和txt都是变量-->
			<!-- <p v-bind:class="[one,txt]"></p> -->
			<!-- {k:v,k:v} k代表的是属性值v是true的时候属性值存在，否则不存则-->
			<p v-bind:class="{one:false,first:num==1}"></p> //class="first"
		</div>

		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					src:'https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=614367910,2483275034&fm=58',
					txt:'two',
					one:'first',
					num:1
				},
				methods:{
					change(){
						this.src='https://dss2.baidu.com/6ONYsjip0QIZ8tyhnq/it/u=3112268597,3701872933&fm=58'
					}
				}
			})
		</script>
	</body>
</html>

5.v-if和v-show指令

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			div>div{
				width: 100px;
				height: 100px;
				background:lime;
			}
		</style>
	</head>
	<body>
		<!-- v-if控制的是标签是否存在，如果值为真，标签存在，否则标签不存在 -->
		<!-- v-show控制的是标签显示与隐藏 如果值为真，标签显示，否则标签隐藏 -->
		<div id="app">
			<button v-on:click="change()">按钮</button>
			<!-- v-if使用频率很少 效率有点低-->
			<div v-if="show">if</div>
			<div v-show="show">show</div>
		</div>


		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					show:true
				},
				methods:{
					change(){
						this.show=!this.show;
					}

				}
			})
		</script>
	</body>
</html>

6.v-for指令

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<!-- v-for用来遍历，可以动态生成标签 v-for(item,index) in data中的数组
			item代表的是数组元素的值可以自己命名 index下标可以自己命名
		 -->
		<div id="app">
			<ul>
				<li v-for="(item,index) in list">{{item}}</li>
			</ul>
		</div>

		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					list:['java','大数据','人工智能','前端开发','新媒体']
				}
			})
		</script>
	</body>
</html>

7.选项卡

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			ul>li{
				float: left;
				width: 200px;
				text-align: center;
				line-height: 30px;
			}
			.current{
				background:#f60;
			}

			ul{
				overflow: hidden;
				margin-bottom: 20px;
			}
			section>div{
				width: 800px;
				line-height: 80px;
				text-align: center;
				border: 1px solid #000;
			}

		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<!-- vue重点就是操作数据 -->
				<!-- 可以让变量num和index关联起来 -->
				<li v-for="(i,index) in toplist" v-bind:class="{current:num==index}" v-on:click="change(index)">{{i}}</li>
			</ul>
			<section>
				<div v-for="(i,index) in con" v-show="num==index">{{i}}</div>
			</section>
		</div>

		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					num:0,
					toplist:['头条','娱乐','新闻','游戏','视频','音乐'],
					con:['头条内容','娱乐内容','新闻内容','游戏内容','视频内容','音乐内容']
				},
				methods:{
					change(a){
						this.num=a;
					}
				}
			})
		</script>
	</body>
</html>

8.v-model指令实现双向数据绑定

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<!-- 
				v-model="变量" 双向数据绑定
				给表单元素增加v-model属性
				表单元素的值变化，变量也会有变化
				变量有变化的时候，表单元素的值也会有变化
				可以通过该方式获取表单元素的值。
			 -->
			<input type="text" v-model="msg"><br><br>
			{{msg}}<br><br>
			<button v-on:click="change()">修改msg的值</button>
		</div>

		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					msg:''
				},
				methods:{
					change(){
						this.msg+=1;
					}
				}
			})
		</script>
	</body>
</html>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
				list-style: none;
			}
			textarea,button,ul{
				width: 800px;
				display: block;
				margin:10px auto;
			}
			textarea{
				resize:none;
			}
			button{
				border:none;
				outline: none;
				background:#f60;
				line-height: 40px;
				color:white;
				cursor: pointer;
			}
			ul li{
				padding:20px;
				background:orange;
				position: relative;
				line-height: 20px;
				margin-top: 20px;
			}
			span{
				position: absolute;
				right: -5px;
				top:-5px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<textarea name="" id="" v-model="msg" cols="30" rows="10" ></textarea>
			<button v-on:click="send()">发布评论</button>
			<ul>
				<li v-for="(item,index) in list">
					{{item}}
					<p>2021-06-01</p>
					<span v-on:click="del(index)">X</span>
				</li>
			</ul>
		</div>
		<!-- vue重点操控数据 -->
		<script src="js/vue.js"></script>
		<script>
			 new Vue({
			 	el:'#app',
			 	data:{
			 		msg:'',
			 		list:['昨天儿童节','今天下雨']
			 	},
			 	methods:{
			 		send(){
			 			if(this.msg==''){
			 				alert('请输入数据啦')
			 			}else{
			 				// 追加数据
				 			this.list.unshift(this.msg);
				 			// 数据清空
				 			this.msg=''
			 			}
			 		},
			 		del(a){
			 			// splice()删除数据
			 			this.list.splice(a,1)
			 		}
			 	}

			 })
		</script>
	</body>
</html>
<!-- 
	绑定点击
	获取值
	操控数据 使用v-for遍历数据
 -->

9.v-pre和v-once

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<!-- 
			v-pre:不渲染。直接以插值表达式的形式表示
			v-once:只渲染一次。后期数据有变化也不再渲染
		 -->
		<div id="app">
			<button v-on:click="change()">按钮</button>
			{{msg}}
			<p v-pre>pre:{{msg}}</p>
			<p v-once>once:{{msg}}</p>
		</div>

		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					msg:'hello'
				},
				methods:{
					change(){
						this.msg+=1;
					}
				}
			})
		</script>
	</body>
</html>

10.v-cloak

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
		/*[属性选择器]*/
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<!-- v-cloak保持在元素身上，直到编译结束 -->
		<!-- 当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题 -->
		<div id="app" v-cloak>
			{{Math.random()}}
			{{Math.random()}}
			{{Math.random()}}
			{{Math.random()}}
		</div>
		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el:'#app'
			})
		</script>
	</body>
</html>

11.阻止冒泡和默认行为

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style>
			div{
				width: 200px;
				height: 200px;
				background:lime;
			}
			p{
				width: 100px;
				height: 100px;
				background:red;
			}
		</style>
	</head>
	<body>
		<!-- 
			冒泡：父级和子级有同样的事件的时候，触发子级的时候，会把父级同样的事件也触发
			阻止冒泡：v-on:事件类型.stop
			默认行为：a链接的跳转 form表单的提交
			阻止默认行为 v-on:事件类型.prevent
		 -->
		<div id="app">
			<div v-on:click="div()">
				<p v-on:click.stop="p()"></p>
			</div>
			<a href="https://www.baidu.com/" target="_blank" v-on:click.prevent>百度</a>
		</div>

		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				methods:{
					p(){
						console.log('点击了p')

					},
					div(){
						console.log('点击了div')
					}
				}
			})
		</script>
	</body>
</html>

12.自定义全局指令

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<button @click="change()">按钮</button>
			<!-- v-指令名字:参数(参数当做常量处理) -->
			<p v-color:red v-if="show">文字{{msg}}</p>
			<p v-color:blue v-if="show">文字{{msg}}</p>
			<!-- v-指令名字="参数当做变量解析" -->
			<button v-color="m">按钮</button>
		</div>

		<div id="box">
			<p v-color:yellow>sdfsdf</p>
		</div>
		<script src="js/vue.js"></script>
		<script>
			// 自定义全局指令Vue.directive('指令名字',钩子函数bind inserted update unbind)
            // 自定义了一个可以修改标签颜色的指令
            Vue.directive('color',{
	        // 钩子函数
	        bind(el,obj){
		        // 指令绑定到标签上
		        console.log('bind');
	        },
	        inserted(el,obj){
		    // el当前标签 obj获取参数相关
		    // 标签插入到页面中,才可以进行操作
		    console.log('inserted');
		    console.log(obj);
		    // obj.arg可以获取用户输入的常量参数
		    // obj.value可以获取用户输入的变量参数
		    // el.style.color=obj.arg
		    if(obj.arg){
			    el.style.color=obj.arg
		    }else{
			    el.style.color=obj.value
		        }
	        },
	        update(){
		        // 数据更新的时候执行
		        console.log('update')
	        },
	        unbind(){
		        // 解除绑定的时候
		        console.log('unbind')
	            }
            })

			new Vue({
				el:'#app',
				data:{
					show:true,
					msg:1,
					m:'orange'
				},
				methods:{
					change(){
						this.msg++;
						// this.show=!this.show
					}
				}
			})

			new Vue({
				el:'#box',
				data:{
					
				}
			})
		</script>
	</body>
</html>

13.自定义局部指令

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<!-- 封装一个指令 v-focus实现自动聚焦的功能 -->
			<input type="text"  v-focus>
			<p v-color:red v-bg:orange>wenzi</p>
			<p v-color:red>wenzi</p>
		</div>
		<div id="box">
			<p v-color:red>jdlf</p>
		</div>

		<script src="js/vue.js"></script>
		<script src="js/library.js"></script>
		<script>
		setTimeout(()=>{
			txt.focus()
			// 获取标签.focus()表单自动聚焦
		},10)
		   new Vue({
		   		el:'#app',
		   		data:{
		   		},
		   		// 自定义局部指令 只适用于app标签内部
		   		directives:{
		   			color:{
		   				// 钩子函数 bind inserted update  unbind
		   				inserted(el,obj){
		   					console.log(obj)
		   					if(obj.arg){

		   						el.style.color=obj.arg
		   					}else{
		   						el.style.color=obj.value
		   					}
		   				}
		   			},
		   			bg:{
		   				// 钩子函数 bind inserted update  unbind
		   				inserted(el,obj){
		   					console.log(obj)
		   					if(obj.arg){

		   						el.style.background=obj.arg
		   					}else{
		   						el.style.background=obj.value
		   					}
		   				}
		   			}
		   			
		   		}
		   })
		</script>
	</body>
</html>

14.watch指令

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<button @click="add()">按钮</button>
			{{num}}
			总价{{sum}}
		</div>

		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					num:0,
					sum:0
				},
				// watch监听变化的数据
				watch:{
					// 数据名(){
						// 数据发生变化的时候，触发
					// }
					num(){
						console.log('num发生变化了');
						this.sum=this.num*100
					}
				},
				methods:{
					add(){
						this.num++
					}
				}
			})
		</script>
	</body>
</html>

15.computer

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<button @click="add()">按钮</button>
			<!-- 只要页面数据有更新，都会重新渲染 -->
			<p>{{num+msg+Math.random()}}</p>
			<p>{{num}}</p>
			<p>{{m}}</p>
		</div>

		<script src="js/vue.js"></script>
		<script>
			new Vue({
				el:'#app',
				data:{
					msg:0,
					num:0
				},
				// 计算属性，一般进行多个数据计算。效率比较高，数据存储在缓存里面。如果数据没变化，直接读取缓存数据
				computed:{
					// 使用的时候，可以直接使用m
					m(){
						return this.num+this.msg+Math.random()
					}
				},
				methods:{
					add(){
						this.num++
					}
				}
			})
		</script>
	</body>
</html>

16.指令简写

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
	</head>
	<body>
		<div id="app">
			<!-- 事件可以简写为@事件类型="方法" -->
			<button @click="change()">按钮</button>
			<!-- v-bind:属性  简写为:属性 -->
			<img :src="src" alt="" @mouseenter="enter()" @mouseleave="leave()">
		</div>

		<script src="js/vue.js"></script>
		<script>
			 new Vue({
			 	el:'#app',
			 	data:{
			 		src:'aa.jpg'
			 	},
			 	methods:{
			 		change(){
			 			alert(1)
			 		},
			 		enter(){
			 			this.src='bb.jpg'
			 		}
			 	}
			 })
		</script>
	</body>
</html>

qq_41989151

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue结构搭建和指令使用

1.使用vue<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> {{msg}} </div>  <script
复制链接

扫一扫