Vue的基本语法

最新推荐文章于 2024-10-02 15:18:09 发布
最新推荐文章于 2024-10-02 15:18:09 发布
阅读量41 收藏
点赞数
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62797382/article/details/131826137
版权

目录

样式绑定  

事件处理器

vue表单

组件通信

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>
		<!-- 1.导入vue依赖 -->
		<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">好好学习</span>
			<span class="b">天天向上</span><br />
			<span :class="c">好好学习</span>
			<span :class="d">天天向上</span>
			<p>样式2</p>
			<span style="font-size: 60px;">好好学习,天天向上</span><br />
			<span :style="{fontSize:e}">好好学习,天天向上</span>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data(){
					return{
						c:'a',
						d:'b',
						e:'60px'
					}
				}
			})
		</script>
	</body>
</html>

cd引用了ab的样式  

2. 事件处理器

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

  2.1 事件修饰符

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

      .stop .prevent .capture .self .once

  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>
		<!-- 1.导入vue依赖 -->
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<!-- 冒泡事件 -->
		<style type="text/css">
			.one{
				height: 400px;
				width: 400px;
				background-color:blueviolet;
			}
			.two{
				height: 300px;
				width: 300px;
				background-color:blue;
			}
			.three{
				height: 200px;
				width: 200px;
				background-color:aquamarine;
			}
			.four{
				height: 100px;
				width: 100px;
				background-color:beige;
			}
		</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 type="button" @click="funa">点我</button>
			<button type="button" @click.once="funa">你只有一次机会</button>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data(){
					return{
						msg:'默认值'
					}
				},
				methods:{
					do_one(){
						alert("one");
					},
					do_two(){
						alert("two");
					},
					do_three(){
						alert("three");
					},
					do_four(){
						alert("four");
					},
					funa(){
						alert(this.msg);
					}
				}
			})
		</script>
	</body>
</html>

 

 点我按钮可以反复点击 只有一次机会按钮只能点击一次弹出框

3. vue表单

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

   3.1 常用控件

       文本框/密码框/文本域/隐藏域/单选复选框/多选复选框/单选按钮/下拉框

   3.2 修饰符

       .lazy

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

       .number

       将用户的输入值转为 Number 类型（防止计算时发生字符串拼接）

       .trim

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.导入vue依赖 -->
		<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="pwd" ><br />
			年纪<input type="text" v-model.number="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="n in likes">
				<!-- mylike装数据 -->
					<input type="checkbox" :value="n.id" v-model="myLike"/>{{n.name}}
				</span><br />
			类别<select v-model="myType">
					<option v-for="n in types" :value="n.id">{{n.name}}</option>
				</select><br>
				<!-- 使用的是计算属性 -->
			备注<textarea row="10" cols="20" v-model="remark"></textarea><br />
			确认<input type="checkbox" v-model="ok" value="ok"/>
			<span v-if="ok">
				<button type="button" @click="do_sub">提交</button>
			</span>
			<span v-else="">
				<button type="button" @click="do_sub" disabled="disabled">提交</button>
			</span>
		</div>
		<script type="text/javascript">
			new Vue({
				el:'#app',
				data(){
					return{
						name:null,
						pwd:null,
						age:10,
						sex:1,
						likes:[
							{id:1,name:'吃饭'},
							{id:2,name:'睡觉'},
							{id:3,name:'喝水'},
							{id:4,name:'打豆豆'}
						],
						types:[
							{id:1,name:'A'},
							{id:2,name:'B'},
							{id:3,name:'C'},
							{id:4,name:'D'}
						],
						remark:'成年人不做选择',
						ok:0,
						myLike:[],
						myType:null
					}
				},
				methods:{
					do_sub(){
						var obj = {
							name:this.name,
							pwd:this.pwd,
							age:this.age+10,//类似于字符串拼接，不会以数字形式相加
							sex:this.sex,
							likes:this.myLike,
							type:this.myType,
							remark:this.remark
						}
						console.log(obj);
					}
				},
				computed: {
					disabled() {
						return this.ok  ? 'disabled' : '';
					}
				}
			})
		</script>
	</body>
