这些Vue的基础语法你会了没？赶紧看

最新推荐文章于 2024-07-15 17:15:41 发布

Bug本身

最新推荐文章于 2024-07-15 17:15:41 发布

阅读量198

点赞数

分类专栏： vue 文章标签： vue.js 前端 html

本文链接：https://blog.csdn.net/ZhiCun_java/article/details/108092661

版权

vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

Vue基础语法二

语法解释
代码实现
页面效果

语法解释

样式绑定

class绑定

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

style绑定

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

事件处理器

事件修饰符

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>

按键修饰符

Vue为最常用的按键提供了别名
      <!-- 同上 -->
      <input v-on:keyup.enter="submit">
      全部的按键别名：见下文代码块

修饰符

   .lazy
   默认情况下， v-model在input事件中同步输入框的值与数据，但你可以添加
   一个修饰符lazy，从而转变为在change事件中同步

   .number
   将用户的输入值转为 Number 类型

   .trim
   自动过滤用户输入的首尾空格

自定义指令

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

Vue.directive("focus",{});//全局指令

   new Vue({
     el:"#d1",
     directives:{//局部指令
     	focus:{}
     }
   });

代码实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.1/vue.js"></script>
	</head>
	<style>
		.cl{
			color:red;
		}
		
	</style>
	<body>
		<div id="app">
			<p>{{title}} {{ts}}</p>
			<div :class="textcolor">打五的</div>
			<button @click='click1'>显示</button><br />
			<input type="text" v-model="text" />{{ret}}
			<button @click="click2">传递</button>
			<button @click.once="click2">传递</button><br />
			<!-- 全部按键
			.enter .tab .delete (捕获 "删除" 和 "退格" 键) .esc 
			.space .up .down .left .right .ctrl .alt .shift .meta -->
			<input type="text" @keyup.enter="click2" v-model="text" />{{ret}}
			<button @click="click2">传递</button><br />
			<div v-for="d in data">
				<input type="checkbox" v-model="ids" :value="d.name" />{{d.name}}
			</div>
			{{ids}}<br />
			<input type="text" v-model.number="text" />
			<button @click="click3">传递</button>{{text}}<br>
			
		</div>
	</body>
	<script>
		var vm = new Vue({
			el:'#app',
			data: function() {
				return {
					title: 'hello Vue!',
					ts: new Date().getTime(),
					textcolor:"cl",
					stu:{
						id:'1',
						name:'zs'
					},
					text:'',
					ret:'',
					data:[
						{id:1,name:'zs'},
						{id:2,name:'ls'},
						{id:3,name:'ww'}
					],
					ids:[]
				}
			},
			methods: {
				click1:function(){
					console.log(this.stu);
				},
				click2:function(){
					console.log('我被调用了')
					this.ret=this.text
				},
				click3:function(){
					console.log(this.text)
				}
			}
		});
	</script>
</html>

页面效果

因为我懒，所以建议cope代码自己一个个慢慢添加运行测试，不要一次性复制去运行，不然代码干了啥你都分不清。
网页控制台记得开着调试和看部分运行效果。
在这里插入图片描述

Bug本身

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
这些Vue的基础语法你会了没？赶紧看

Vue基础语法二语法解释样式绑定class绑定style绑定事件处理器事件修饰符按键修饰符修饰符自定义指令代码实现页面效果语法解释样式绑定class绑定使用方式：v-bind:class=“expression”expression的类型：字符串、数组、对象style绑定v-bind:style=“expression”expression的类型：字符串、数组、对象事件处理器事件修饰符Vue通过由点(.)表示的指令后缀来调用修饰符，.stop.prevent.capture.s
复制链接

扫一扫