vue模板语法下集

最新推荐文章于 2024-07-23 21:45:00 发布
最新推荐文章于 2024-07-23 21:45:00 发布
阅读量86 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_53601862/article/details/121106979
版权

目录

一.样式绑定

二. 事件处理器

 三.表单

四.组件：

五.组件通信

一.样式绑定

        样式绑定可以分为两种：

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

代码：

<!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>
	<style type="text/css">
		.f200{
			font-size: 200px;
		}
	</style>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<h3 :class="f200" :style="colorred">{{msg}}</h3>
			
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界  ES6具体体现
		// 变量定义不能用中划线
		new Vue({  
			el:'#app',
			data(){
				return {
					msg:'哈利波特',
					// colorred:'color: red;',
					f200:'f200'
					};
				
			}
			
		})
		
		
	</script>
</html>

  运行：


 2. style绑定
      v-bind:style="expression"
      expression的类型：字符串、数组、对象

运行：

注意：变量定义不能用中划线

二. 事件处理器

      2.1 冒泡事件（案例）：

代码：

<!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>
		<style>
			.red {
				width: 400px;
				height: 400px;
				background-color: red;
			}

			.orange {
				width: 300px;
				height: 300px;
				background-color: orange;
			}

			.blue {
				width: 200px;
				height: 200px;
				background-color: blue;
			}

			.black {
				width: 100px;
				height: 100px;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<p>冒泡事件</p>
			<div class="red" @click="red">
				<div class="orange" @click="orange">
					<div class="blue" @click="blue">
						<div class="black" @click.stop="black"></div>
						阻止冒泡 
					</div>
				</div>
			</div>
			<p>提交答案</p>
			<button @click.once="dosub">提交</button>
			<p>案件修饰符</p>
			<input v-on:keyup.enter="dosub" />
		</div>
	</body>
	<script type="text/javascript">
		// 绑定边界  ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {


				};
			},
			methods:{
				red(){
					alert("red");
				},
				orange(){
					alert("orange");
				},
				blue(){
					alert("blue");
				},
				black(){
					alert("black");
				},
				dosub(){
					alert("正在提交")
				}
			}

		})
	</script>
</html>

运行：

        当按下黑色区域是会一次弹出 black>blue>orange>red，按下其他区域也会依次淡出外层颜色。

阻止冒泡：

            在click处添加.stop即可。

<div class="black" @click.stop="black"></div>
                        <!-- 阻止冒泡 -->

2.2限制点击次数

<p>提交答案</p>
			<button @click.once="dosub">提交</button>

运行：  

       只能点击一次提交。

2.3案件修饰符        

<p>案件修饰符</p>
			<input v-on:keyup.enter="dosub" />

运行：

      点击回车键弹出正在提交

 三.表单

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

运行：

        其中的标签在上篇中有分享，将其中的各个标签进行应用；

四.组件：

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

      直白的讲就是在没用html元素的情况下自己定义一个html元素，有利于简化开发代码。

      组件又分为两种组件：

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

      与过滤有相似之处，定义方式也差不多

案例：

       需求是： 当应用一个mybutton，页面上出现一个独特标记的按钮

       首先在边界里面定义一个mybutton，

   组件代码：

Vue.component("my-button", {
		//props是定义组件中的变量的
		props:["m"],
		// template:代表了自定义组件在页面上显示的内容
		template:"<button v-on:click='incrn'>我被{{m}}点击{{n}}次</button>",
		data:function(){
			return {
				n:1
			}
		},
		methods:{
			incrn(){
				this.n++;
			}
		}
	});

运行：

        每次点击都会增加一次 ，这个组件就是我们根据自己的需求所定义的。

五.组件通信

      所谓的组件通信就是将组件和vue相关联，上面组件中的methods只能被组件本身所调用，组件通信就是可以在vue中调用methods

代码：

<!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>{{ts}}</h3>
					<p>vue组件</p>
					<!-- 使用自定义组件my-button的时候进行传值(相当于jsp标签往助手类中传值的概念) -->
					<my-button m="小李飞刀" v-on:three-click="xxx"></my-button>
				</li>
			</ul>
		</div>
	</body>
	<script>
		// 定义全局组件的方式
		Vue.component('my-button', {
			props: ['m'],
			template: '<button v-on:click="doClickMyButton">我是一个自定义组件，被{{m}}点了{{n}}次</button>',
			data: function() {
				return {
					n: 0
				};
			},
			methods: {
				doClickMyButton: function() {
					console.log('doClickMyButton方法被调用');
					this.n++;
					if (this.n % 3 == 0) {
						//触发自定义组件定义的事件，这里可以传递任意个参数
						//但是触发的事件绑定的函数要与参数个数一致
						this.$emit('three-click', this.n, 'http://www.javaxl.com', '小李飞刀');
					}
				}
			}
		})
		var vm = new Vue({
			el: "#app",
			data: {
				ts: new Date().getTime()
			},
			methods: {
				xxx:function(a,b,c){
					console.log("自定义事件绑定的函数被执行");
					console.log(a);
					console.log(b);
					console.log(c);
				}
			}
		});
	</script>
</html>

运行：

       当通过$emit时会触发外面绑定的自定义事件<my-button m="小李飞刀" v-on:three-click="xxx"></my-button>所对应的函数通过自定义事件完成组件之间的通信（自定义组件与vue组件之间的通信）

