Vue模板语法（样式绑定，事件处理器，表单，组件通信）

怼烎@ 2023-10-13 20:32 6阅读 0赞

### Vue模板语法（下） ###

#### 1.学习目标 ####

1. 样式绑定  
    2.事件处理器  
    3.Vue 表单  
    4. 组件通信

#### 2.开始学习 ####

#####   2.1样式绑定 #####

1.1 class绑定

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

1.2 style绑定

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

<!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">
    			.a{
          
    				font-size: 36px;
    			}
    			.b{
          
    				color: red;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="app">
    			<p>基本样式绑定</p>
    			<span class="a">java炒饭</span>
    			<span class="b">要来一份吗</span>
    			<p></p>
    			<span :class="c">java炒饭</span>
    			<span :class="d">要来一份吗</span>
    			
    			<p>样式二</p>
    			<span :style="{fontSize:ss}">遇见逆水寒</span>
    		</div>
    		<script>
    		const vm = new Vue({
          
    			el:'#app',
    			data:{
          
    				c:'a',
    				d:'b',
    				ss:'60px'
    				
    			}
    		})
    		</script>
    	</body>
    </html>

![在这里插入图片描述][bae35ecb1c764444a2a351ee2e8ef057.png]

#####   2.2事件处理器 #####

注1：什么是事件冒泡?

事件冒泡就是指父元素和子元素有相同的事件，当触发子元素事件时，会向上冒泡，同时也会触发父元素事件

2.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>
          
          <a v-on:click.once="doThis"></a>

2.2.2 按键修饰符  
Vue允许为v-on在监听键盘事件时添加按键修饰符：

<input v-on:keyup.13="submit">
    
      Vue为最常用的按键提供了别名
      
      <input v-on:keyup.enter="submit">

全部的按键别名：
       .enter
       .tab
       .delete (捕获 "删除" 和 "退格" 键)
       .esc
       .space
       .up
       .down
       .left
       .right
       .ctrl
       .alt
       .shift
       .meta

<!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">
    			.one {
          
    				width: 400px;
    				height: 400px;
    				background-color: yellow;
    			}
    
    			.two {
          
    				width: 300px;
    				height: 300px;
    				background-color: red;
    			}
    
    			.three {
          
    				width: 200px;
    				height: 200px;
    				background-color: blue;
    			}
    
    			.four {
          
    				width: 100px;
    				height: 100px;
    				background-color: black;
    			}
    		</style>
    	</head>
    	<body>
    		<div id="app">
    			<div class="one"  @click="do_one">
    				<div class="two"  @click.stop="do_two">
    					<div class="three"  @click.stop="do_three">
    						<div class="four"  @click.stop="do_four">
    
    						</div>
    					</div>
    				</div>
    			</div>
    			<input v-model="msg" /><button @click="do_me">点我</button><button @click.once="do_me">一次机会</button>
    		</div>
    		<script>
    			const vm = new Vue({
          
    				el: '#app',
    				data: {
          
    					msg:'默认值。。。'
    				},
    				methods:{
          
    					do_one(){
          
    						alert("one被点击")
    					},
    					do_two(){
          
    						alert("two被点击")
    					},
    					do_three(){
          
    						alert("three被点击")
    					},
    					do_four(){
          
    						alert("four被点击")
    					},
    					do_me(){
          
    						alert(this.msg)
    					}
    				}
    			})
    		</script>
    	</body>
    </html>

![在这里插入图片描述][9247e8588f214147ba1a61b84903e5bb.png]

#####   2.3 Vue表单 #####

3.1 常用控件
           文本框/密码框/文本域/隐藏域
       
           单选复选框/多选复选框
    
           单选按钮
    
           下拉框
           .lazy
           默认情况下， v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步
    
           .number
           将用户的输入值转为 Number 类型
    
           .trim
           自动过滤用户输入的首尾空格
    	接下来我们做一个简单的表单案例

<!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">
    			姓名：<input type="text" v-model="name" /><br>
    			密码：<input type="password" v-model="password" /><br>
    			年龄：<input type="text" v-model="age" /><br>
    			性别：<input type="radio" name="sex" value="1" v-model="sex" />男
    			<input type="radio" name="sex" value="0" v-model="sex" />女<br>
    			爱好：
    			<span v-for="(item,index) in likes" >
    			<input type="checkbox" :value="item.id" v-model="mylikes" />{
       {item.name}}
    			</span><br>
    			类别：<select v-model="myType">
    				<option v-for="n in types" :value="n.id">{
       {n.name}}</option>
    			</select>
    			<br>
    			备注：<textarea rows="10" cols="20" v-model="remark" ></textarea><br>
    			确认：<input type="checkbox" v-model="ok" /><br>
    					<button type="button" @click="do_sub" :disabled="show">提交</button>
    
    		</div>
    		<script type="text/javascript">
    			const vm = new Vue({
          
    				el: '#app',
    				data: {
          
    					msg: '默认值',
    					name: null,
    					password: null,
    					age: 10,
    					sex: 1,
    					likes: [{
          
    							id: 1,
    							name: '唱'
    						}, {
          
    							id: 2,
    							name: '跳'
    						}, {
          
    							id: 3,
    							name: 'rap'
    						}, {
          
    							id: 4,
    							name: '篮球'
    					}],
    					mylikes:[],
    					types: [{
          
    							id: 1,
    							name: '御姐'
    						},
    						{
          
    							id: 2,
    							name: '萝莉'
    						},
    						{
          
    							id: 3,
    							name: '少妇子'
    						},
    						{
          
    							id: 4,
    							name: '清纯'
    						}
    					],
    					myType:null,
    					remark: '一只小只因......',
    					ok:0
    				},
    				methods:{
          
    					do_sub(){
          
    						var obj={
          
    							name:this.name,
    							pwd:this.password,
    							age:this.age,
    							sex:this.sex,
    							likes:this.mylikes,
    							types:this.myType,
    							remark:this.remark
    						}
    						console.log(obj)
    					}
    				},
    				computed:{
          
    					show(){
          
    						return !this.ok;
    					}
    				}
    
    			})
    		</script>
    	</body>
    </html>

![在这里插入图片描述][44558a1f3bdf44989572e08661beda5f.png]

#####   2.4 组件父子通信 #####

2.4.1 组件简介

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

2.4.2 全局和局部组件

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

2.4.3 props

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

注1：因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods
            以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。
    
       注2：当我们定义这个 <button-counter> 组件时，你可能会发现它的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'],<my-tag post-title="hello!"></my-tag>
    
        注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">
    		<title></title>
    		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
    	</head>
    	<body>
    		<div id="app">
    			<my-button m='zs'></my-button>
    			<my-button m='王五'></my-button>
    		</div>
    		<script type="text/javascript">
    		const vm = new Vue({
          
    			el:'#app',
    			components:{
          
    				'my-button':{
          
    					props:['m'],
    					template:'<button @click="do_sub">{
          {m}}提交审核{
          {n}}次</button>',
    					data(){
          
    						return{
          
    							n:0
    						}
    					},
    					methods:{
          
    						do_sub(){
          
    							this.n ++;
    						}
    					}
    				}
    			},
    			data:{
          
    				
    			}
    		})
    		
    		</script>
    	</body>
    </html>

