Vue模板语法(下)

于 2022-09-05 09:44:35 发布
阅读量166 收藏
点赞数 1
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hmjcxy/article/details/126698194
版权

目录

一、事件处理器

  二、表单综合案例

三、自定义组件

 四、组件通信

一、事件处理器

事件监听可以使用v-on 指令 ## 之前已学习

事件修饰符

  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>

注1：什么是事件冒泡?

按键修饰符

  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>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<style>
			.red{
				width: 400px;
				height: 400px;
				background-color: red;
			}
			.yellow{
				width: 300px;
				height: 300px;
				background-color: yellow;
			}
			.blue{
				width: 200px;
				height: 200px;
				background-color: blue;
			}
			.black{
				width: 100px;
				height: 100px;
				background-color: black;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div class="red" @click='red'>
				<div class="yellow" @click='yellow'>
					<div class="blue" @click='blue'>
						<div class="black" @click.stop='black'></div>
					</div>
				</div>
			</div>
			<p>提交答案</p>
			<button @click.once='buton'>
				提交
			</button>
			
			<p>按键修饰符</p>
			<input v-on:keyup.enter="anjian"/>
			
		</div>
	</body>
	<script type="text/javascript">		
		new Vue({
			el:'#app',
			methods: {
				red() {
					alert("red")
				},
				yellow(){
					alert("yellow")
				},
				blue(){
					alert("blue")
				},
				black(){
					alert("black")
				},
				buton(){
					alert("提交成功！！")
				},
				anjian(){
					alert("按键提交")
				}
			}
		})
	</script>
</html>

 效果​​​​​​

  二、表单综合案例

<!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>
	</head>
	<body>
		<div id="app">
			<ul>
				<li>
					<p>表单</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: 'rap'
					}, {
						id: 3,
						name: '篮球'
					}],
					hobbies: [],
					types: [{
						id: 1,
						name: 'V'
					}, {
						id: 2,
						name: 'U'
					}, {
						id: 3,
						name: 'E'
					}],
					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>

三、自定义组件

5. vue组件

  5.1 组件简介

      组件(Component)是Vue最强大的功能之一

      组件可以扩展HTML元素，封装可重用的代码

      组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

  5.2 全局和局部组件

      全局组件：Vue.component(tagName, options)，tagName为组件名，options为配置选项。

      局部组件: new Vue({el:'#d1',components:{...}})

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

      <tagName></tagName>

  5.3 props

      props是父组件用来传递数据的一个自定义属性。

      父组件的数据需要通过props把数据传给子组件，子组件需要显式地用props选项声明 "prop"

   注1：因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods

        以及生命周期钩子等。仅有的例外是像el这样根实例特有的选项。

   注2：当我们定义这个 <button-counter> 组件时，你可能会发现它的data并不是像这样直接提供一个对象

        data: {

          count: 0

        }

        取而代之的是，一个组件的data选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：

        data: function () {

          return {

            count: 0

          }

        }

    注3：定义组件名的方式有两种

         短横线分隔命名(建议使用)

         Vue.component('my-component-name', { /* ... */ })，引用方式：<my-component-name>

         首字母大写命名

         Vue.component('MyComponentName', { /* ... */ })，引用方式： <my-component-name>和<MyComponentName>都是可接受的   

    注4：HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，

         camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

         props: ['postTitle'],<my-tag post-title="hello!"></my-tag>

    注5：props: ['title', 'likes', 'isPublished', 'commentIds', 'author']

         希望每个 prop 都有指定的值类型

         props: {

           title: String,

           likes: Number,

           isPublished: Boolean,

           commentIds: Array,

           author: Object,

           callback: Function,

           contactsPromise: Promise // or any other constructor

         }

html代码

