vue模板语法下

最新推荐文章于 2022-03-08 17:23:08 发布

玉姬

最新推荐文章于 2022-03-08 17:23:08 发布

阅读量170

点赞数

本文链接：https://blog.csdn.net/qq_45243895/article/details/101016430

版权

样式绑定

class绑定
使用方式：v-bind:class=“expression”
expression的类型：字符串、数组、对象
style绑定
v-bind:style=“expression”
expression的类型：字符串、数组、对象

事件处理器

事件监听可以使用v-on 指令
事件修饰符
Vue通过由点(.)表示的指令后缀来调用修饰符，
.stop：阻止事件冒泡的发生
.prevent：阻止默认事件的发生
.capture：触发捕获事件()先执行大盒子的事件，起执行小盒子的事件
.self：只有点击他本身时才去执行，点击他的子元素不去执行（只有自身触发才会执行回调，不执行冒泡过来的事件
）
.once：事件只能点击一次

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联  -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self="doThat">...</div>
<!-- click 事件只能点击一次 -->
<a v-on:click.once="doThis"></a>

什么是事件冒泡
在这里插入图片描述
样式绑定与事件处理器代码演示
class绑定、style绑定、事件修饰符（once\once的使用）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>样式绑定</title>
	</head>
	<!-- 定义样式 -->
	<style>
		.a{
			background-color: seagreen;
		}
		.b{
			background-color: peachpuff;
		}
		.c{
			font-size: 70px;
		}
		div{
			padding: 25px;
		}
	</style>
	<body>
		<!-- vue管理的邊界 -->
		<div id="app">
			<ul>
				<li>
					<h3>样式绑定与事件处理器</h3>
					<span :class="aclz">笑一笑十年少</span>
					<span :class="bclz">拼一拼是青春</span><br /><br />
					<!-- style绑定 -->
					<!-- <div v-bind:style="[baseStyles, overridingStyles]">多样式绑定</div> -->
				</li>
				<li>
					<h3>事件冒泡</h3>
					<div style="width: 300px;height: 300px;background: #FFDAB9;" @click="d">
						<div style="width: 200px;height: 200px;background: cornflowerblue;" @click="c">
							<div style="width: 100px;height: 100px;background: salmon;" @click.once="b">
								<div style="width: 50px;height: 50px;background: thistle;" @click.once="a">
									
								</div>
							</div>
						</div>
					</div>
				</li>
				<li>
					<h3>模拟QQ消息发送</h3>
					{{info}}<input v-model="msg"  v-on:keyup.enter="send"/>
					<button @click="send">发送多次</button>
					<button @click.once="send">只能发送一次</button>
				</li>
				
			</ul>
		</div>
	</body>
	<script>
		// 通過nve實例去渲染vue管理的邊界
		new Vue({
			el:'#app',
			data(){
				return {
					aclz:'a',
					bclz:['b','c'],
					msg:'',
					info:''
				};
				
			},
			
			methods:{
				a(){
					alert("触发事件A");
				},
				b(){
					alert("触发事件B");
				},
				c(){
					alert("触发事件C");
				},
				d(){
					alert("触发事件D");
				},
				send(){
					this.info=this.msg,
					this.msg=''
				}
				
			}
		})
		/* style绑定 */
		/* new Vue({
		  el: '#app',
		  data: {
		    baseStyles: {
		      color: 'green',
		      fontSize: '30px',
		      background:'red'
		    },
		    overridingStyles: {
		      'font-weight': 'bold'
		    }
		  }
		}) */
	</script>
</html>

结果
在这里插入图片描述
事件修饰符（Stop\prevent\capture\self的使用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>修饰符：self capture stop prevent的使用</title>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="demo">
    <!--stop的使用：阻止事件冒泡的发生-->
    <!--<div @click="divEven" style="border:1px #188eee solid;">-->
        <!--<a href="www.baidu.com" @click.stop="aEven">百度链接</a>-->
    <!--</div>-->
 
    <!--prevent的使用：阻止默认事件的发生-->
    <!-- <div @click="divEven" style="border:1px #188eee solid;">
        <a href="www.baidu.com" @click.stop.prevent="aEven">百度链接</a>
    </div> -->
 
    <!--self的使用：只有点击他本身时才去执行，点击他的子元素不去执行-->
    <!-- <div @click.self="divEven" style="border:1px #188eee solid;"> 
        <a href="www.baidu.com" @click.prevent="aEven">百度链接</a>
    </div> -->
 
    <!--capture的使用：触发捕获事件()先执行大盒子的事件，起执行小盒子的事件-->
    <div @click.capture="divEven" style="border:1px #188eee solid;">
        <a href="www.baidu.com" @click.prevent="aEven">百度链接</a>
    </div> 
</div>
<script>
    new Vue({
        el:"#demo",
        methods:{
            divEven(){
                alert("我是div的事件");
            },
            aEven(){
                alert("我是a链接事件");
            }
        }
    });
</script>
</body>
</html>

结果
stop的使用
在这里插入图片描述
prevent的使用

self的使用

