Vue.js 常用指令与生命周期解析-优快云博客

本文链接：https://blog.youkuaiyun.com/Black_YeJing/article/details/112859940

Vue

Vue常用命令

V-text ，v-html --> data:{ } 添加数据

v-if , v-show

v-if 根据表达式的值来决定是否渲染元素

v-show 根据表达式的值来切换元素的display css属性

<body>
		<div id="app">
			<span v-if="flag">乐范</span>

			<span v-show="flag">乐班</span>

			<button @click="change">切换</button>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:'#app',
			data:{
				flag:false
			},
			methods:{
				change:function(){
					this.flag = !this.flag
				}
			}
		})
	</script>

v-bind 控制html标签属性

<body>
		<div id="app">
			<font size="5" v-bind:color="ys1">乐范智能健康办公</font>
			<font size="5" :color="ys2">乐班升降桌</font>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:'#app',
			data:{
				ys1:"red",
				ys2:"green"
			}
		});
	</script>

v-for

遍历数组

Demo01
<body>
		<div id="app">
			<ul>
				<li v-for="(item) in arr">{{item}}</li>
			</ul>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:'#app',
			data:{
				arr:[1,2,3,4,5]
			}
		})
	</script>

Demo02
<div id="app">
			<table border="1">
				<tr>
					<td>序号号</td>
					<td>编号</td>
					<td>名称</td>
					<td>价格</td>
				</tr>
				<tr v-for="(product,index) in products">
					<td>{{index+1}}</td>
					<td>{{product.id}}</td>
					<td>{{product.name}}</td>
					<td>{{product.price}}</td>
				</tr>
			</table>
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:'#app',
			data:{
				products:[
					{id:1,name:"乐范魔力贴",price:99},
					{id:2,name:"乐范按摩椅",price:99},
					{id:3,name:"乐范灵眸眼仪",price:199}
				]
			}
		})
	</script>

v-model 表单控件元素上创建双向数据绑定，它会根据控件类型自动选取正确的方法来更新元素

<body>
		<div id="app">
				用户名:<input type="text" name="username" v-model="user.username" > <br/>
				密码:<input type="text" name="password" v-model="user.password" >
				<input type="button" @click="fun" value="获取">
		</div>
	</body>
	<script>
		//view model
		new Vue({
			el:'#app',
			data:{
				user:{username:"" ,password:""}
			},
			methods:{
				fun:function(){
					this.user.username="tom"
					this.user.password="111111111"
					alert(this.user.username+" "+this.user.password)
				}
			}
		})
	</script>

V-on

click 点击事件 (keydown , mouseover , 事件修饰符，按键修饰符)

<div id="app">
        <button v-on:click="time+=1">增加1</button>
        <span>已经点击了{{time}}</span>
    </div>
<script>
    new Vue({
        el:'#app',
        data:{
            time:0
        }
    });
</script>

事件修饰符
    阻止单击事件冒泡
        <a v-on:click.stop = 'do this'></a>
    提交事件不再重载页面
        <form v-on:submit.prevent = 'onsubmit'></form>
    修饰符可以串联
        <a v-on:click.stop.prevent = 'doThat'></a>
    只有修饰符
        <form v-on:submit.prevent></from>
    添加时间侦听器时时候时间捕捉模式
        <div v-on:click.capture='doThis'></div>
    只当时间在该元素本身(而不是子元素)出发时出发回调
        <div v-on:click.self='do That'></div>
按键修饰符
    语法
        <input v-on:keyup.enter = 'submit'>
    缩写语法
        <input @keyup.enter = 'submit'>
            enter,tab,delete,esc,space,up,down,left,right

VueJs生命周期

beforeCreate
    创建Vue实例前
created
    创建Vue实例后
beforeMount
    挂载到dom前
mounted
    挂载到dom后
beforeUpdate
    数据变化更新前
updated
    数据变化更新后
beforeDestory
    vue实例销毁前
destoryed
    vue实例销毁后

VueJS ajax