Vue初学——v-bind和v-on以及v-model

最新推荐文章于 2024-06-26 07:05:28 发布
最新推荐文章于 2024-06-26 07:05:28 发布
阅读量509 收藏 1
点赞数
分类专栏： Vue 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wfy17030212/article/details/121858515
版权

初学Vue，看到大佬写的代码总是很懵逼，为什么我学到的属性大佬都不用呢？

v-bind

V-bind是用来绑定属性到所在的控件上的，可以通过它对页面上属性进行绑定，但是它并不能实现双向绑定。

<div id='test'>

<input type="button" value="wao" v-bind:title="mytitle"/>

</div>

var vm=new Vue({
			el:'#test',				
			data:{
				mytitle:'this is my title'
			}
});

这当然是标准的写法，而学的深入一些，就发现，原来是有简写的方式的，v-bind的简写就是:

<div id='test'>

<input type="button" value="wao" :title="mytitle"/>

</div>

var vm=new Vue({
			el:'#test',				
			data:{
				mytitle:'this is my title'
			}
});

此时也可以再深入下，如果是普通的title属性，那里面的值就只是一个变量，而如果使用v-bind属性，那么会把里面的值当作是js的一个表达式，而表达式就意味着更多的可能，比如以下代码

<div id='test'>

<input type="button" value="wao" :title="mytitle+'123'"/>

</div>

var vm=new Vue({
			el:'#test',				
			data:{
				mytitle:'this is my title'
			}
});

这时vue会把这个title中的值当作表达式全部输出，结果就为this is my title123

v-on

v-on其实就是相当于js中的各种方法如onclick,mouseover,mouseenter

<div id='test'>

<input type="button" value="按钮" v-on:click="show" />

</div>

var vm=new Vue({
			el:'#test',				
			methods:{
				show:function() {
					alert('Hello World')
				}
			}
});

它的简写是@

<div id='test'>

<input type="button" value="按钮" @click="show" />

</div>

var vm=new Vue({
			el:'#test',				
			methods:{
				show:function() {
					alert('Hello World')
				}
			}
});

v-model

v-model真的是可以实现双向绑定，所谓双向，就是说页面上的数据可以转到model中，而model中的也可以传到页面上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>		
		<div id="app">
			<h3>{{message}}</h3>
			<input type="text" :value="message" v-model="message" />
		</div>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		var vm=new Vue({
			el:'#app',
				
			data:{
				message:'爱敲代码爱学习',
				
			},
		});
	</script>
</html>

在这里插入图片描述
这就是加入了v-model

在这里插入图片描述
这并没有加入v-model

注意:v-model只能用于表单中

