Vue模板语法（下）

最新推荐文章于 2024-07-08 00:13:52 发布
最新推荐文章于 2024-07-08 00:13:52 发布
阅读量112 收藏
点赞数
分类专栏： Vue 前端框架 文章标签： 模板语法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43749826/article/details/98212899
版权

模板语法

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

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

  • 事件处理器：
    事件监听可以使用v-on 指令

  • 事件修饰符
    Vue通过由点(.)表示的指令后缀来调用修饰符，
    .stop
    .prevent
    .capture
    .self
    .once

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

    <!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
    <input v-on:keyup.13=“submit”>

    Vue为最常用的按键提供了别名
    <!-- 同上 -->
    <input v-on:keyup.enter=“submit”>

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

样式绑定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>vue的样式绑定</title>
		<style>
			.a{
				color: red;
			}
			.b{
				color: aqua;
			}
			.c{
				font-size: 36px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>普通文本的插值</h3>
					{{msg}}
				</li>
				<li>
					<h3>样式一</h3>
					<div :class="xa">{{msg}}</div>
				</li>
				<li>
					<h3>样式二</h3>
					<div :class="xb">{{msg}}</div>
				</li>
				<li>
					<h3>样式三</h3>
					<div :class="xc">{{msg}}</div>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: "#app",
			data() {
				return {
					msg: "hello vue",
					xa:'a',
					xb:'b',
					xc:['a','c']
				};
			}
		});
	</script>
</html>

效果图展示
在这里插入图片描述

事件处理器

注：

<!-- 阻止单击事件冒泡 -->
<a v-on:click.stop=“doThis”>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent=“onSubmit”>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent=“doThat”>
<!-- 只有修饰符 -->
<form v-on:submit.prevent>
<!-- 添加事件侦听器时使用事件捕获模式 -->
<div v-on:click.capture=“doThis”>…
<!-- 只当事件在该元素本身（而不是子元素）触发时触发回调 -->
<div v-on:click.self=“doThat”>…
<!-- click 事件只能点击一次 -->
<a v-on:click.once=“doThis”>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>vue的事件处理器</title>
		<style>
			div{
				padding: 30px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>普通文本的插值</h3>
					{{msg}}
				</li>
				<li>
					<h3>防止事件冒泡</h3>
					<div style="height: 300px;width: 300px; background-color: orangered;" @click="a">
						<div style="height: 200px;width: 200px; background-color: greenyellow;" @click="b">
							<div style="height: 100px;width: 100px; background-color: aqua;" @click="c">
								<div style="height: 50px;width: 50px; background-color: darkmagenta;" @click.stop="d">
								</div>
							</div>
						</div>
					</div>
				</li>
				<li>
					<h3>事件只能点击一次(模拟聊天信息发送)</h3>
					{{qqmsg}}<input type="text" v-on:keyup.enter="send" v-model="msg" />
					<button @click="send">ok</button>
					<button @click.once="send">点一次</button>
				</li>
				<li>
					<h3>表单中的复选框</h3>
					<div v-for="item,index in hobby">
						<input type="checkbox"  v-model="checkedIds" name="hobby" :value="item.id" />{{item.name}}
					</div>
					{{checkedIds}}
				</li>
				<li>
					<h3>表单中的下拉框</h3>
					<select name="likes" v-model="selectedId">
						<option v-for="item,index in hobby" :value="item.id">{{item.name}}</option>
					</select>
					{{selectedId}}
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: "#app",
			data() {
				return {
					msg: "hello vue",
					qqmsg: null,
					hobby: [{
						id: '1',
						name : '足球'
					}, {
						id: '2',
						name : '兵乓球'
					}, {
						id: '3',
						name : '篮球'
					}],
					checkedIds:[],
					selectedId:null
				};
			},
			methods: {
				a() {
					alert('a')
				},
				b() {
					alert('b')
				},
				c() {
					alert('c')
				},
				d() {
					alert('d')
				},
				send() {
					this.qqmsg = this.msg;
					this.msg = null;
				},
			}
		});
	</script>
</html>

效果图展示
在这里插入图片描述

