vue---1

最新推荐文章于 2024-04-07 16:32:50 发布

_shen_yu

最新推荐文章于 2024-04-07 16:32:50 发布

阅读量168

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/qq_46242907/article/details/117512632

版权

1—v-pre v-once
2----v-cloak
3—阻止冒泡和默认行为
4----自定义全局变量
5----自定义局部变量
6----watch监听变化的数据
7----computed


			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>

2----v-cloak

<style>
		/*[属性选择器]*/
			[v-cloak]{
				display: none;
			}
		</style>
	</head>
	<body>
		<!-- 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>

3—阻止冒泡和默认行为

<!-- 
			冒泡：父级和子级有同样的事件的时候，触发子级的时候，会把父级同样的事件也触发
			阻止冒泡：v-on:事件类型.stop
			默认行为：a链接的跳转 form表单的提交
			阻止默认行为 v-on:事件类型.prevent
		 -->
		 <style>
			div{
				width: 200px;
				height: 200px;
				background:lime;
			}
			p{
				width: 100px;
				height: 100px;
				background:red;
			}
		</style>
		<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>

4----自定义全局变量

// 自定义全局指令Vue.directive('指令名字',钩子函数bind inserted update unbind)
// 自定义了一个可以修改标签颜色的指令
Vue.directive('color',{
	// 钩子函数
	bind(el,obj){
		// 指令绑定到标签上
		console.log('bind');
		console.log(el,obj)
	},
	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')
	}
})

Vue.directive('focus',{
	inserted(el,obj){
		el.focus()
	}
})

5----自定义局部变量

<body>
		<div id="app">
			<!-- 封装一个指令 v-focus实现自动聚焦的功能 -->
			<input type="text"  v-focus>
			<p v-color:red v-bg:orange>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>

6----watch监听变化的数据

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

7----computed

<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()
					},
					t(){
						
					}
				},
				methods:{
					add(){
						this.num++
					}
				}
			})
		</script>