vue模板语法（下）

最新推荐文章于 2021-11-21 17:23:50 发布

路过、错过、不想再放过

最新推荐文章于 2021-11-21 17:23:50 发布

阅读量120

点赞数

本文链接：https://blog.csdn.net/qiu_hyun/article/details/100991508

版权

1. 样式绑定

1.1 class绑定

  使用方式：v-bind:class="expression" 
  expression的类型：字符串、数组、对象

1.2 style绑定

  v-bind:style="expression"
  expression的类型：字符串、数组、对象

2. 事件处理器

事件监听可以使用v-on 指令

之前已学习

2.1 事件修饰符

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>

代码演示：

<!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: aqua;
		}
		.b{
			background-color: red;
		}
		.c{
			font-size: 30px;
		}
		div{
			padding: 30px;
		}
	</style>
	
	<body>
		<!-- vue所管理的边界 -->
		<div id="app">
			<ul>
				<li>
					<h3>样式绑定</h3>
					<span :class="aclz">今天踩我头上</span>
					<span :class="bclz">明天我长到你头上</span>
				</li>
				<li>
					<h3>事件冒泡</h3>
					<div style="width: 300px;height: 300px;background-color: red;" @click="d">
						<div style="width: 200px;height: 200px;background-color: aqua;" @click="c">
							<div style="width: 100px;height: 100px;background-color: yellow;" @click="b">
								<div style="width: 50px;height: 50px;background-color: lawngreen;" @click.stop="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>
		//通過Vue實例去渲染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 = '';
				}
			}
		})
	</script>
</html>

显示结果：
在这里插入图片描述

3. vue组件

2.1 组件简介
组件(Component)是Vue最强大的功能之一
组件可以扩展HTML元素，封装可重用的代码
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

2.2 全局和局部组件

全局组件：
Vue.component(tagName, options)，tagName为组件名，options为配置选项。
局部组件:
new Vue({el:’#d1’,components:{…}}) 注册后，我们可以使用以下方式来调用组件：
<tagName></tagName>

2.3 props

props是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 “prop”

注1：因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

注2：当我们定义这个组件时，你可能会发现它的data并不是像这样直接提供一个对象

    data: {
      count: 0
    }

    取而代之的是，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
    data: function () {
      return {
        count: 0
      }
    }

注3：定义组件名的方式有两种

短横线分隔命名(建议使用)
Vue.component(‘my-component-name’, { /* … */})，引用方式：<my-component-name>

首字母大写命名
Vue.component(‘MyComponentName’, { /* … */ })，引用方式： <my-component-name>和<MyComponentName>都是可接受的

注4：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。

这意味着当你使用 DOM 中的模板时，
camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
props: [‘postTitle’],

注5：props: [‘title’, ‘likes’, ‘isPublished’, ‘commentIds’, ‘author’]

 希望每个 prop 都有指定的值类型
         props: {
           title: String,
           likes: Number,
           isPublished: Boolean,
           commentIds: Array,
           author: Object,
           callback: Function,
           contactsPromise: Promise // or any other constructor
         }

代码演示：

<!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: aqua;
		}
		.b{
			background-color: red;
		}
		.c{
			font-size: 30px;
		}
		div{
			padding: 30px;
		}
	</style>
	
	<body>
		<!-- vue所管理的边界 -->
		<div id="app">
			<ul>
				<li>
					<h3>局部组件的注册</h3>
					<my-button></my-button>
					
				</li>
				<li>
					<h3>父子组件的传参（父传子）</h3>
					<my-button m="NB"></my-button>
				</li>
				<li>
					<h3>父子组件的传参（子传父）</h3>
					<my-button v-on:three-click="getData"></my-button><br />
					接受自定义组件中内部的变量值：{{innerNum}}<br />
					作者：{{au}}
					<hr />
					<my-button v-on:three-click="getData"></my-button><br />
					接受自定义组件中内部的变量值：{{innerNum}}<br />
					作者：{{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,
					auther:'来了老弟！'
				};
			},
			methods:{
				add(){
					this.n = this.n + 1;
					//自定义一个三击事件
					if(this.n%3==0){
						this.$emit('three-click',this.n,this.auther);
					}
				}
			}
		});
		new Vue({
			el: '#app',
			data() {
				return {
					innerNum:1,
					au:''
				};
			},
			methods:{
				getData(v,a){
					this.innerNum = v;
					this.au = a;
				}
			},
			components:{
				'my-button':{
					props:["m"],
					template:'<button v-on:click="add">被{{m}}点击了{{n}}次</button>',
					data(){
						return {
							n:1,
							auther:'来了老弟！'
						};
					},
					methods:{
						add(){
							this.n = this.n + 1;
							//自定义一个三击事件
							if(this.n%3==0){
								this.$emit('three-click',this.n,this.auther);
							}
						}
					}
				}
			}
		})
	</script>
</html>

结果图片：
在这里插入图片描述

路过、错过、不想再放过

关注

0
点赞
踩
0

收藏

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

1. 样式绑定1.1 class绑定使用方式：v-bind:class="expression" expression的类型：字符串、数组、对象1.2 style绑定 v-bind:style="expression" expression的类型：字符串、数组、对象2. 事件处理器事件监听可以使用v-on 指令之前已学习2.1 事件修饰符Vue通过由点(.)表...
复制链接

扫一扫