表单

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>表单</title>
	</head>
	<body>
		<div id="app">
			<h1>标题</h1>
			<ul>
				<li>
					<p>vue表单</p>
					<label>姓名：</label><input v-model="uname" /><br />
					<label>密码：</label><input v-model="upwd" type="password" /><br />
					<!-- 将用户的输入值转为 Number 类型 -->
					<label>年龄：</label><input v-model.number="age" /><br />
					<label>性别：</label>
					<input type="radio" v-model="sex" name="sex" value="1" />男
					<input type="radio" v-model="sex" name="sex" value="0" />女<br />
					<label>爱好：</label>
					<div v-for="h in hobby">
						<input type="checkbox" v-model="hobbies" v-bind:value="h.id" />{{h.name}}
					</div>
					<label>类别：</label>
					<select v-model="type">
						<option value="-1">===请选择===</option>
						<option v-for="t in types" v-bind:value="t.id">{{t.name}}</option>
					</select><br />
					<label>备注：</label>
					<textarea v-bind:value="mark"></textarea><br />
					确认<input type="checkbox" v-model="flag" />
					<input type="submit" v-bind:disabled="show" v-on:click="doSubmit" />
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					uname: null,
					upwd: null,
					age: 10,
					sex: 1,
					hobby: [{
						id: 1,
						name: '篮球'
					}, {
						id: 2,
						name: '足球'
					}, {
						id: 3,
						name: '象棋'
					}],
					hobbies: [],
					types: [{
						id: 1,
						name: 'A'
					}, {
						id: 2,
						name: 'B'
					}, {
						id: 3,
						name: 'C'
					}],
					type: null,
					mark: '学生备注',
					flag: false
				}
			},
			computed: {
				show: function() {
					return !this.flag;
				}
			},
			methods: {
				doSubmit: function() {
					console.log('doSubmit')
					var obj = {
						uname: this.uname,
						upwd: this.upwd,
						age:this.age+10,
						sex: this.sex,
						hobbies:this.hobbies,
						type: this.type,
						mark: this.mark,
					}
					console.log(obj);
				}
			}

		})
	</script>
</html>

效果图展示
在这里插入图片描述

组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>组件</title>
	</head>
	<body>
		<div id="app">
			<h1>标题</h1>
			<ul>
				<li>
					<p>局部vue组件定义</p>
					<my-button></my-button>
				</li>
				
				<li>
					<p>父组件传值子组件</p>
					<my-button m="嘻嘻"></my-button>
				</li>
				
				<li>
					<p>子组件传值父组件</p>
					<my-button @three-click="doss"></my-button>
				</li>
				<li>
					<p>全局vue组件的注册</p>
					<my-button2></my-button2>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		
		Vue.component('my-button2',{
					props:['m'],
					template:'<button @click="doxx">自定义按钮，被{{m}}点击了{{n}}次</button>',
					data() {
						return {
							n:0,
						}
					},
					methods:{
						doxx(){
							this.n++;
							this.$emit('three-click',this.n,'vue','前端');
						},
					}
				})
		
		new Vue({
			el: '#app',
			data() {
				return {
					msg:'aa',
					
				}
			},
			computed:{
				xs(){
					return this.msg;	
				}
			},
			methods:{
				doss(n,x,y){
					alert(n);
					alert(x);
					alert(y);
				}
			},
			components:{
				'my-button':{
					props:['m'],
					template:'<button @click="doxx">自定义按钮，被{{m}}点击了{{n}}次</button>',
					data() {
						return {
							n:0,
						}
					},
					methods:{
						doxx(){
							this.n++;
							this.$emit('three-click',this.n,'vue','前端');
						},
					}
				}
			}
		})
	</script>
</html>

效果图展示
在这里插入图片描述

