Vue的模板语法（下）

编程语言 2023-10-04 19:42:38 阅读次数: 0

一.事件处理

事件修饰符

 Vue通过由点(.)表示的指令后缀来调用修饰符， .stop，  .prevent，.capture，.self，.once

  1. .stop：阻止事件冒泡。当一个元素触发了事件，并且该元素包含嵌套的父元素时，使用.stop修饰符可以防止事件被传递到祖先元素。

  2. .prevent：阻止默认事件。当一个元素上触发了某个事件，使用.prevent修饰符可以阻止浏览器执行默认的事件行为。

  3. .capture：使用事件捕获模式。默认情况下，Vue中的事件监听器是通过事件冒泡模式处理的，即从子元素冒泡到父元素。但是使用.capture修饰符可以将事件监听器绑定到捕获阶段，即从父元素捕获到子元素。

  4. .self：只当事件在指定元素自身触发时触发。当一个元素包含子元素，并且绑定了相同的事件处理函数时，使用.self修饰符可以确保事件只在元素自身触发时才执行处理函数。

  5. .once：只触发一次事件。当绑定了.once修饰符的事件被触发后，监听器将自动解绑，以确保处理函数只执行一次。

 代码演示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
		<title>事件处理</title>
		<style type="text/css">
			.one{
				background-color: red;
				height: 400px;
				width: 400px;
			}	.two{
				background-color: yellow;
				height: 300px;
				width: 300px;
			}	.three{
				background-color: pink;
				height: 200px;
				width: 200px;
			}	.four{
				background-color: green;
				height: 100px;
				width: 100px;
			}
			
			
		</style>
	</head>
	<body>
		<div id="app">
	<div class="one" @click="fun1">
		<div class="two" @click="fun2">
			<div class="three" @click="fun3">
				<div class="four" @click.stop="fun4"></div>
			</div>
		</div>
		
	</div>
	<input :value="msg"/>
	<button @click="clickme">点我</button>
	 <form @submit.prevent="submitForm">
	    <button type="submit">提交</button>
	  </form>
 <div @click.capture="parentClick">
    <button @click="childClick">点击我</button>
  </div>
  <div @click.self="parentClick">
      <button @click="childClick">点击我</button>
    </div>
		</div>
		<script type="text/javascript">
			new Vue({
			el:'#app',
			data(){
				return {
					msg:'你好'
				};
			},
			methods:{
				fun1(){
					alert("fun1")
				},fun2(){
					alert("fun2")
				},fun3(){
					alert("fun3")
				},fun4(){
					alert("fun4")
				},
				clickme(){
					console.log(this.msg)
				},
				 submitForm() {
				      console.log("表单提交事件");
				    },
					parentClick() {
					      console.log("父元素点击事件");
					    },
					    childClick() {
					      console.log("子元素点击事件");
					    }
			}
			})
		</script>
	</body>
</html>

效果：

 二.表单的综合案例

代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
		<title>表单中和案例</title>
	</head>
	<body>
		<div id='app'>
			姓名：<input name="name" v-model="name"/><br />
			密码：<input type="password" v-model="pwd"><br />
			性别：<span v-for="s in sexList">
				<input type="radio" name="sex" v-model="sex" :value="s.id" >{
   
   {s.name}}
			</span><br />
			籍贯：<select name="myAddr" v-model="myAddr">
				<option v-for="a in address" :value="a.id" >{
   
   {a.name}}</option>
			</select><br />
			爱好：
			<span v-for="h in hobby">
				<input type="checkbox" name="myLikes" v-model="myLikes" :value="h.id" >{
   
   {h.name}}
			</span><br />
			个人简介：<textarea v-model="sign" cols="10" rows="5"></textarea>
			<br />
			同意：<input type="checkbox" v-model="ok" /><br />
			<button v-show="ok" @click="dosub">提交</button>
		</div>
		<script type="text/javascript">
			new Vue({
			el:'#app',
			data(){
				return {
					name:'小威',
					pwd:'123665',
					sexList:[
					{name:'男',id:1},
					{name:'女',id:2},
					{name:'阴阳人',id:3}	],	
					sex:1,
					hobby:[{name:'洗浴',id:1},
					{name:'保健',id:2},
					{name:'按摩',id:3},
					{name:'spa',id:4}
					],
					myLikes:[],
					address:[{name:'福建',id:1},
					{name:'湖南',id:2},
					{name:'湖北',id:3},
					{name:'台湾',id:4}
					],
					myAddr:null,
					sign:null,
					ok:false
				};
			},
			methods:{
				dosub(){
					var obj={};
					obj.name=this.name;
			        obj.pwd=this.pwd;
					obj.sex=this.sex;
					obj.address=this.myAddr;
					obj.love=this.myLikes;
					obj.sign=this.sign;
					console.log(obj)
				}
			}
			})
		</script>	
	</body>