![在这里插入图片描述][b246ccec9cc247bb8b124b1bbba5ca63.png]

#####   子传父 #####

监听事件：$on(eventName) 
       触发事件：$emit(eventName)

注1：Vue自定义事件是为组件间通信设计

vue中父组件通过prop传递数据给子组件，而想要将子组件的数据传递给父组件，则可以通过自定义事件的绑定
      
         父Vue实例->Vue实例，通过prop传递数据
         子Vue实例->父Vue实例，通过事件传递数据

注2：事件名

不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称
         建议使用“短横线分隔命名”，例如：three-click

<!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">
    			<my-button m='zs' @three_click="fnA"></my-button>
    			<my-button m='王五' @four_click="fnB"></my-button>
    		</div>
    		<script type="text/javascript">
    		const vm = new Vue({
          
    			el:'#app',
    			components:{
          
    				'my-button':{
          
    					props:['m'],
    					template:'<button @click="do_sub">{
          {m}}提交审核{
          {n}}次</button>',
    					data(){
          
    						return{
          
    							n:0
    						}
    					},
    					methods:{
          
    						do_sub(){
          
    							let name='张三';
    							let sex = '男';
    							let hobby='小姐姐';
    							this.n ++;
    							//通过自定义事件完成
    							if(this.n % 3==0)
    							this.$emit('three_click',name,sex,hobby);
    							if(this.n % 4==0)
    							this.$emit('four_click',name,hobby);
    						}
    					}
    				}
    			},
    			data:{
          
    				
    			},
    			methods:{
          
    				fnA(a,b,c){
          
    					console.log(a,b,c)
    				},
    				fnB(a,b,c){
          
    					console.log(a,b,c)
    				}
    			}
    		})
    		
    		</script>
    	</body>
    </html>

![在这里插入图片描述][9cd639fa0eee4d26b8d74331e363e004.png]

[bae35ecb1c764444a2a351ee2e8ef057.png]: https://img-blog.csdnimg.cn/bae35ecb1c764444a2a351ee2e8ef057.png
[9247e8588f214147ba1a61b84903e5bb.png]: https://img-blog.csdnimg.cn/9247e8588f214147ba1a61b84903e5bb.png
[44558a1f3bdf44989572e08661beda5f.png]: https://img-blog.csdnimg.cn/44558a1f3bdf44989572e08661beda5f.png
[b246ccec9cc247bb8b124b1bbba5ca63.png]: https://img-blog.csdnimg.cn/b246ccec9cc247bb8b124b1bbba5ca63.png
[9cd639fa0eee4d26b8d74331e363e004.png]: https://img-blog.csdnimg.cn/9cd639fa0eee4d26b8d74331e363e004.png