Vue基本指令

Vue基本指令

1.差值表达式

又叫声明式渲染/文本差值

语法:{{表达式}}

	<!-- 差值表达式 -->
		<div id="app">
			<h1>{{name}}</h1>
			<h1>{{jxxin.age}}</h1>
			<h1>{{jxxin.addr}}</h1>
		</div>
		<!-- ----------------------------------------------------------- -->
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					name:"xiaoming",
					jxxin:{
						age:"56",
						addr:"云南的好玩"
					}
				}
			});

vue指令 v-bind

vue指令实质:给特殊的html标签属性,特点v-开头

语法:v-bind:属性名

<div id="app2">
	<a v-bind:href="url">点击我跳转</a>
</div>
<script type="text/javascript">
    var vm=new Vue({
				el:"#app2",
				data:{
					url:'https://cn.vuejs.org/'
				}
		});
</script>

v-bind绑定class

<style>
	.dom {
       width: 100px;
       height: 100px;
       border: 1px solid black;
       border-radius: 5px;
       background-color: red;
	}
</style>

<div id="app3">
	<div v-bind:class="sty"></div>
</div>
<script type="text/javascript">
    var vm = new Vue({
				el: "#app3",
				data: {
				   sty:"dom"
				}
			});
</script>

vue指令 v-text和v-html

作用:给目标标签的更新innerText/innerHTML

语法:v-text='vue变量'

v-html='vue变量'

注意:它会覆盖差值表达式

<div id="app">
			<h1>{{name}}</h1>
			<h1>{{jxxin.age}}</h1>
			<h1 v-html='str'>{{jxxin.addr}}</h1>
			<h1 v-text='str'>我有值的</h1>
</div>
<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					name:"xiaoming",
					str:'我要替换你的值',
					jxxin:{
						age:"56",
						addr:"云南的好玩"
					}
				}
			});
</script>

vue指令 v-on

作用:给标签绑定事件

语法:

  • v-on:事件名="要执行的少量代码"
  • v-on:事件名="methods中的函数"
  • v-on:事件名="methods中的函数(实参)"
<div id="app">
			<h1>您已经累计充值:{{money}}人民币</h1>
			<button v-on:click="money=money+1">点我+1</button>
			<button v-on:click="add1">点我增加1个</button>
			<button v-on:click="addco(5)">点我+5</button>
			<button @click="del">点我扣除1</button>
			<button @click="delcot(10)">点我扣除10</button>
</div>
<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: {
					money: 100
				},
				methods: {
					add1: function() {
						this.money++;
					},
					addco: function(num) {
						this.money += num;
					},
					del: function() {
						this.money--;
					},
					delcot: function(num) {
						this.money -= num;
					}
				}
			});
</script>

效果:

image-20220518161611267

v-on指令修饰符

修饰符包括:事件修饰符、按键修饰符、系统修饰符和鼠标按钮修饰符

事件修饰符

  • .stop 阻止事件冒泡

    事件冒泡:比如box2在box1中,点击box2时,也同时点击了box1,这就是事件冒泡

    从最具体的元素到不具体的元素(由内到外)

    当子元素(事件源)事件触发,事件会沿着包含关系,依次往上级传递,每一级都可以感知到事件,直到触发根元素(根源)

    <div id="app2">
    	<div @click="tgclk">
    		<button @click.stop="zuzclk">点我阻止冒泡</button>
    	</div>
    </div>
    <script type="text/javascript">
    	var vm = new Vue({
    				el: '#app2',
    				methods: {
    					tgclk() {
    						console.log('我让你走')
    					},
    					zuzclk() {
    						console.log('阻止冒泡')
    					}
    				}
    			});
    </script>
    
  • .prevent 阻止默认事件

    调用event.preventDefault(),阻止默认事件,比如:form表单在提交时,会自动刷新页面

<div id="app3">
			<!-- 方法一 -->
			<form @submit.prevent="onSubmit">
				<input type="submit" value="查询">
			</form>
			<!-- 方法二 -->
			<form v-on:submit.prevent>
				<input type="submit" value="搜索">
			</form>
</div>
<script type="text/javascript">
     var vm = new Vue({
						el: '#app3',
						methods: {
							onSubmit() {
								console.log('submit')
							}
						}
			});
</script>
  • .capture 事件捕获模式

    <!-- =====================事件捕获模式========================== -->
    <div id="app4">
    			<div @click.capture="fatck">
    				<button @click="dayck">点击事件捕获并打印</button>
    			</div>
    </div>
    <script type="text/javascript">
        	//=================================
    			var vm = new Vue({
    						el: '#app4',
    						methods: {
    							//fatck(){}==fatcik:function(){}
    							fatck() {
    								console.log('fatck')
    							},
    							dayck(){
    								console.log('dayiw')
    							}
    						}
    			});
    </script>
    
  • .self:只当事件从侦听器的元素本身出发时才出发回调

  • .once:值触发一次回调

  • 【注意】

  1. 使用时注意顺序

    v-on:click.prevent.self    //会阻止所有的点击的默认事件
    v-on:click.self.prevent    //会阻止元素自身的默认事件
    

按键修饰键

监听键盘事件时,我们经常需要检查详细的按键。Vue允许为v-on在监听键盘事件时添加按键修饰符


<div id="app">
    <!-- 只有在key是Enter时,调用vm.submit -->
    <input @keyup.enter="submit">
</div>
<script type="text/javascript">
    var vm = new Vue({
    el: '#app',
    methods: {
        submit() {
            alert('提交成功')
        }
    }
})
</script>
  • @keyup.enter - 监测回车按键
  • @keyup.esc - 监测返回按键