<!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>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<!-- 定义组件不能用驼峰命名 -->
			<!-- 需求是：当引用一个myButton，也页面上一个独特标记按钮 -->
			<my-button m="小何"></my-button>
			<my-button m="哦豁"></my-button>

			<!-- <button onclick=""></button> -->
		</div>
	</body>
	<script type="text/javascript">
		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++;
				}
			}
		});
		// 绑定边界	ES6具体体现
		new Vue({
			el: '#app',
			data() {
				return {};
			}
		})
	</script>
</html>

 四、组件通信

6. 自定义事件

   监听事件：$on(eventName)

   触发事件：$emit(eventName)

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

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

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

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

   注2：事件名

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

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

html代码

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

 

糖心何包蛋·
关注
一个“非常简单”的Vue表达式编辑组件
梅花寺
12-13 2773
嗯，，，又是一个公司的需求产生的想法😓😓为了配合后端使用的规则引擎，实现事件自动上报、状态自动更新等功能，需要在后台管理的页面上增加一个规则配置模块，其中涉及到设备属性、事件、自定义参数、且或非逻辑运算等多种配置元素。在外面找了一下没有找到符合界面设计和操作方式的开源库/组件，所以内部自己根据需求实现了一个简单的表达式编辑组件。总的来说，这个组件的功能看起来很复杂，但是核心逻辑其实很简单，只是需要处理好焦点在不同元素上时的事件绑定（现在这个组件的焦点判断也还有一点问题）。
vue模板语法
yzq102873的博客
09-02 889
vue模板语法
Vue基础语法(二)
南下在线的博客
08-22 285
1. 样式绑定 1.1 class绑定 使用方式：v-bind:class="expression" expression的类型：字符串、数组、对象 1.2 style绑定 v-bind:style="expression" expression的类型：字符串、数组、对象
一、vue基础语法（轻松入门vue）
莫安逸无风雪
04-13 1万+
Vue基础语法 Vue是一套用于构建用户界面的渐进式框架 Vue的核心库只关注视图层，不仅容易上手，还便于与第三方既有项目整合 一、HelloWord 引入vue.js 创建一个带有id的dom 编写vue实例，el挂载点对应HTMLdom，data数据 <script src="vue.js"></script> <div id="app"> {{...
Vue学习笔记 —— Vue.directive自定义指令
weixin_43340295的博客
09-16 210
Vue.directive —— 自定义指令 Vue中除了默认设置的核心指令( v-model 和 v-show )，Vue 也允许注册自定义指令，可以对纯 DOM 元素进行底层操作，这时候就会用到自定义指令。 创建全局自定义指令 使用Vue.directive()创建全局自定义指令。其中my-color为指令名称。 定义指令名称的时候，不需要加v-前缀，调用的时候，必须在名称前加上v-。 Vue.directive('my-color', function(el, binding, vnode){
Vue模板语法
qq_62331938的博客
09-02 2530
本篇文章将要分享的内容为Vue的模板语法。
vue模板语法-插值详解
08-31
Vue 模板语法 - 插值详解 Vue 模板语法 - 插值详解是 Vue 框架中的一种模板语法，用于在 Vue 模板中插入动态数据。插值是 Vue 模板语法中的一种基本语法，用于将数据绑定到模板中。 文本插值 在 Vue 模板语法中，...
Vue.js的模板语法详解
10-15
Vue.js 是一款流行的前端JavaScript框架，它通过使用简洁的模板语法，使得开发者能够声明式地将数据渲染进DOM中，实现数据和视图之间的动态同步。Vue.js模板语法的设计借鉴了Angular.js和Knockout.js等框架，并简化...
vue基础语法02
m0_67514201的博客
08-05 242
Vue.component('MyComponentName', { /* ... */ })，引用方式： 和都是可接受的。除了Vue自带的指令(v-on|v-model)等, Vue也允许注册自定义指令，根据作用范围分为：全局指令和局部指令(当前的vue实例内部)不同于组件和prop，事件名不存在任何自动化的大小写转换。value: 指令的绑定值， 例如： v-my-directive="1 + 1", value 的值是 2。...
Vue项目url中的＜%= BASE_URL %＞
空城三梦
11-29 3257
vue-cli 创建的一个项目中执行命令vue inspect > output.js将 vue-cli 中webpack 的配置信息导出到 output.js 文件，会有一段代码： new DefinePlugin( { 'process.env': { NODE_ENV: '"development"', BASE_URL: '"/"' } } ), 在 webpack 中全局声明了 BASE_...
Vue
阳神
08-24 640
Vue.js 课程介绍 什么是Vue.js Vue.js 是目前最火的一个前端框架，React是最流行的一个前端框架（React除了开发网站，还可以开发手机App， Vue语法也是可以用于进行手机App开发的，需要借助于Weex） Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，并成为前端三大主流框架！ Vue.js 是一套构建用户界面的框架，只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。（Vue有配套的第三方类库，可以整合起来做大型项目的开发
Vue学习(二)自定义指令
热门推荐
欢迎访问
12-08 2万+
Vue借鉴了AngularJS中的Directive的概念，不仅支持默认设置的核心指令（如[上文](https://syd192.github.io/2016/11/11/vue-learn/#more)提到的`v-bind`等），还支持自定义指令。
VUE(未写完)
常蓬的博客
09-07 910
文章目录一.如何学习VUE二.VUE的概念三.MVVM或MV*如何使用VUE 一.如何学习VUE 培养思路，增强逻辑感，模仿他人代码 1.记住要：多做、多查、多问、多看 多做 【多做练习 ，多做项目，多做案例】 多查 【度娘】 多问 【碰见没有思路的问题，一定要，】 多看 【多看看别人代码，多人人家的思路】 2.四词真言 WWWH what ? 是什么？ why ? 为什么要学 when ? 什么时候用它 here ? 在哪用？ 二.VUE的概念 它是一个渐进式J
vue 初级
weixin_30437337的博客
12-24 210
　　 模板语法 TPshop中国开源商城系统 - 开源学习系统立即查看 > Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。 在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计...
Vue中通过TagName获取的DOM节点，控制台打印后HTMLConnection有内容，但是length为0
xiaofeiwei521的博客
01-22 1141
问题还原： 项目中在实现Excel在线预览时，通过js-xlsx插件将Excel转成html后，但是没有样式。所以自己通过getElementsByTagName(‘td’)获取所有td的DOM节点进行样式增加。获取到HTMLConnection节点并转成数据组后，发现有内容但是length为0，无法进行遍历操作等。 截图如下图所示： 解决方案： 这是由于DOM还未加载办成就进行了操作。所以将DOM操作的相关代码放到this.$nextTick中。 代码如下： this.excelView = XLSX.
vue标签
qq_53725689的博客
01-15 901
vue
vue的基本语法
sjgllllll的博客
06-04 136
二、基本语法 1、基本数据渲染和指令 创建 01-基本数据渲染和指令.html 你看到的 v-bind 特性被称为指令。指令带有前缀 v除了使用插值表达式{{}}进行数据渲染，也可以使用 v-bind指令，它的简写的形式就是一个冒号（:） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device
Vue组件注册
Mikon_0703
12-17 186
一、全局组件注册 1.Vue.component直接注册 Vue.component(tagName, option) tagName命名规则： 1）短横线 如：button-counter 2）首字母大写 如：ButtonCounter option：template、methods、data data必须为函数 为什么data为函数？（官方文档）当一个组件被定义时，data必须声明为返回一个初始数据对象的函数，因为组件可能被用来创建多个实列。如果data仍然是一个纯粹的对象，则所有的实列将共享引
Vue.js模板语法深度解析
在Vue.js中，模板语法是实现数据绑定和响应式更新的关键部分。本篇文章将深入讲解Vue.js的常用模板语法。 1. 文本渲染 在Vue.js中，我们可以使用`{{ }}`插值表达式来实时渲染文本内容。当数据模型发生变化时，这些...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值