</html>

     

 

4. 组件通信

   监听事件：$on(eventName)

   触发事件：$emit(eventName) 

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

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

        父Vue实例->Vue实例，通过prop传递数据

        子Vue实例->父Vue实例，通过事件传递数据 

   注2：事件名

        不同于组件和prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称

        建议使用“短横线分隔命名”，例如：three-click

4.1组件通信（父传子）my-button 自定义按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.导入vue依赖 -->
		<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='ww'></my-button>
		</div>
		<script type="text/javascript">
			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(){
					return{
						e:'60px'
					}
				}
			})
		</script>
	</body>
</html>

 4.2组件通信（子传父）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 1.导入vue依赖 -->
			<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="funca"></my-button>
			<my-button m='ww' @four-click="funcb"></my-button>
		</div>
		<script type="text/javascript">
			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 = 'rap';
								this.n++;
								// debugger;//前端断点
								// 通过自定义事件来完成
								if(this.n % 3 ==0)
								this.$emit('three-click',name,sex,hobby);
								if(this.n % 4 ==0)
								this.$emit('four-click',name,hobby);
							}
						}
					}
				},
				data(){
					return{
						e:'60px'
					}
				},
				methods:{
					funca(a,b,c){
						console.log(a,b,c);
					},
					funcb(a,b){
						console.log(a,b);
					}
				}
			})
		</script>
	</body>
</html>

 zs事件点击三次或三次的倍数触发$emit()得到name,sex,hobby

ww事件点击四次或四次的倍数触发$emit()得到name,sex

