3、vue模板语法下集

最新推荐文章于 2024-09-21 11:34:18 发布

```

最新推荐文章于 2024-09-21 11:34:18 发布

阅读量136

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/csnbb/article/details/126698784

版权

本文深入探讨了Vue.js的模板语法，包括事件处理器的使用、组件间的通信机制以及复杂的表单处理案例，旨在帮助开发者更好地理解和应用Vue.js。

摘要由CSDN通过智能技术生成

1.事件处理器

2.组件及组件通信

3.表单综合案例

1.事件处理器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<style type="text/css">
			.red{
				height: 400PX;
				width: 400px;
				background-color: red;
			}
			.yellow{
				height: 300PX;
				width: 300px;
				background-color: yellow;
			}
			.blue{
				height: 200PX;
				width: 200px;
				background-color: blue;
			}
			.green{
				height: 100PX;
				width: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<p>暗剑修饰符</p>
			<input type="text" v-model="msg"  @keyup.enter="dwss"/>
			<p>发送一次</p>
			<input type="text" v-model="msg" />
			<button type="button" @click.once="dwss">电死</button>
			<p>阻止冒泡</p>
			<!-- 快捷键tab -->
		<div class="red" @click.stop="red()">
			<div class="yellow" @click.stop="yellow">
				<div class="blue" @click.stop="blue()">
					<div class="green" @click.stop="green()"></div>
				</div>
			</div>
		</div>
		</div>
	</body>
	<script>
		new Vue({
			el:'#app',
			data(){
				return{
					msg:'hello vue'
				}
			},
			methods:{
				red(){
					alert('red');
				},
				yellow(){
					alert('yellow');
				},
				blue(){
					alert('blue');
				},
				green(){
					alert('green');
				},
				dwss(){
					alert(this.msg);
				}
			}
		})
		
		
	</script>
</html >

2.组件及组件通信

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<p>简单组件</p>
			<my-button></my-button>
			<p>父组件 传参  给 子组件</p>
			<my-button m='HZ' n='3'></my-button>
		</div>
	</body>
	<script>
		Vue.component('my-button',{
		// 	template:'<button>我的按钮</button>'
		template:'<button>{{m}}点击了{{n}}次</button>',
		props:['m','n']
		 })
		new Vue({
			el:'#app',
			data(){
				return{
					msg:'hello vue'
				}
			}
			
		})
		
		
	</script>
</html >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		
	</head>
	<body>
		<div id="app">
			<p>父组件 传参  给 子组件</p>
			<my-button m='HZ' n='3' @mymethod="xxx"></my-button>
		</div>
	</body>
	<script>
		Vue.component('my-button',{
		// 	template:'<button>我的按钮</button>'
		template:'<button @click="sub">{{m}}点击了{{n}}次</button>',
		props:['m','n'],
		methods:{
			sub(){
				var name="HZ";
				var sex="男";
				var age="17";
				console.log(name);
				console.log(sex);
				console.log(age);
				// 子传父关键在$emit，自定义
				this.$emit('mymethod',name,sex,age);
			}
		}
		 })
		new Vue({
			el:'#app',
			data(){
				return{
					msg:'hello vue'
				}
			},
			methods:{
				xxx(a,b,c){
				console.log(a);
				console.log(b);
				console.log(c);
				}
			}
		})
		
		
	</script>
</html >

3.表单综合案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 创建一个多功能表单 -->
			<form>
				姓名:<input type="text" v-model="uname" /><br>
				密码:<input type="password" v-model="pwd" /><br>
				性别:
				<input name="sex" type="radio" checked="checked" />
				<input name="sex" type="radio" /><br>
				爱好:
				<div v-for="l in likes">
					<input v-model="hobby" type="checkbox" :value="l.id" />{{l.name}}
				</div><br>
				英语等级:
				<select v-model="selectedVal">
					<option v-for="e in English" :value="e.id">{{e.name}}</option>
				</select><br>

				<input @click="show" type="checkbox" /><br>
				<input v-show="showFlag" @click="sub" type="button" value="ok" />
			</form>
		</div>
	</body>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					uname: null,
					pwd: null,
					sex: '男',
					likes: [ //爱好数据源
						{
							id: 1,
							name: '篮球'
						},
						{
							id: 2,
							name: '足球'
						},
						{
							id: 3,
							name: '台球'
						},
						{
							id: 4,
							name: '棒球'
						}
					],
					English: [ //英语等级数据源
						{
							id: 1,
							name: '优'
						},
						{
							id: 2,
							name: '良'
						},
						{
							id: 3,
							name: '差'
						},
					],
					hobby: [], //用来存放选中的爱好
					selectedVal: 0,
					showFlag: false
				}
			},
			methods: {
				show() {
					this.showFlag = true;
				},
				sub(){
					// 后续都是json数据交互,向后台提交json对象
					var obj={
						uname:this.uname,
						pwd:this.pwd,
						sex:this.sex,
						hobby:this.hobby,
						level:this.selectedVal
					}
					console.log(obj);
				}
			}
		})
	</script>
</html>