<input type="text" @keydown.enter="enterFn">
<input type="text" @keydown.esc="escFn">

vue指令 v-model

  1. v-model:是实现vuejs变量和表单标签value属性, 双向绑定的指令

    <input>、<select>、<textarea>components中使用

    	<div id="app">
    			<h1>{{val}}</h1>
    			<h1>{{val}}</h1>
    			<input v-model="val" type="text" id="ipval">
    		</div>
    		<script type="text/javascript">
    			var vm = new Vue({
    				el: '#app',
    				data: {
    					val: '我们都是一样的值'
    				}
    			})
    		</script>
    

vue指令 v-if、v-else、v-else-if

v-ifv-show有同样的效果,不同在于v-if是重新渲染,而v-show使用display属性来控制显示隐藏。

频繁切换的话使用v-show减少渲染带来的开销。

v-if可以单独使用,而v-else-if,``v-else必须与v-if组合使用

v-ifv-else-if都是接受一个条件或布尔值,v-else不需要参数

<div id="app-2">
			<h1>我的成绩为:{{score}}</h1>
			我的评级为:
			<p v-if="score>=90">优秀</p>
			<p v-else-if="score>=80">良好</p>
			<p v-else-if="score>=60">及格</p>
			<p v-else="score<60">不及格</p>
</div>
<script type="text/javascript">
    var vm=new Vue({
				el:"#app-2",
				data:{
					score:80
				}
			})
</script>

vue指令 v-for

作用:列表渲染,主要用于显示列表和表格 以"itme in itmes"形式,注v-for需要每项提供一个唯一key

<table border="1">
				<!-- 表头 -->
				<thead>
					<tr>
						<th>编号</th>
						<th>商品名</th>
						<th>价格</th>
						<th>存库</th>
					</tr>
				</thead>
				<tr v-for="(item,index) in goodsList" :key="item.id">
					<td>{{index}}</td>
					<td>{{item.name}}</td>
					<td>{{item.price}}</td>
					<td>{{item.count}}</td>
				</tr>
</table>

<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					tite: '商品信息表',
					goodsList: [{
							id: 1,
							name: '麻辣条',
							price: 255.22,
							count: 100
						}, {
							id: 2,
							name: '康师傅泡面',
							price: 235,
							count: 1500
						}, {
							id: 3,
							name: '泡鸡脚',
							price: 22,
							count: 500
						},
						{
							id: 4,
							name: '娃哈哈',
							price: 2,
							count: 300
						},
						{
							id: 5,
							name: '娃哈哈果汁',
							price: 5,
							count: 200
						}
					]}
</script>

v-for以下方法监测到并更新页面

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

还有一下不会更新

  • slice()
  • filter()
  • concat()
  • map()

利用computed属性计算属性实现模糊查询

<div id="app">
			<h1>{{tite}}</h1>
			查询<input type="text" placeholder="请输入" v-model="mykey">
			<table border="1">
				<!-- 表头 -->
				<thead>
					<tr>
						<th>编号</th>
						<th>商品名</th>
						<th>价格</th>
						<th>存库</th>
					</tr>
				</thead>
				<tr v-for="(arr,index) in goodsList">
					<td>{{index}}</td>
					<td>{{arr.name}}</td>
					<td>{{arr.price}}</td>
					<td>{{arr.count}}</td>
				</tr>
			</table>
</div>
		<!-- ================================================================== -->
<script type="text/javascript">
			var vm = new Vue({
				el: "#app",
				data: {
					tite: '商品信息表',
					arr: [{
							id: 1,
							name: '麻辣条',
							price: 255.22,
							count: 100
						}, {
							id: 2,
							name: '康师傅泡面',
							price: 235,
							count: 1500
						}, {
							id: 3,
							name: '泡鸡脚',
							price: 22,
							count: 500
						},
						{
							id: 4,
							name: '娃哈哈',
							price: 2,
							count: 300
						},
						{
							id: 5,
							name: '娃哈哈果汁',
							price: 5,
							count: 200
						}
					],
					mykey:''
				},
				computed:{
					goodsList(){
						var _this=this;
						return _this.arr.filter(function(arr){
							return arr.name.indexOf(_this.mykey)!=-1;
						})
					}
				}
			})
</script>

监听属性

监听的属性发生变化时,会自动调用回调函数,

<div id="app">
			<h1>学生信息</h1>
			<p>
				姓名:<input type="text" v-model="name">
				<span>{{tsname}}</span>
			</p>
			<p>
				性别:<input type="text" v-model="gender">
				<span>{{tsgender}}</span>
			</p>
			<p>
				姓名:<input type="text" v-model="phone">
				<span>{{tsphone}}</span>
			</p>
		</div>
		<script type="text/javascript">
			var vm=new Vue({
				el:"#app",
				data:{
					name:'',
					gender:'',
					phone:'',
					tsname:'',
					tsgender:'',
					tsphone:''
				},
				watch:{
					name(newVal){
						if(newVal!=''){
							this.tsname="输入用户名正确";
						}else{
							this.tsname="姓名不能为空!";
						}
					},
					gender(newVal){
						if(newVal!=''){
							this.tsgender="输入性别正确";
						}else{
							this.tsgender="性别不能为空!";
						}
					},
					phone(newVal){
						if(newVal!=''){
							this.tsphone="输入电话正确";
						}else{
							this.tsphone="电话不能为空!";
						}
					}
				},
			})
</script>
posted @ 2022-05-20 17:58  And杰然  阅读(40)  评论(0编辑  收藏  举报