嘎嘎西红柿
关注
Vue自定义指令——6位验证码input实现自动跳转焦点和退格删除
rumm
09-26 1602
6位数验证码乍看之下还挺简单的，看了网上很多代码基本一个个试过一遍。基于看不懂逻辑和语法，大多都不成功，最后花了2天时间才琢磨出。一开始搜资料的时候，大部分是jquery的，不方便用在vue框架里。最主要的问题是vue好像不支持直接使用keycode。经过指点才知道可以用自定义指令。于是乎，下面就是我的解决方案。 vue <div class="codeInput"> &...
Vue删除
small_qianzai的博客
09-26 1941
1、完成人员列表的删除功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js"></script> </head&g...
Vue中监听键盘事件
热门推荐
Leayh
05-22 13万+
背景 在一些搜索框中，我们往往需要监听键盘的按下(onkeydown)或抬起(onkeyup)事件以进行一些操作。在原生js或者jQuery中，我们需要判断e.keyCode的值来获取用户所按的键。这样就存在一个问题：我们必须知道某个按键的keyCode值才能完成匹配，使用起来十分不便。 keyCode 实际键值 48到57 0到9 65到90 a到z（...
vue返回上一页(后退)的几种方法与区别
vvv3171071的博客
11-30 8万+
案例： 从a页面=>b页面=>c页面，当前在c页面，执行某方法后可以如同按了浏览器后退键一样返回b页面 方法： 若使用vue-router，this.$router.go(-1)可以回到上一页 this.$router.back() window.history.go(-1) 区别 ①与②的区别是： go(-1): 原页面表单中的内容会丢失： 1. this.$router.go(-1)：后退+刷新； 2. this.$router.go(0)：刷新； 3. this.$route
Vue 中的按键别名（.enter）和修饰键（.ctrl）
Latency の 博客
09-30 1万+
1、按键别名 在监听键盘事件时，我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰符： 对于一些常用键，Vue 还提供了按键别名： 全部的按键别名：  .enter .tab .delete (捕获“删除”和“退格”键) .esc .space .up .down .left .right 2、修饰键 除了
vue基本语法
qq_62087717的博客
04-16 3758
1、插值表达式 {{ 、、、 }} 大括号中可以写变量名，对象.属性等，还可以写入js语句 2.变量显示在界面上 v-text： v-html： 两者的区别v-text把内容当纯文本处理，v-html遇到html的标签会当html代码处理 如： v-text: v-html: 3.v-moldel实现双向动态绑定 data:{ username: “” ​ } 当username改变时，页面上的username也会动态改变 页面上的username改变时，data中的us
vue基本语法总结大全
xueluoyouying的博客
02-04 2253
vue基本语法总结
VUE基本语法
蔡茂的博客
05-19 818
文章目录一.什么是VUE二.VUE基本语法2.1 Vue的基本使用2.2 el2.3 data2.4 methods三.VUE表达式四.VUE的指令v-text,v-htmlv-forv-bind: 绑定属性v-model: 数组双向绑定v-show:展示与隐藏v-if:判断v-on:注册事件五.VUE组件5.1 全局组件5.2 局部组件 一.什么是VUE 渐进式的Javascript框架 MV...
Vue基本语法
qq_44870324的博客
11-01 2423
一、vue包含：vue.js、vue-cli、vueX、vue-router、axios 设计模式包含三种， MVC、MVP和MVVM 设计模式 vue是属于mvvm设计模式， M：model （数据层） V：view （视图层） VM：view model C：control （控制层） 二、vue使用 new Vue（{ el:’ '， data:{}, method:{}, compute...
vue基本语法讲解.pdf
05-11
Vue 基本语法讲解 一、 Vue 项目重点概念介绍 1. 单页面应用程序：单页面应用程序指的是一个应用程序中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。单页面应用程序将所有的功能局限在...
vue基本语法综合案例
08-09
vue基本语法综合案例
180315_VueTest:Vue基本语法测试
04-29
1. Vue.js是什么? 1). 一位华裔前Google工程师(尤雨溪)开发的前端js库 2). 作用: 动态构建用户界面 3). 特点: * 遵循MVVM模式 * 编码简洁, 体积小, 运行效率高, 移动/PC端开发 * 它本身只关注UI, 可以轻松引入vue...
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 484
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
Thinkphp/Laravel基于vue的少数民族民歌网络图书馆管理系统
abo2022的博客
09-30 1106
ThinkPHP是一个快速、简单的基于MVC和面向对象的轻量级PHP开发框架，遵循Apache2开源协议发布，从诞生以来一直秉承简洁实用的设计原则，在保持出色的性能和至简的代码的同时，尤其注重开发体验和易用性，并且拥有众多的原创功能和特性，为WEB应用开发提供了强有力的支持Laravel非常的简洁并且是开源的，Laravel 是一个具有表现力、优雅语法的 Web 应用程序框架. Laravel 是构建现代全栈 Web 应用程序的最佳选择.
Vue3.0面试题汇总
qq_25741071的博客
09-29 903
实现 DOM 的方式进行 WebGL 编程。
初学Vue
2302_80244686的博客
09-29 757
一套用于构建用户界面的渐进式JavaScript框架Vue可以自底向上逐层的应用。
结合vueuse实现图片懒加载
最新发布
clmm_的博客
10-02 751
在 Vue.js 中，是用于注册自定义指令的 API。自定义指令允许你在组件的模板中实现特定的功能或行为，这些功能或行为通常是 DOM 操作。自定义指令是一种可以在模板中使用的功能，通常以v-开头。例如，v-model和v-bind是内置指令。通过创建自定义指令，你可以扩展 Vue 的功能。: 用于注册自定义指令。自定义指令: 可以在模板中添加特定的功能，增强组件的交互性。钩子函数: 提供不同生命周期阶段的操作机会。简单来说，这段代码的目的是确保只有当用户滚动到
vue单点登录异步执行请求https://xxx.com获取并处理数据
m0_65360496的博客
09-27 364
vue单点登录异步执行请求https://xxx.com获取并处理数据
vue基本语法思维导图
08-26
请注意，以上只是Vue基本语法的思维导图，具体的语法细节和用法请参考官方文档或相关教程。<span class="em">1</span><span class="em">2</span><span class="em">3 #### 引用[.reference_title] - *1* [vue（框架 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值