vue模板语法
yzq102873的博客
09-02 917
vue模板语法
Vue模板语法
qq_62331938的博客
09-02 2564
本篇文章将要分享的内容为Vue的模板语法。
vue中的模板语法
无远弗届
06-17 1413
Vue.js，简称Vue，是一个用于构建用户界面的渐进式JavaScript框架。自从2014年首次发布以来，Vue因其简洁、易学和高效而迅速赢得了开发者的青睐。Vue的核心库只关注视图层，易于与其他库或现有项目整合，同时也可以支持通过各种插件和库构建复杂的单页应用（SPA）。Vue模板语法是一种声明式的标记语言，用于将组件的数据渲染进DOM。它允许开发者使用HTML作为模板，并通过Vue的指令来增强HTML的功能，实现数据和视图的动态绑定。Vue允许开发者创建自己的指令，以封装复杂的DOM操作逻辑。
Vue的模板语法
m0_46176643的博客
04-20 3459
1.3.模板语法 1.3.1效果 第一大类是插值语法：把指定的值放入指定的位置 插值语法往往是用于指定标签体内容(起始标签和结束标签中间所夹着的内容就是一个标签体) 第二大类是指令语法：固定的写法: <h></h> v-bind:是绑定的 意思，它可以给所有的任何一个标签属性动态的去绑定值 简写：v-bind: ====> : 指令语法管理标签属性 总结： Vue模板语法有2大类： 插值语法： 功...
Vue 模板语法-插值
zhanchulan的博客
03-06 748
Vue 的模板语法非常灵活，其中最基础也是最常用的语法就是插值。需要注意的是，在插值语法中，只能使用最基础的 JavaScript 表达式，不能使用语句或控制流语句，例如 if、for 等等。在属性中使用插值语法也很容易，只需要将需要动态更新的数据包裹在 {{ }} 中，然后将整个表达式作为属性的值即可。在指令中使用插值语法和在属性中使用类似，将要动态更新的数据包裹在 {{ }} 中，然后将整个表达式作为指令的值。在文本节点中使用插值语法非常简单，只需要将需要动态更新的数据包裹在 {{ }} 中即可。
Vue2-模板语法
yulingpan123的博客
04-24 793
template三种写法，Vue.js模板语法，指令与修饰符
Vue模板语法——插值
热门推荐
布小禅的博客
10-31 1万+
Vue具有自己的模板语法，如果你已经有了后端的学习经验，那么你应该知道，在后端框架中具有框架自带的前端语法，比如django就有自带的模板语法，可以直接写在后端，与服务器进行交互。
Vue 模板语法
sinat_38021004的博客
09-09 1547
模板语法 Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。 也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。 模板 template 的三种写法 1. V
Vue3 模板语法及指令
最新发布
qq_39194983的博客
07-08 1144
跳过这个元素和它的所有子元素的编译过程，用于显示原始 Mustache 标签，防止 Vue 编译，该指令可用于优化大量静态内容的渲染性能。修饰符 (modifier) 是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定，用于修改指令的默认行为。“Mustache”语法仅支持单一的表达式，必须是能够计算出结果的JavaScript 代码，而不是任意的JavaScript 代码。Vue 指令是以 v- 为前缀的特殊属性，Vue 提供了许多内置指令，下面列举一些比较常用的指令。
vue模板语法是什么？
weixin_66375317的博客
05-05 6179
vue模板语法是什么？
vue模板语法-插值详解
08-31
Vue 模板语法 - 插值详解 Vue 模板语法 - 插值详解是 Vue 框架中的一种模板语法，用于在 Vue 模板中插入动态数据。插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，...
Vue.js的模板语法详解
10-15
Vue.js 是一款流行的前端JavaScript框架，它通过使用简洁的模板语法，使得开发者能够声明式地将数据渲染进DOM中，实现数据和视图之间的动态同步。Vue.js模板语法的设计借鉴了Angular.js和Knockout.js等框架，并简化...
day01-Vue模板语法.zip
01-17
在"day01-Vue模板语法.zip"这个压缩包中，我们可以预见到内容可能涵盖了Vue的基础模板语法教程，这对于初学者或者想要深入理解Vue的开发者来说是非常宝贵的资源。 Vue模板语法是Vue.js的一个核心特性，它允许开发者...
Vue-jwt
秃头俱乐部
08-17 3867
目标：学会正确使用jwt1. JWT是什么?2. 为什么使用JWT3. JWT的工作原理4.JWT的验证过程5. JWT令牌刷新思路6.JWT组成HeaderPayload(负荷)signature 1. JWT是什么? JSON Web Token (JWT)，它是目前最流行的跨域身份验证解决方案 2. 为什么使用JWT JWT的精髓在于：“去中心化”，数据是保存在客户端的。 3. JW...
SPA项目开发之登录注册
秃头俱乐部
08-09 2958
目录1. vue 怎么引入和配置使用 element-ui 框架2. Vue+ElementUI 设计登陆页面3. 后台交互(axios/qs/vue-axios)4.案例Login.vueRegmain.jsaction.jshttp.jsindex.js编写代码的效果图 1. vue 怎么引入和配置使用 element-ui 框架 1使用vue-cli脚手架工具创建一个vue项目 vue ...
使用vue-cli搭建SPA项目
秃头俱乐部
08-06 598
本章目标：使用vue-cli来搭建vue项目前提：搭建好NodeJS环境什么是vue-cli?安装vue-cli使用脚手架vue-cli(2.X版)来构建项目**①使用脚手架创建项目骨架**②**运行完上面的命令后，我们需要将当前路径改变到SPA这个文件夹内，然后安装需要的模块**③**启动并访问项目**④停止项目添加element-ui模块package.json详解npm install/np...
Vuex的运用
秃头俱乐部
08-16 455
目录：什么是Vuex?vue中各个组件之间传值传值图解vuex使用步骤安装vuex创建store模块，分别维护state/actions/mutations/gettersactions.jsgetters.jsmutations.jsstate.js在store/index.js文件中新建vuex的store实例，并注册上面引入的各大模块index.js在main.js中导入并使用store实例...
如何在vue单页应用中使用百度地图
秃头俱乐部
10-24 347
如何在vue单页应用中使用百度地图 作为一名开发人员，每次接到开发任务，我们首先应该先分析需求，然后再思考技术方案和解决方案。三思而后行，这是一个好的习惯。 作为一名开发人员，每次接到开发任务，我们首先应该先分析需求，然后再思考技术方案和解决方案。三思而后行，这是一个好的习惯。 需求：本项目是采用vue组件化开发的单页应用项目，现需要在项目中引入百度的地图展示功能，用于展示所有项目的分布情况。搜索...
SPA项目开发的Mock、总线（BUS）
秃头俱乐部
08-12 296
本章目标：首页导航+左侧菜单1. Mock.js2. Mock.js使用步骤第一步： 安装mockjs依赖第二步： 引入第三步：目录和文件创建第四步：为每个*.vue定义单独的xxx-mock.js文件第五步：在index.js中导入xxx-mock.js，并添加拦截路由配置第⑥步：之后ajax请求便会被mock拦截了3.登陆与注册页面的跳转字符串对象命名的路由this.$router.push、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值