Vue快速入门之第三章基础语法2

一时失言乱红尘 2024-04-08 11:27 79阅读 0赞

**目录**

一：样式绑定

①：class绑定

ps:expression的类型：字符串、数组、对象

②：style绑定

案例演示：

二：事件修饰符

三： 按键修饰符

案例演示：

四：vue表单

常用控件

修饰符

案例演示：

五：自定义指令

全局指令

局部指令

六：vue组件

1.组件简介

2.全局和局部组件

3. props

注意：

重点：

--------------------

### 一：样式绑定 ###

#### ①：class绑定 ####

使用方式：v-bind:class="expression"

#### ps:expression的类型：字符串、数组、对象 ####

#### ②：style绑定 ####

v-bind:style="expression"

#### 案例演示： ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		
    		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    	</head>
    	<style>
    		.cl{
    			color: red;
    			font-size: 30px;
    		}
    		.cl1{
    			font-weight: bold;
    		}
    		
    	</style>
    	<body>
    		
    		<div id="a" style="margin-bottom: 200px;">
    			<h1>{
       {ts}}</h1>
    			
    			<div :class="clsArrs">
    				真理与我同在
    			</div>
    			
    			<div :style="clsObj">
    				李太白
    			</div>
    		</div>
    	</body>
    	<script>
    	//每一个Vue实例都是从new构造函数开始
    		var vm=new Vue({
    			el:'#a',
    			data:{
    				ts:new Date().getTime(),
    				cls:'cl',
    				clsArrs:['cl','cl1'],
    				clsObj:{
    					color:'blue',
    					fontSize:'20px',
    					fontWeight:'bold'
    				}			
    			},
    			methods:{			
    			}		
    		});		
    		
    	</script>	
    </html>

效果展示：

![ebabcd68a6934d0f8ff314e9229faf39.png][]

### 二：事件修饰符 ###

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

<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>

####  ####

### 三： 按键修饰符 ###

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

####  ####

#### 案例演示： ####

### 四：vue表单 ###

用v-model指令在表单控件元素上创建双向数据绑定

*  #### 常用控件 ####
 *  文本框/密码框/文本域/隐藏域
 *  单选复选框/多选复选框
 *  单选按钮
 *  下拉框

*  #### 修饰符 ####

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>&nbsp;.lazy</td> 
   <td>&nbsp;默认情况下， v-model在input事件中同步输入框的值与数据，但你可以添加一个修饰符lazy，从而转变为在change事件中同步<br> &nbsp;</td> 
  </tr> 
  <tr> 
   <td>&nbsp;.number</td> 
   <td>&nbsp; 将用户的输入值转为 Number 类型</td> 
  </tr> 
  <tr> 
   <td>.trim</td> 
   <td>&nbsp;自动过滤用户输入的首尾空格</td> 
  </tr> 
 </tbody> 
</table>

####  ####

#### 案例演示： ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		
    		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    	</head>
    	
    	<body>
    		
    		<div id="a" style="margin-bottom: 200px;">
    			<h1>{
       {ts}}</h1>
    				账号：<input type="text" v-model="username"/><br/>
    						密码：<input type="password" v-model="password"/><br/>
    						性别：<input type="radio" v-model="sex" value="1"/>男 
    							 <input type="radio" v-model="sex" value="2"/>女<br/>
    						爱好：
    						<span v-for="h in hobby">
    							<input type="checkbox" v-model="hobbies" :value="h.id"/>{
       {h.name}}
    						</span><br/>
    						籍贯：<select v-model="areaname">
    							<option value="">---请选择---</option>
    							<option v-for="a in area" :value="a.id">
    								{
       {a.name}}
    							</option>
    						</select><br/>
    						备注：
    						<textarea v-model="remark"></textarea><br/>
    						<input type="checkbox" v-model="flag" />已阅读<br/>
    						<button @click="doRegister()" :disabled="disable">注册</button>
    		</div>
    	</body>
    	<script>
    	//每一个Vue实例都是从new构造函数开始
    		var vm=new Vue({
    			el:'#a',
    			data:{
    				ts:new Date().getTime(),
    			username:'',
    							password:'',
    							sex:'1',
    							hobby:[
    								{id:1,name:'看美女'},
    								{id:2,name:'写代码'},
    								{id:3,name:'打游戏'},
    								{id:4,name:'撸撸撸'},
    							],
    							hobbies:[],
    							area:[
    								{id:1,name:'长沙'},
    								{id:2,name:'株洲'},
    								{id:3,name:'湘潭'},
    								{id:4,name:'衡阳'},
    							],
    							areaname:'',
    							remark:'',
    							flag:false
    						},
    						methods:{
    							doRegister:function(){
    								let params={
    									username:this.username,
    									password:this.password,
    									sex:this.sex,
    									hobby:this.hobbies,
    									area:this.areaname,
    									remark:this.remark
    								};
    								console.log(params);
    							}
    						},
    						computed:{
    							disable:function(){
    								return !this.flag;
    							}
    						}
    					});
    		
    	</script>	
    </html>