capture的使用

vue表单

类似网上注册页

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>表单</title>
	</head>
	<body>
		<div id="app">
			<h1>标题</h1>
			<ul>
				<li>
					<p>vue表单</p>
					<label>姓名：</label><input v-model="uname" /><br />
					<label>密码：</label><input v-model="upwd" type="password" /><br />
					<!-- 将用户的输入值转为 Number 类型 -->
					<label>年龄：</label><input v-model.number="age" /><br />
					<label>性别：</label>
					<input type="radio" v-model="sex" name="sex" value="1" />男
					<input type="radio" v-model="sex" name="sex" value="0" />女<br />
					<label>爱好：</label>
					<div v-for="h in hobby">
						<input type="checkbox" v-model="hobbies" v-bind:value="h.id" />{{h.name}}
					</div>
					<label>类别：</label>
					<select v-model="type">
						<option value="-1">===请选择===</option>
						<option v-for="t in types" v-bind:value="t.id">{{t.name}}</option>
					</select><br />
					<label>备注：</label>
					<textarea v-bind:value="mark"></textarea><br />
					确认<input type="checkbox" v-model="flag" />
					<input type="submit" v-bind:disabled="show" v-on:click="doSubmit" />
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					uname: null,
					upwd: null,
					age: 10,
					sex: 1,
					hobby: [{
						id: 1,
						name: '篮球'
					}, {
						id: 2,
						name: '足球'
					}, {
						id: 3,
						name: '象棋'
					}],
					hobbies: [],
					types: [{
						id: 1,
						name: 'A'
					}, {
						id: 2,
						name: 'B'
					}, {
						id: 3,
						name: 'C'
					}],
					type: null,
					mark: '学生备注',
					flag: false
				}
			},
			computed: {
				show: function() {
					return !this.flag;
				}
			},
			methods: {
				doSubmit: function() {
					console.log('doSubmit')
					var obj = {
						uname: this.uname,
						upwd: this.upwd,
						age:this.age+10,
						sex: this.sex,
						hobbies:this.hobbies,
						type: this.type,
						mark: this.mark,
					}
					console.log(obj);
				}
			}

		})
	</script>
</html>

参考：vue模板语法上
结果
在这里插入图片描述

vue组件（全局和局部组件）

组件简介
组件(Component)是Vue最强大的功能之一
组件可以扩展HTML元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树
全局和局部组件
全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。局部组件: new Vue({el:’#d1’,components:{…}})
注册后，我们可以使用以下方式来调用组件：
代码演示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	
	<body>
		<!-- vue管理的邊界 -->
		<div id="app">
			<ul>
				<li>
					<h3>局部组件的注册</h3>
					<my-button></my-button>
				</li>
				<li>
					<h3>父子组件的传参（父传子）</h3>
					<my-button m="笑笑"></my-button>
					<my-button m="一笑"></my-button>
				</li>
				<li>
					<h3>父子组件的传参（子传父）</h3>
					<my-button v-on:three-click="getData"></my-button>
					接受自定义组队中内部的变量值:{{inmm}}
					作者：{{au}}
					<hr />
					<my-button v-on:three-click="getData"></my-button>
					接受自定义组队中内部的变量值:{{inmm}}
					作者：{{au}}
				</li>
				<li>
					<h3>全部组件的注册</h3>
					<my-button2></my-button2>
				</li>
			</ul>
		</div>
	</body>
	<script>
		/* 全局注册 */
		Vue.component('my-button2',
		{
			props:['m'],
			template:'<button  v-on:click="add">被{{m}}点击了{{n}}次</button>',
			data(){
				return {
					n:1,
					auter:'玉姬'
				};
			},
			methods:{
				add(){
					this.n=this.n+1;
					// 自定义一个三击时间
					if(this.n%3==0){
						this.$emit('three-click',this.n,this.auter)
					}
				}
			}
		}
		);
		
		// 通過nve實例去渲染vue管理的邊界
		new Vue({
			el:'#app',
			data(){
				return {
					inmm:1,
					au:''
				};
			},
					methods:{
						getData(v,a){
							this.inmm=v;
							this.au=a;
						}
					},
			components:{
				'my-button':{
					props:['m'],
					template:'<button  v-on:click="add">被{{m}}点击了{{n}}次</button>',
					data(){
						return {
							n:1,
							auter:'玉姬'
						};
					},
					methods:{
						add(){
							this.n=this.n+1;
							// 自定义一个三击时间
							if(this.n%3==0){
								this.$emit('three-click',this.n,this.auter)
							}
						}
					}
				}
			}
		})
	</script>
</html>

结果
在这里插入图片描述

玉姬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue模板语法下

样式绑定class绑定使用方式：v-bind:class=“expression”expression的类型：字符串、数组、对象style绑定v-bind:style=“expression”expression的类型：字符串、数组、对象事件处理器事件监听可以使用v-on 指令事件修饰符Vue通过由点(.)表示的指令后缀来调用修饰符，.stop：阻止事件冒泡的发生.prev...
复制链接

扫一扫