尖兵果子
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手把手学习Vue3.0：使用v-model和v-bind的区别
帅哥趣谈
03-13 556
我的学习方法是先看官方文档，
Vue入门基础教程-vue的介绍和vue-cli,系统指令，跑马灯实例。mvc,mvp,创建项目，v-on,v-clock,v-text,v,html,v-bind,
VAN
04-03 45
前端学习
vue修饰符 v-on、v-bind、v-model
qq_40299140的博客
08-27 842
1.v-on 修饰符 .stop - 调用 event.stopPropagation()，禁止事件冒泡。 .prevent - 调用 event.preventDefault()，阻止事件默认行为。 .capture - 添加事件侦听器时使用 capture 模式。 .self - 只当事件是从侦听器绑定的元素本身触发时才触发回调。 .{keyCode | keyAlias} - 只当...
vue中的v-bind、v-on和v-model
Anlantic的博客
10-20 816
vue.js的v-bind、v-on、v-model
Vue中v-bind、v-model、v-on、循环v-for、判断v-if、v-else、v-show、v-text、v-html、v-pre、v-once非常详细包你学会
最新发布
爱吃Java的羊的博客
06-26 727
v-bindVue中v-bind、v-on、v-model、循环v-for、判断v-if、v-else、v-show、v-text、v-html、v-pre、v-once非常详细包你学会v-bind。
Vue中 v-on v-bind和 v-model
weixin_43254676的博客
07-26 878
v-on v-on用于事件绑定，缩写@ < button v-on:click=“handleClick”>提交</ button> < button @click=“handleClick”>提交</ button> v-bind v-bind用于属性绑定，缩写 ： 如例： < img v-bind:src=“imgUrl”/> &lt...
vue 中使用 v-bind 与 v-on 来实现 v-model 双向绑定 ？
青梅SEO
06-11 374
vue — 使用v-bind与v-on实现v-model v-model其实是一个语法糖，他的背后本质包含两个操作：1.v-bind绑定一个value属性2.v-on指令给当前元素绑定input事件 实现步骤如下：① 通过v-bind实现，若修改app.message，则使得网页显示的input中的value也发生改变。 <body> <div id="app"&gt...
重学Vue——v-model用v-bind和v-on的简易实现
qq_45593068的博客
03-01 423
v-model用v-bind和v-on的简易实现 <body> <div id="app"> <div>{{ msg }}</div> <input type="text" :value="msg" @input="input" ref="input"> </div> <script src...
vue3中v-on 、v-model与v-for和v-bind
weixin_50666902的博客
10-18 405
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>佳丽列表</title> <script src="https://unpkg.com/vue@next.
关于vue指令v-on、v-bind等笔记
柠檬精哒博客
07-16 484
1.v-on指令 为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法： v-on 缩写 v-on 指令用于绑定HTML事件 ：v-on:click 缩写为 @click <!-- 完整语法 --> <a v-on:click="doSomething">...</a> ...
vue 2.0组件与v-model详解
08-31
Vue 官方文档中提到，`v-model` 是一个简写，它实际上执行了两个操作：将值绑定到 `value` 属性（`v-bind:value`），以及监听 `input` 事件并更新该值（`v-on:input`）。这使得我们在表单控件中可以轻松实现双向数据...
VUE初学--表单输入与v-model
qq_42970981的博客
12-13 1102
1、基本用法 1、v-modle 在input的基本用法 表单控件在实际业务需求中运用是非常常见，比如，输入框、下拉框、多选、单选等，一般常见于，用户登录注册等，用他们完成数据录入，校验，提交等 Vue提供了 v-model 指令在表单元素上创建 双向数据绑定 他会根据控件类型自动选取正确的方法来更新元素 <div id="app"> <input type="text" ...
VUE初学--列表渲染v-for
qq_42970981的博客
11-19 824
列表渲染 v-for v-for 指令基于一个数组来渲染一个列表，需要用 v-for = " item in itemList " 或者 v-for = " item of itemList " 形式特殊的语法，itemList 是元数据素组， item 是被迭代的数组元素的 别名 注：我们可以用 of 替代 in 作为分隔符，它更接近 JavaScript 迭代器的语法 <div id...
vue 的v-on与v-bind
weixin_41860983的博客
11-09 7001
v-on就是用于绑定事件的 例如 有个按钮，我想点击的时候执行一些操作 <div class="app"> <button v-on:click="myclick">click me</button> </div> 注意：后面的值是一个方法，可以写成myclick()，如没有参数也可以写成myclick。另外这种事件对应的方法不是定义在data里面，而是定义在vue实例的methods里 var app = new Vue({ el:'.
Vue中v-bind,v-on,v-model辨析
weixin_50736511的博客
12-09 231
v-bind:属性绑定(语法糖 : ) v-on:事件绑定(语法糖@), v-model:双向绑定(语法糖v-model 通常v-on用于时间时间绑定，比如给按钮绑定事件 v-on:click (@click) v-bind 当数据要绑定变量时 当一个后面应该是“” 字符串时，你要绑定一个data里的变量时需要加上v-bind <p class="font_Size" v-bind:class="{ red: isRed, center: isCenter }">Hello World!<
v-on 、v-bind 、v-model
Mikon_0703
12-23 308
v-on绑定html事件 v-on:click 缩写为 @click <!-- 完整语法 --> <a v-on:click="doSomething(tmp)">123</a> <!-- 缩写 --> <a @click="doSomething(tmp)">123</a> new Vue({ ... methods:{ doSomething(tmp){ } } }) v-bind设置html属性 v-bind:hr
Vue：v-on、v-bind、v-model、@click、：model用法以及区别（附代码实例）
qq_51066068的博客
09-26 2002
Vue：v-on、v-bind、v-model、@click、：model用法以及区别（附代码实例）
v-module ,v-bind, v-on
Erictezx的博客
11-28 731
用于组件的 v-module, 实现双向绑定 1.v-model 指令用来在表单 \ \ 元素上创建双向数据绑定,它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行特殊处理。（ps：语法糖：指对计算机添加一些语法，不影响语法的表达功能，但极大的提高了程序的可读性） 2.v-bind 主要用于相应更新HTML元素的属性，将一个或多个属性或者一个组件的prop动态绑定到表达式。 v-on指令用于监听D
vue中的v-on、v-bind和v-model
weixin_44054325的博客
03-20 173
v-on 用于绑定HTML事件，如click，mouseleave，mouseenter等 <div id="app"> <button v-on:click="onClick">click</button> </div> 在js的methods中加入一个onClick事件： var app = new Vue({ el : '#app', m...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值