效果展示：

![5aed1754d437474fb6f579fe4fda75a7.png][]

### 五：自定义指令 ###

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

*  #### 全局指令 ####

Vue.directive("focus",{});

*  #### 局部指令 ####

new Vue({
         el:"#d1",
         directives:{
           focus:{}
         }
       });

ps：

指令定义函数提供了几个钩子函数用来帮助实现功能

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td style="width:143px;">&nbsp;bind</td> 
   <td style="width:354px;">只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作</td> 
  </tr> 
  <tr> 
   <td style="width:143px;">inserted</td> 
   <td style="width:354px;">被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）</td> 
  </tr> 
  <tr> 
   <td style="width:143px;">&nbsp; update</td> 
   <td style="width:354px;">被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新</td> 
  </tr> 
  <tr> 
   <td style="width:143px;">&nbsp; componentUpdated</td> 
   <td style="width:354px;">被绑定元素所在模板完成一次更新周期时调用</td> 
  </tr> 
  <tr> 
   <td style="width:143px;">&nbsp;unbind:</td> 
   <td style="width:354px;">只调用一次， 指令与元素解绑时调用</td> 
  </tr> 
 </tbody> 
</table>

<table style="width:500px;">  钩子函数的参数  
 <tbody> 
  <tr> 
   <td>&nbsp; &nbsp;el</td> 
   <td>指令所绑定的元素，可以用来直接操作 DOM</td> 
  </tr> 
  <tr> 
   <td>&nbsp; binding</td> 
   <td>一个对象，包含以下属性</td> 
  </tr> 
  <tr> 
   <td>name</td> 
   <td>指令名，不包括 v- 前缀</td> 
  </tr> 
  <tr> 
   <td>&nbsp; value</td> 
   <td>指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2</td> 
  </tr> 
  <tr> 
   <td>&nbsp;oldValue</td> 
   <td>指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用</td> 
  </tr> 
  <tr> 
   <td>&nbsp; expression</td> 
   <td>绑定值的表达式或变量名。 例如 v-my-directive="1 + 1" ， expression 的值是 "1 + 1"</td> 
  </tr> 
  <tr> 
   <td>&nbsp; arg</td> 
   <td>传给指令的参数。例如 v-my-directive:foo， arg 的值是 "foo"</td> 
  </tr> 
  <tr> 
   <td>&nbsp;modifiers</td> 
   <td>一个包含修饰符的对象。 例如： v-my-directive.foo.bar, 修饰符对象 modifiers 的值是 { foo: true, bar: true }</td> 
  </tr> 
  <tr> 
   <td>&nbsp; vnode</td> 
   <td>Vue 编译生成的虚拟节点</td> 
  </tr> 
  <tr> 
   <td>&nbsp; oldVnode</td> 
   <td>上一个虚拟节点，仅在 update 和 componentUpdated 钩子中可用</td> 
  </tr> 
 </tbody> 
</table>

案例演示：

<!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="a">
    			<h1>{
       {ts}}</h1>
    			<h2>自定义指令(全局和局部)</h2>
    			<div v-fos="name">123123</div>
    			<span v-yy></span>
    		</div>
    	</body>
    	<script>
    		/* 全局指令 */
    		Vue.directive('yy',{
    			bind:function(el,binding){
    				console.log('[全局指令]bind');
    			},
    			inserted:function(el,binding){
    				console.log('[全局指令]inserted');
    			}
    		});
    		//每一个Vue实例都是从new构造函数开始
    		var vm=new Vue({
    			el:'#a',
    			data:{
    				ts:new Date().getTime(),
    				name:'zs'
    			},
    			methods:{
    				
    			},
    			directives:{
    				/* 局部指令，所对应的钩子函数bind/inserted/unbind */
    				fos:{
    					bind:function(el,binding){
    						//el: 指令所绑定的元素，可以用来直接操作 DOM 
    						console.log(el);
    						// 一个对象
    						console.log(binding);
    						console.log('bind');
    					},
    					inserted:function(el,binding){
    						console.log('inserted');
    					}
    				}
    			}
    		});
    		
    	</script>
    </html>

####  ####

### 六：vue组件 ###

#### 1.组件简介 ####

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