be honoured.IT
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue模板语法-插值详解
08-31
Vue 模板语法 - 插值详解 Vue 模板语法 - 插值详解是 Vue 框架中的一种模板语法，用于在 Vue 模板中插入动态数据。插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，...
Vue基础之模板语法介绍
m0_73647713的博客
09-18 971
上篇我分享了关于Vue的入门，简单的入了个门。本篇文章将要分享的内容为Vue的模板语法。
vue1：模板语法
menglong0329的博客
05-21 160
Vue.js 模板语法 Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。 Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。 结合响应系统，在应用状态改变时， Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。 插值 文本 数据绑定最常见的形式就是使用 {{...}}（双大括号）的文本插值： <div id="app"> <p>{{ mess
Vue.js 学习笔记（二）vue模板语法
qq_44648936的博客
02-27 565
一、模板语法 Vue模板语法实现前端渲染，前端渲染即把数据填充到html标签中。 数据（来自服务器）+模板（html标签）=前端渲染（产物是静态html内容） 二、插值 1. 文本插值 用双大括号插入文本，数据可变，解释为普通文本 <div id="app"> <!-- 会与实例中的【data】中的属性绑定在一起，并且数据实现同步--> <h1>{{message}}</h1> </div></body> <sc
vue详解
m0_63947250的博客
06-01 367
前言:ssm由spring ,springmvc,mybatis组成 ssm:为框架集 jdk:java开发工具包 jvm:虚拟机，class文件 jre:java运行环境，在平台之上 jdk>jre>jvm 真正的网站组成:三大件，域名，网络通信，页面跳转，状态管理 jsp:动态网页开发技术 dom:文本对象模型(接口) SEO:搜索引擎优化 1:vue:一套用于构建用户界面的渐进式框架 特点:只是关注视图层(前端三大件)(视图作用 用户看，刷新后台数据),实现模块化开.
Vue框架学习（五）
qq_46087627的博客
01-14 264
Vue的全局API
Vue模板语法中数据绑定的实例代码
10-16
在Vue模板语法中，数据绑定是核心特性之一，它允许开发者轻松地将数据模型与DOM元素关联起来，实现视图和数据的同步更新。下面我们将详细讨论Vue模板语法中的数据绑定及其应用。 1. 单向数据绑定 单向数据绑定是...
day01-Vue模板语法.zip
01-17
在"day01-Vue模板语法.zip"这个压缩包中，我们可以预见到内容可能涵盖了Vue的基础模板语法教程，这对于初学者或者想要深入理解Vue的开发者来说是非常宝贵的资源。 Vue模板语法是Vue.js的一个核心特性，它允许开发者...
Vue 3模板语法.pdf
02-21
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层组件实例的数据。所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成...
学习Vue日记第三天
qq_43061473的博客
06-03 161
钩子函数 beforeCreate和created的使用//创建前和创建后 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initi
Vue之模板语法(下)
chenkang_ck的博客
08-22 199
1. 样式绑定 1.1 class绑定 使用方式：v-bind:class=“expression” expression的类型：字符串、数组、对象 1.2 style绑定 v-bind:style=“expression” expression的类型：字符串、数组、对象 2. 事件处理器 事件监听可以使用v-on 指令 之前已学习 2.1 事件修饰符 Vue通过由点(.)表示的指令后缀来调用修饰...
vue中的指令
越界的博客
04-17 487
vue中的指令 插值表达式 vue中如果需要在html标签的“内容区域”中表现数据，就可以使用**{{}}双花括号**，这个技术称为插值表达式 语法： <标签> {{ 表达式 }} </标签> 表达式：变量、常量、算术运算符、比较运算符、逻辑运算符、三元运算符等等 使用示例： <body> <div id="app"> &l...
十一、VUE基础学习篇（组件化component、components）-全局/局部组件、父组件/子组件、动态数据绑定/数据存放问题
IT_CREATE的博客
06-07 1028
码云实时更新学习demo地址：https://gitee.com/dxl96/vuexuexi VUE基础篇（组件化component、components） 1、组件化的概念 ■人面对复杂问题的处理方式   口任何一个人处理信息的逻辑能力都是有限的   口所以,当面对一个非常复杂的问题时,我们不太可能一次性搞定一大堆的内容。   口但是,我们人有一种天生的能力,就是将问题进行拆解。   口如果将一个复杂的问题,拆分成很多个可以处理的小问题,再将其放在整体当中,你会发现大的问题也会迎刃而解。 ■组件化也是类
vue3 学习笔记17 -- 基于el-menu封装菜单
最新发布
weixin_46328739的博客
07-23 242
前提条件：组件创建完成。
Python Formulas模型以JSON格式文件导出导入
Humbunklung的专栏
07-23 338
Python Formulas库，JSON格式导出导入。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 296
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
【vueUse库Time模块各函数简介及使用方法--全篇】
xiejunlan的博客
07-23 737
vueUseTime函数基本使用示例实现使用方法注意假设的 `useTimeAgo` 函数使用方法。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 299
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
Vue的模板编译：深入理解渲染函数与预编译模板
哎 你看的博客
07-22 1092
Vue.js 是一个用于构建用户界面的渐进式框架，它的核心特性之一是其响应式和声明式的模板语法。Vue 的模板不仅仅是简单的字符串插值，它们会被编译成渲染函数，这个过程涉及到将模板字符串转换成 JavaScript 代码。本文将深入探讨 Vue 的模板编译过程，并讨论如何使用预编译模板来提高应用性能。
vue模板语法里读取数组的某一项
05-26
在Vue模板语法中，要读取数组的某一项，可以使用以下方式： ``` {{ array[index] }} ``` 其中，array是你要读取的数组名，index是数组中要读取的元素的下标。例如，如果你有一个名为`list`的数组，想要读取第二个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值