Vue模板语法（二）

最新推荐文章于 2025-04-23 23:38:38 发布
原创 最新推荐文章于 2025-04-23 23:38:38 发布 · 194 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

1. 样式绑定

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

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

2. 事件处理器

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

之前已学习

2.1 事件修饰符

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>

3. vue表单

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

3.1 常用控件
文本框/密码框/文本域/隐藏域

单选复选框/多选复选框

单选按钮

下拉框
详细代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>样式绑定和事件处理</title>
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<style type="text/css">
			.a {
				color: red;
			}

			.b {
				color: blue;
			}

			.c {
				font-size: 30px;
			}

			div {
				padding: 50px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<h3>样式绑定</h3>
					<span v-bind:class="aClz">AAAA</span>
					<span v-bind:class="bClz">BBBB</span>
					<span v-bind:class="cClz">AAAABBBB</span>
				</li>
				<li>
					<h3>事件处理-阻止事件冒泡</h3>
					<div style="background-color: #FF0000;width: 300px;height: 300px;" v-on:click="a">
						<div style="background-color: gold;width: 200px;height: 200px;" v-on:click="b">
							<div style="background-color: green;width: 100px;height: 100px;" v-on:click="c">
								<div style="background-color: floralwhite;width: 50px;height: 50px;" v-on:click.stop="d"></div>
							</div>
						</div>
					</div>
				</li>
				<li>
					<h3>事件处理-按钮只能点击一次</h3>
					{{info}}<input type="text" v-model="msg" />
					<button @click="e">无限次点击</button>
					<button v-on:click.once="e">只能点击一次</button>
				</li>
				<li>
					<h3>按键修饰符</h3>
					{{info}}<input type="text" v-model="msg" v-on:keyup.Enter="e" />
					<button @click="e">无限次点击</button>
					<button v-on:click.once="e">只能点击一次</button>
				</li>
				<li>
					<h3>select标签</h3>
					<select name="hobby" v-model="selectedIds">
						<option v-for="d in datas" v-bind:value="d.id">{{d.name}}</option>
					</select>
					选中的值：{{selectedIds}}
				</li>
				<li>
					<h3>checkbox标签</h3>
					<div v-for="d in datas">
						<input type="checkbox" :value="d.id" name="likes" v-model="selectedIdsArr"/>{{d.name}}
					</div>
					选中的值：{{selectedIdsArr}}
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		// 作用将Vue实例挂载到具体的边界,那么这个边界就会被vue这个渐进式的框架所管理
		// 注意:边界不能有兄弟标签,边界一定是跟标签
		new Vue({
			el: "#app",
			data: {
				aClz: 'a',
				bClz: 'b',
				cClz: ['b', 'c'],
				msg: '',
				info: '',
				datas: [{
					id: 1,
					name: '象棋'
				}, {
					id: 2,
					name: '五子棋'
				}, {
					id: 3,
					name: '围棋'
				}],
				selectedIds:'',
				selectedIdsArr:[]
			},
			methods: {
				a() {
					alert('a事件触发');
					alert(this.selectedIds);
				},
				b() {
					alert('b事件触发');
				},
				c() {
					alert('c事件触发');
				},
				d() {
					alert('d事件触发');
				},
				e() {
					this.info = this.msg;
					this.msg = '';
				}
			}
		})
	</script>

</html>

结果：
在这里插入图片描述

在这里插入图片描述
一个完整的Vue表单案例：

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

在这里插入图片描述

4. vue组件

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

4.2 全局和局部组件
全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。
局部组件: new Vue({el:’#d1’,components:{…}})

  注册后，我们可以使用以下方式来调用组件： 
  <tagName></tagName>

4.3 props
props是父组件用来传递数据的一个自定义属性。
父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 “prop”

  监听事件：$on(eventName) 
  触发事件：$emit(eventName) 
  结论：
  父传子通过prop传递数据
  子传父通过事件传递数据

详细代码：

<!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="app">
			<ul>
				<li>
					<h3>局部组件的注册</h3>
					<!-- 侵入性 -->
					<my-button></my-button>
					<!-- <button @click="doSubmit">被点击了n次</button> -->
				</li>
				<li>
					<h3>全局组件的注册</h3>
					<my-button2></my-button2>
				</li>
				<li>
					<h3>组件的通信(父传子)</h3>
					<my-button m='zs'></my-button>
				</li>
				<li>
					<h3>组件的通信(子传父)</h3>
					<my-button m='ls' @three-click="xxx"></my-button>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		// 作用将Vue实例挂载到具体的边界,那么这个边界就会被vue这个渐进式的框架所管理
		// 注意:边界不能有兄弟标签,边界一定是跟标签
		Vue.component('my-button2',{
			template:'<button  @click="doSubmit">被点击了{{n}}次</button>',
			data(){
				return{
					n:0
				}
			},
			methods:{
				doSubmit(){
					this.n+=1;
				}
			}
		})
		new Vue({
			el: "#app",
			data(){
				return {
				}
			},
			components:{
				'my-button':{
					props:['m'],
					template:'<button  @click="doSubmit">被{{m}}点击了{{n}}次</button>',
					data(){
						return{
							n:0,
							zhedie:'折叠效果'
						}
					},
					methods:{
						doSubmit(){
							this.n+=1;
							// 注册一个事件,让外部调用然后顺便接收内部的值
							if (this.n % 3 == 0) {
								this.$emit('three-click', this.zhedie);
							}
						}
					}
				}
			},
			methods:{
				xxx(v){
						alert(v);
				}
			}
		})
	</script>

</html>

结果：
在这里插入图片描述

打桥位lisp_通用打印函数，可指定参数，可打印pdf
weixin_39517202的博客
12-22 1044
[code="lisp];打印函数，lujing可为nil，orpdf为T或nil，为T是打印pdf，为nil是打印到设备(defun gm-dayin(dayinji tufu p1 p2 xiankuan fenshu lujing orpdf yulan / acaddoc fangxiang jixu medianame mspace p3 plot pointtemp1 pointtem...
vue模板语法
yzq102873的博客
09-02 1081
vue模板语法
React Native backgroundColor 的颜色值
热门推荐
张拭心的博客 shixinzhang
07-21 1万+
React Native 的 css 跟 web开发中css还是很相似的，其中 backgroundColor 支持的颜色值与 css 一致，为方便查找写在这里。 其他样式可以参考 CSS 样式网站 ： http://css.doyoe.com/#basic Color Color Name HEX RGB   black
【Vue】模板语法
sishihao的博客
08-21 1602
在html中通过{{}}（双大括号）中可以把Vue对象中的数据插入到网页中。并且只要Vue对象上对应的值发生改变了，那么html中双大括号中的值也会立马改变。ref } from 'vue' let username = ref('张三') function onModifyUsername() {
vue中的模板语法
无远弗届
06-17 1684
Vue.js，简称Vue，是一个用于构建用户界面的渐进式JavaScript框架。自从2014年首次发布以来，Vue因其简洁、易学和高效而迅速赢得了开发者的青睐。Vue的核心库只关注视图层，易于与其他库或现有项目整合，同时也可以支持通过各种插件和库构建复杂的单页应用（SPA）。Vue模板语法是一种声明式的标记语言，用于将组件的数据渲染进DOM。它允许开发者使用HTML作为模板，并通过Vue的指令来增强HTML的功能，实现数据和视图的动态绑定。Vue允许开发者创建自己的指令，以封装复杂的DOM操作逻辑。
Vue模板语法
qq_62331938的博客
09-02 2698
本篇文章将要分享的内容为Vue的模板语法。
Vue3 模板语法
2301_82023822的博客
04-23 1295
特性v-ifv-showv-for（需key渲染方式条件为假时销毁元素始终渲染，切换 CSS动态生成列表项性能初始渲染开销低切换开销低列表变化时依赖key优化适用场景不频繁切换的条件频繁显示/隐藏动态列表数据。
Vue 模板语法
sinat_38021004的博客
09-09 1664
模板语法 Vue 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。 也可以不用模板，直接写渲染 (render) 函数，使用可选的 JSX 语法。 模板 template 的三种写法 1. V
Vue 模板语法-插值
zhanchulan的博客
03-06 839
Vue 的模板语法非常灵活，其中最基础也是最常用的语法就是插值。需要注意的是，在插值语法中，只能使用最基础的 JavaScript 表达式，不能使用语句或控制流语句，例如 if、for 等等。在属性中使用插值语法也很容易，只需要将需要动态更新的数据包裹在 {{ }} 中，然后将整个表达式作为属性的值即可。在指令中使用插值语法和在属性中使用类似，将要动态更新的数据包裹在 {{ }} 中，然后将整个表达式作为指令的值。在文本节点中使用插值语法非常简单，只需要将需要动态更新的数据包裹在 {{ }} 中即可。
Vue：模板语法-插值
ChinaDragon10的博客
05-30 1044
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。
Vue模板语法详解.pdf
12-09
Vue模板语法是Vue.js框架的核心特性之一，它允许开发者以声明式的方式将数据绑定到DOM中。Vue的模板是基于HTML的扩展，它通过一些特殊的语法来实现数据和DOM的同步。模板语法包括数据绑定、指令、属性绑定等，使得...
Vue模板语法转小程序语法，让你可以用vue模板语法来写小程序.zip
最新发布
09-18
Vue模板语法转小程序语法的技术方案，就是为了解决Vue开发者在转向小程序开发时可能遇到的障碍。通过这种方式，开发者可以继续使用他们熟悉的Vue模板语法来编写小程序。这种技术的实现，使得原本只适用于Vue的模板...
vue模板语法-插值详解
08-31
Vue 模板语法 - 插值详解 Vue 模板语法 - 插值详解是 Vue 框架中的一种模板语法，用于在 Vue 模板中插入动态数据。插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，...
vue+elementUI完成登陆
ZYC123121的博客
08-30 2958
1、spa项目完成登录注册布局 安装开发模块 npm install element-ui -S npm install axios -S npm install qs -S npm install vue-axios -S 引入main.js配置： // The Vue build version to load with the `import` command // (runtime-on...
Vue模板语法（一）
ZYC123121的博客
08-21 759
1. 模板语法 1.1 插值 1.1.1 文本 {{msg}} 1.1.2 html 使用v-html指令用于输出html代码 1.1.3 属性 HTML属性中的值应使用v-bind指令 1.1.4 表达式 Vue提供了完全的JavaScript表达式支持 详细代码： <!DOCTYPE html> <html> <head> <meta chars...
Quartz入门
ZYC123121的博客
12-02 489
目录1、Quartz简介及应用场景1. Quartz介绍2.quartz的应用场景大致分为两类：3. Quartz的触发器4. 存储方式核心类和核心类之间关系quartz相关表达式2、Quartz简单触发器 SimpleTrigger介绍3、Quartz表达式触发器CronTirgger介绍、4、Quartz中参数传递5、Spring task Vs Quartz 1、Quartz简介及应用场景 ...
jwt
ZYC123121的博客
09-08 412
1. JWT是什么 JSON Web Token (JWT)，它是目前最流行的跨域身份验证解决方案 2. 为什么使用JWT JWT的精髓在于：“去中心化”，数据是保存在客户端的。 传统开发对资源的访问限制利用session完成图解： 3. JWT的工作原理 是在服务器身份验证之后，将生成一个JSON对象并将其发送回用户，示例如下： {“UserName”: “Chongchong”,“Rol...
Linux
ZYC123121的博客
10-09 387
Linux是什么 Linux是一种自由和开放源码的类UNIX操作系统。它能运行主要的Unix工具软件、应用程序和网络协议，支持32位和64位硬件。该操作系统的内核由林纳斯·托瓦兹于1991年10月5日首次发布。 Linux环境搭建及项目部署 一.VMWare安装图解 1.安装包如下，双击安装 安装步骤直接一直下一步就好了。 在第一次启动该软件时，需要输入注册码（也可自行到百度上找）： 注册码：F...
Docker网络配置
ZYC123121的博客
12-24 380
目录1、Docker网络配置2、Docker部署SpringCloud项目 1、Docker网络配置 Docker网络模式介绍 Docker在创建容器时有四种网络模式：bridge/host/container/none，bridge为默认不需要用–net去指定，其他三种模式需要在创建容器时使用–net去指定 1.bridge模式(默认模式) docker run时使用–net=bridge，这种...
掌握Vue模板语法，快速构建前端界面
资源摘要信息:"Vue模板语法" Vue.js是一个用于构建用户界面的渐进式JavaScript框架。它主要由模板语法、组件系统和Vue实例构成。模板语法是Vue.js中一个重要的组成部分，允许开发者声明式地将数据渲染进DOM系统中。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值