首页 > 其他分享 >事件绑定-v-on指令的简写模式

事件绑定-v-on指令的简写模式

时间:2023-06-04 22:34:41浏览次数:33  
标签:count el Vue methods 绑定 vm 指令 简写 data

<!DOCTYPE html>
<html lange="en">
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 希望 Vue 能够控制下面的这个div,帮我们在把这个数据填充到 div 内部 -->
		<div id="app">
			<p>count的值是{{count}}</p>
			<!-- 在绑定事件处理函数的时候,可以使用()传递参数 -->
			<!-- v-on:指令可以被简写为 @ -->
			<button @click="addCount(2)">+1</button>
			<button @click="subCount">-1</button>
			<!-- <button v-on:click="addCount(2)">+1</button>
			<button v-on:click="subCount">-1</button> -->
		</div>

		<!-- 1.导入Vue的库文件,在weindow全局就有了Vue这个构造函数 -->
		<script src="lib/vue-2.6.12.js"></script>
		<!-- 2.创建Vue的实例对象 -->
		<script>
			//创建Vue的实例对象
			const vm = new Vue({
				// el 属性是固定的写法,表示当前vm实例要控制页面上的哪个区域,接收的值是一个选择器
				el: '#app',
				// data对象就是要渲染到页面上的数据
				data: {
					count: 0
				},
				// methods的作用,就是定义事件的处理函数
				methods: {
					addCount(n) {
						this.count += n
					},
					subCount() {
						this.count--
					}
				}
			})
		</script>
	</body>
</html>

标签:count,el,Vue,methods,绑定,vm,指令,简写,data
From: https://www.cnblogs.com/yang-young-young/p/17456540.html

相关文章

  • vue3元素标签属性的绑定
    <template> <divv-bind:id="main"v-bind:class="message">aaa</div></template><script> exportdefault{   data(){      return{         message:'active',         main:'mainid' ......
  • Vue插值语法,文本指令,事件指令v-on,属性指令v-bind
    Vue插值语法:总结:插值语法使用{{}}传入变量,相当于形参  script中data中传入变量值,相当于实参,vue将data的值传给{{}}中html中:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scr......
  • 6设计指令流水线-1【FPGA模型机课程设计】
    6设计指令流水线【FPGA模型机课程设计】前言推荐修改6设计指令流水线安排测试与结果指令流水线理论MIPS的一种简单实现基本的MIPS流水线指令流水线实现MIPS五段流水CPU设计视频中的测试代码基于单周期CPU的流水线设计代码设计流水寄存器的引脚设计IF_IDID_EXEX_MEMMEM_WB流水寄存......
  • 6设计指令流水线-3【FPGA模型机课程设计】
    6设计指令流水线-3【FPGA模型机课程设计】前言推荐6设计指令流水线-3安排测试与结果指令流水线理论MIPS的一种简单实现基本的MIPS流水线指令流水线实现MIPS五段流水CPU设计基于单周期CPU的流水线设计乘除流水线的设计原子流水线的设计代码设计EX_Mem附录0框架最后前言2023-5-25......
  • 【Unity】 HTFramework框架(四十四)【进阶篇】指令系统
    索引指令系统简单使用定义InstructionAgent编辑指令代码执行指令代码指令代码语法基本语法指令关键字注释支持的值类型标识符命名规范进阶使用运行时检视面板指令系统指令系统为Unity动态修补程序、热更新等提供了另一种补充方案,我们可以将任意一段指令代码即时编译并执行(请放心,......
  • 6设计指令流水线-2【FPGA模型机课程设计】
    6设计指令流水线-2【FPGA模型机课程设计】前言推荐6设计指令流水线-2安排测试与结果指令流水线理论MIPS的一种简单实现基本的MIPS流水线指令流水线实现MIPS五段流水CPU设计视频中的测试代码设计分析设计思路问题回答代码设计IDEXMEMRegFileMIPSInstMem附录3ID译码4EX执行5MEM......
  • Vue——属性指令、style和class、条件渲染、列表渲染、事件处理、数据双向绑定、过滤
    vm对象<body><divid="app"><h1>{{name}}</h1><button@click="handleClick">点我</button></div></body><script>//1写在data或method中的属性或方法,从vm中直接可以点出来//2method的函数中,如......
  • Vue——前端发展史、Vue介绍和使用、插值语法、文本指令、事件指令
    前端的发展史#1HTML(5)、CSS(3)、JavaScript(ES5、ES6):编写一个个的页面->给后端(PHP、Python、Go、Java)->后端嵌入模板语法->后端渲染完数据->返回数据给前端->在浏览器中查看 javascript=ECMAScript(5,6,13)+Dom+Bom#2Ajax的出现->后台发送异步请求,Ren......
  • JSP的page指令+九大内置对象+El表达式
    1. JSP的指令  49  - 指令的作用:指导JSP的翻译引擎如何工作(指导当前的JSP翻译引擎如何翻译JSP文件。)1.1 指令包括哪些呢?  49    - include指令:包含指令,在JSP中完成静态包含,很少用了。    - taglib指令:引入标签库的指令。这个到JJSTL标签库的时候再学习。现在先......
  • vue基础用法-内容渲染指令
    1.指令的概念指令(Directives)是vue为开发者提供的模板语法,用于辅助开发者渲染页面的基本结构。vue中的指令按照不同的用途可以分为如下6大类:内容渲染指令属性绑定指令事件绑定指令双向绑定指令条件渲染指令列表渲染指令注意:指令是vue开发中最基础、最常用、最简单的知识......