</html>

 效果：

三.组件通信 

1 组件介绍及定义


        Vue组件是Vue.js框架中的核心概念之一，它允许开发者将页面拆分为可重用、独立的模块。组件可以包含自己的模板、样式和逻辑，使得代码更加模块化、可维护和可复用。

      除了Vue自带的指令(v-on|v-model)等, Vue也允许注册自定义指令，根据作用范围又分为：全局指令/局部指令

组件的定义：组件可以通过Vue.component()方法或Vue实例的components选项进行定义。组件的定义包括组件的名称、模板、数据、方法等。

局部定义
 

   <script>
        new Vue({
            el: '#xw',
            components: {
                "my-button": {
                    template: "<button>自定义组件</button>"
                }
            }
        })
    </script>


全局定义
 

Vue.component('my-button', {
 
    //用来传值的自定义属性
    props:['title'],
    
    //模板,模板中写的html代码,在其中可以使用{
    
    {}},及指令等vue元素
    template: '<button @click="doClick">{
    
    {title}}: 全局组件</button>',
 
    //注意：在自定义的组件中需要使用函数来定义data
    data: function() {
        return {
            xxx: 0
        }
})

        Vue自定义事件是为组件间通信设计， vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定

  • 父Vue实例->子Vue实例，通过prop传递数据
  • 子Vue实例->父Vue实例，通过事件传递数据

组件传参

父 传 子

注意：props定义属性时采用的是驼峰命名法，而在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>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		<div id="xw">
			<ul>
				<li>
					<!-- <h3>{
   
   {ts}}</h3> -->
					<p>vue组件</p>
					<!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) -->
					<my-button m="肖少爷"></my-button>
				</li>
			</ul>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#xw",
			components: {
				'my-button': {
					props: ['m'],
					template: '<button @click="doClickMyButton">这一个自定义组件，被{
   
   {m}}点了{
   
   {n}}次</button>',
					data() {
						return {
							n: 0
						};
					},
					methods: {
						doClickMyButton() {
							this.n++;
						}
					}
				}
			}
		});
	</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>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
	</head>
	<body>
		<div id="xw">
			<ul>
				<li>
					<!-- <h3>{
   
   {ts}}</h3> -->
					<p>vue组件</p>
					<!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) -->
					<my-button m="邓正伟" @three-click="getParam"></my-button>
				</li>
			</ul>
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#xw",
			components: {
				'my-button': {
					props: ['m'],
					template: '<button @click="doClickMyButton">这是一个黑丝姐姐，被{
   
   {m}}点了{
   
   {n}}次</button>',
					data() {
						return {
							n: 0
						};
					},
					methods: {
						doClickMyButton() {
							this.n++;
							if (this.n % 3 == 0) {
								// 触发自定义组件定义的事件，这里可以传递任意个参数
								// 但是触发的事件绑定的函数要与参数个数一致
								this.$emit('three-click', this.n, 'https://blog.csdn.net/Justw320', '无英韶');
							}
						}
					}
				}
			},
			methods: {
				getParam(a, b, c) {
					console.log(a, b, c);
				}
			}
		});
	</script>
 
</html>

猜你喜欢

转载自blog.csdn.net/weixin_72997875/article/details/133066204
今日推荐
周排行
成为C++高手之宏与枚举
在CAD二次开发中使用进度条
Js插件ECharts，HighCharts学习网址整理
Celery提交任务出错(on windows.)
cephfs内核客户端性能追踪
thinkphp中PHPExcel用法
EntityFramework动态组合多排序字段
汇编语言（八）实验9 根据材料编程
安装ubuntu后必须做的事情（对我而言）
JS函数式编程
每日归档
更多
2024-10-22(0)
2024-10-21(0)
2024-10-20(0)
2024-10-19(0)
2024-10-18(0)
2024-10-17(0)
2024-10-16(0)
2024-10-15(0)
2024-10-14(0)
2024-10-13(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022