【溯源篇】从头看vue(二)——指令之v-on、v-model

news/2024/7/10 3:15:03 标签: vue

学习地址:https://www.bilibili.com/video/BV1mz4y127UG?p=2

v-on

<!-- 添加点击事件用之前:-->
<!-- html-->
<div id="app">
	<h2 onclick="alert(123)">{{mes}}</h2>
</div>
<!-- js-->
<script type="text/javascript>
	var vm = new Vue({
		el:'app',
		data:{
			mes:'随便写点内容'
		}
	})
</script>

<!-- 添加点击事件用v-on:-->
<!-- html-->
<div id="app">
	<!-- v-on:click
	v-on:dbclick
	v-on:mouseover
	简写方式:@
	-->
	<h2 v-on:click="fun">{{mes}}</h2>
</div>
<!-- js-->
<script type="text/javascript>
	var vm = new Vue({
		el:'app',
		data:{
			mes:'随便写点内容'
		},
		methods:{
			// es6箭头函数写法:fun(){...}
			fun:function(){
				alert(123);
			}
		}
	})
</script>

v-model双向绑定

<!-- html-->
<div id="app">
	<h2>{{mes}}</h2>
	<input v-model="mes"></input>
</div>
<!-- js-->
<script type="text/javascript>
	var vm = new Vue({
		el:'app',
		data:{
			mes:'随便写点内容'
		}
	})
</script>


http://www.niftyadmin.cn/n/1486244.html

相关文章

C++ 公有继承(Zz)

publicprotectedprivate公 有继承publicprotected不可见私有继承privateprivate不 可见保护继承protectedprotected不可见对于公有继承方式(1) 基类成员对其对象的可见性&#xff1a;公有成员可见&#xff0c;其他不可见。这里保护成员同于私有成员。(2) 基类成员对派生类的可见…

SpringBoot09 自定义servlet、注册自定义的servlet、过滤器、监听器、拦截器、切面、webmvcconfigureradapter过时问题...

1 servlet简介 servlet是一种用于开发动态web资源的技术 参考博客&#xff1a;servlet基础知识 httpservlet详解 2 在springboot应用中添加servlet springboot的主servlet是DispacherServlet&#xff0c;它默认的url-pattern是“/”&#xff0c;如果我们还…

【溯源篇】从头看vue(三)——事件修饰符的使用方式(.prevent、.once、.self、.stop、.capture)

学习地址&#xff1a;https://www.bilibili.com/video/BV1mz4y127UG?p10 <body><div class"bgcolor" id"app"><!-- 内容--></div> </body> <script type"text/javascript">var vm new Vue({el: #app,// 数…

【溯源篇】从头看vue(四)——重新了解组件

官方文档&#xff1a;https://cn.vuejs.org/v2/guide/components.html 全局组件创建及全局组件data的使用&#xff1a; 1.基本示例(script中写主体&#xff09;&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8…

QT的setwindowflags的属性总结

:setWindowFlags(Qt::CustomizeWindowHint&#xff09;;//设置窗口标题栏自定义 setWindowFlags&#xff08;Qt::WindowMinimizeButtonHint&#xff09;;//设置窗口的标题栏只有最小化的按钮 setWindowFlags( Qt::WindowCloseButtonHint &#xff09;;//设置窗口的标题栏只有关…

将多个word文件合并为一个的方法

1.将要合并的word文件放入一个文件夹&#xff08;方便后期一下子选中&#xff09;&#xff1b; 2.如果对合并后的文件有顺序要求的话&#xff0c;可以在名称开头编好序号123456&#xff0c;然后按名称排序&#xff1b; 3.新建空白word用于汇总,点击插入-对象-对象中的文字&am…

话里话外:基于知识管理的企业核心流程识别

在全球经济一体化与市场一体化的趋势下&#xff0c;我国企业的生存环境发生了巨大变化。一方面&#xff0c;国家进一步开放了原来相对封闭的业务市场&#xff1b;另一方面&#xff0c;各行业中有实力的企业进入中国内地&#xff0c;使得市场竞争更加激烈。为了在竞争中占有一席…

EF 多线程TransactionScope事务异常事务EFTransaction类定义:与另一个进程被死锁在 锁 资源上,并且已被选作死锁牺牲品。请重新运行该事务。...

解决方案代码一&#xff1a;使用lock锁定 //对于锁推荐使用静态私有静态变量 private readonly static object _MyLock new object(); /// <summary> /// 事务&#xff0c; 多表修改 /// </summary> /// <param name"name"></param&…