#### 2.全局和局部组件 ####

①：全局组件

Vue.component(tagName, options)，tagName为组件名，options为配置选项

②：局部组件

new Vue({el:'#d1',components:{...}})

####  ####

#### 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>

案例演示：

<!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="a">
    			<h1>{
       {ts}}</h1>
    			<h2>自定义指令(全局和局部)</h2>
    			<div v-fos="name">123123</div>
    			<span v-yy></span>
    		</div>
    	</body>
    	<script>
    		/* 全局指令 */
    		Vue.directive('yy',{
    			bind:function(el,binding){
    				console.log('[全局指令]bind');
    			},
    			inserted:function(el,binding){
    				console.log('[全局指令]inserted');
    			}
    		});
    		//每一个Vue实例都是从new构造函数开始
    		var vm=new Vue({
    			el:'#a',
    			data:{
    				ts:new Date().getTime(),
    				name:'zs'
    			},
    			methods:{
    				
    			},
    			directives:{
    				/* 局部指令，所对应的钩子函数bind/inserted/unbind */
    				fos:{
    					bind:function(el,binding){
    						//el: 指令所绑定的元素，可以用来直接操作 DOM 
    						console.log(el);
    						// 一个对象
    						console.log(binding);
    						console.log('bind');
    					},
    					inserted:function(el,binding){
    						console.log('inserted');
    					}
    				}
    			}
    		});
    		
    	</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="a">
    			<h1>{
       {ts}}</h1>
    			<h2>组件Component(全局和局部)</h2>
    			<kfc-button @three-click="doTest"></kfc-button><br/>
    			<yy-button :first-name="obj"></yy-button>
    		</div>
    	</body>
    	<script>
    		//1.组件定义：全局和局部
    		//2.组件语法：
    		//2.1 全局组件：
    		//Vue.component('组件名',options)
    		//2.2 局部组件：
    		//var vm=new Vue({
    		//   components:{
    		//	     组件名:{
    		//	        ...
    		//       },
    		//	     ....
    		//   }
    		//	
    		//})
    		
    		//3.组件命名：
    		//3.1 短横线命名法：kfc-button
    		//3.2 首字母大写命名法（帕斯卡）：KfcButton
    		//补充：驼峰命名法：kfcButton
    		
    		//4.组件作用：扩展HTML元素，封装可重用的代码
    		
    		//5.组件理解：可以把组件理解为JSP中的<%@include%>指令,组件其实就是一个独立的页面
    		
    		//6.组件传值：
    		//6.1 子到父：采用事件方式，this.$emit('事件名',参数...)
    		//6.2 父到子：采用属性方式，props
    		
    		//全局组件
    		Vue.component('yy-button',{
    			//定义HTML代码，每一个template中有且只有一个根节点
    			template:'<div><h1>全局组件</h1>'+
    					'<button @click="doClick">被点击了{
       {count}}次</button></div>',
    			//采用驼峰命名法
    			props:['firstName'],
    			//自定义组件中data必须使用函数方式
    			data:function(){
    				return {
    					count:0
    				}
    			},
    			methods:{
    				doClick:function(){
    					this.count=this.count+1;
    					console.log(this.count);
    					console.log(this.firstName);
    				}
    			}
    		})
    		
    		//每一个Vue实例都是从new构造函数开始
    		var vm=new Vue({
    			el:'#a',
    			data:{
    				ts:new Date().getTime(),
    				obj:{
    					fname:'zhang',
    					lname:'san'
    				}
    			},
    			methods:{
    				doTest:function(v){
    					console.log("父组件接受到count="+v);
    				}
    			},
    			components:{
    				'kfc-button':{
    					//定义HTML代码，每一个template中有且只有一个根节点
    					template:'<div><h1>局部组件</h1>'+
    							'<button @click="doThreeClick">被点击了{
       {count}}次</button></div>',
    					//自定义组件中data必须使用函数方式
    					data:function(){
    						return {
    							count:0
    						}
    					},
    					methods:{
    						doClick:function(){
    							this.count=this.count+1;
    							console.log(this.count);
    						},
    						doThreeClick:function(){
    							this.count=this.count+1;
    							if(this.count%3==0){
    								console.log("子组件count="+this.count);
    								this.$emit('three-click',this.count);
    							}
    						}
    					}
    				}
    			}
    		});
    		
    	</script>
    </html>

#### 重点： ####

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

[ebabcd68a6934d0f8ff314e9229faf39.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/4710d15b1b614dcb890d67e161124d2b.png
[5aed1754d437474fb6f579fe4fda75a7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/08/aa6d274ee5c04d53b3a8744c065383ef.png