vue基础语法02

于 2022-04-28 19:53:34 发布
阅读量304 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_67476502/article/details/124475918
本文详细介绍了Vue的基础语法，包括样式绑定的class和style对象绑定，事件处理器的事件修饰符如.stop和.prevent，以及按键修饰符的使用。此外，还提及了Vue的表单综合案例、自定义指令的创建以及组件的使用，强调了组件在Vue中的重要角色。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

目录

1. 样式绑定

例子：

完整代码

2. 事件处理器

2.1事件修饰符

 2.2 按键修饰符

 完整代码

3，vue之表单综合案例演示

4，自定义指令（全局和局部）

5，vue组件（全局和局部）

2，组件语法：

3，组件命名：

6，组件传值：

1. 样式绑定

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

例子：

对象必须要用v-bind:style进行绑定，v-bind:class无效

完整代码

<!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>
	<style>
		.cl{
			color: darkorchid;
			font-size: 30px;
		}
		.cl1{
			font-weight: bold;
		}
	</style>
	<body>
		<div id="app">
			<h1>{{ts}}</h1>
			<div :class="clsArrs">
				重生之名好看吗？
			</div>
			<!-- style样式 -->
			<div :style="clsObj">
				真不错！
			</div>
		</div>
	</body>
	<script>
		var vue=new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				cls:'cl',
				clsArrs:['cl','cl1'],
				clsObj:{
					color:'green',
					fontSize:'20px',
					fontWeight:'bold'
				}
			},
			methods:{
				
			}
		});
	</script>
</html>

2. 事件处理器

2.1事件修饰符

click 事件只能点击一次
      <a v-on:click.once="doThis"></a>

 <!-- 提交事件不再重载页面 -->
      <form v-on:submit.prevent="onSubmit"></form>

<!-- 阻止单击事件冒泡 -->
      <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>

 2.2 按键修饰符

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

      <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
      <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>
	</head>
	<body>
		<div id="app">
			<h1>{{ts}}</h1>
			{{msg}}
			<div>
				消息:<input type="text" v-model="msg" />
				<button @click="send">发送</button>
			</div>
			<!-- 通过once修饰符控制事件只能点击一次 -->
			<div>
				消息:<input type="text" v-model="msg" />
				<button @click.once="send">发送</button>
			</div>
			<!-- 提交事件不再重载页面 -->
			<div>
				<form action="bookAction.action" v-on:submit.prevent="doSubmit">
					消息:<input type="text" v-model="msg" />
					<input type="submit" value="提交" />
				</form>
			</div>
			<!-- 按键修饰符 -->
			<div>
				消息:<input type="text" @keyup.enter="dokeyup()" />
			</div>
		</div>
	</body>
	<script>
		var vue=new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				msg:''
				
			},
			methods:{
				send:function(){
					console.log(this.msg);
				},
				doSubmit:function(){
					console.log('doSubmit....')
				},
				dokeyup:function(){
					console.log('123123')
				}
			}
		});
	</script>
</html>

3，vue之表单综合案例演示

<!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">
			<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="!flag">注册</button>
            //方法二
            <button @click="doRegister()" :disabled="disabled">注册</button>
		</div>
	</body>
	<script>
		var vue=new Vue({
			el:'#app',
			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:{
				disabled:function(){
					return !this.flag;
				}
				
			}
		});
	</script>
</html>

打了勾才能点注册 

4，自定义指令（全局和局部）

指令定义函数提供了几个钩子函数用来帮助实现功能(可选)
   bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作
   inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。
   update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板更新（详细的钩子函数参数见下）。
   componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
   unbind: 只调用一次， 指令与元素解绑时调用。

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

<!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">
			<h1>{{ts}}</h1>
			<h2>自定义指令（全局和局部）</h2>
			<div v-fos="name">1234</div>
			<span v-yy></span>
		</div>
	</body>
	<script>
		/* 全局指令 */
		Vue.directive('yy',{
			bind:function(el,binding){
				console.log('【全局指令】bind');
			},
			inserted:function(){
				console.log('【全局指令】inserted');
			}
		});
	
		var vue=new Vue({
			el:'#app',
			data:{
				ts:new Date().getTime(),
				name:'zs'
				
			},
			methods:{
				
			},
			directives:{
				/* 局部指令，所对应的钩子函数bind/inserted/unbind */
				fos:{
					bind:function(el,binding){
						console.log(el);
						console.log(binding);
						console.log('bind');
					},
					inserted:function(el,binding){
						console.log('inserted');
					}
				}
			}
		});
	</script>
</html>

5，vue组件（全局和局部）

2，组件语法：

 2.1，全局组件
  Vue.component('组件名'，options)
  2.2局部组件
    var vm=new Vue({
        components:{}
           组件名:{
               ...
          },
              ...
         }
     
       })


3，组件命名：

3.1 短横线命名法（帕斯卡）：kfcButton
       3.2 首字母大写命名法：KfcButton
       补充：驼峰命名法：kfcButton
        
      4，组件作用:扩展HTML元素，封装可重用的代码
        
        5，组件理解：可以把组件理解为JSP中的<%@include%>指令，组件其实就是一个独立的页面

6，组件传值：


 6.1 子到父：采用事件方式，this.$emit('事件名',参数...)
 6.2 父到子：采用属性方式，props 

短横线命名法

<!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">
			<h1>{{ts}}</h1>
			<h2>组件 Component（全局和局部）</h2>
            //短横线命名法
			<kfc-Button @three-click="doTest()"></kfc-Button>
			<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 短横线命名法（帕斯卡）：kfcButton
		//3.2 首字母大写命名法：KfcButton
		//补充：驼峰命名法：kfcButton
		
		//4，组件作用:扩展HTML元素，封装可重用的代码
		
		//5，组件理解：可以把组件理解为JSP中的<%@include%>指令，组件其实就是一个独立的页面
		//SPA
		
		//6，组件传值：
		//6.1 子到父：采用事件方式，this.$emit('事件名',参数...)
		//6.2 父到子：采用属性方式，props
		
		
		//全局组件：
		Vue.component('yy-button',{
					//定义HTML代码，每一个template中有且只有一个根节点
					template:'<div>全局组件<h1>'+
					'<button @click="doClick">被点击了{{count}}次</button></h1></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)
						}
				}
		})
		
		
		
		var vue=new Vue({
			el:'#app',
			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>'+
					'<button @click="doThreeClick">被点击了{{count}}次</button></h1></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>

 结果

柚子子@
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值