vue.js学习笔记之v-bind和v-on解析


Posted in Javascript onMay 03, 2018

v-bind 指令用于响应地更新 HTML 特性 形式如:v-bind:href    缩写为    :href;

v-on 指令用于监听DOM事件 形式如:v-on:click  缩写为 @click;

<body>
 <div id="test">
  <img v-bind:src="src">
  <a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度一下</a>
  <a :href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >百度一下</a>
  <a href="{{url}}" rel="external nofollow" >百度一下</a>
  <a v-on:click="update()" href="#" rel="external nofollow" rel="external nofollow" >更改图片</a>
  <a @click="update()" href="#" rel="external nofollow" rel="external nofollow" >更改图片</a>
 </div>
 <script type="text/javascript">
  new Vue({
   el: '#test',
   data: {
    url: "https://www.baidu.com",
    src: "img/spring.jpg"16 17 18    },
   methods: {
    update: function(){
     this.src = "img/summer.jpg";
    }
   }
  })
 </script>
</body>

note: vue.js 1.0版本后才有的这两个指令

v-bind,v-on的缩写

构建单页应用(SPA )时,Vue.js 会管理所有的模板,此时 v- 前缀也没那么重要了。因此Vue.js 为两个最常用的指令 v-bind 和v-on 提供特别的缩写:

下面给大家介绍下v-bind缩写:

<!-- 完整语法 --> 
<a v-bind:href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
<!-- 缩写 --> 
<a :href="url" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ></a> 
<!-- 完整语法 --> 
<button v-bind:disabled="someDynamicCondition">Button</button> 
<!-- 缩写 --> 
<button :disabled="someDynamicCondition">Button</button>

v-on缩写:

<!-- 完整语法 --> 
<a v-on:click="doSomething"></a> 
<!-- 缩写 --> 
<a @click="doSomething"></a>

总结

以上所述是小编给大家介绍的vue.js学习笔记之v-bind和v-on解析,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
javascript tips提示框组件实现代码
Nov 19 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
jquery插件Jplayer使用方法简析
Apr 22 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
JS禁止浏览器右键查看元素或按F12审查元素自动关闭页面示例代码
Sep 07 Javascript
vue中SPA单页面应用程序详解
Nov 07 Javascript
vue中v-model的应用及使用详解
Jun 27 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
详解vue中async-await的使用误区
Dec 05 Javascript
vue微信分享的实现(在当前页面分享其他页面)
Apr 16 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
May 03 #jQuery
详解VueJs中的V-bind指令
May 03 #Javascript
基于vue,vue-router, vuex及addRoutes进行权限控制问题
May 02 #Javascript
用ES6写全屏滚动插件的示例代码
May 02 #Javascript
详解Vue中watch的高级用法
May 02 #Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 #Javascript
Vue SSR 组件加载问题
May 02 #Javascript
You might like
一些星际专用术语解释
2020/03/04 星际争霸
用PHP即时捕捉PHP中的错误并发送email通知的实现代码
2013/01/19 PHP
ThinkPHP基本的增删查改操作实例教程
2014/08/22 PHP
ASP中进行HTML数据及JS数据编码函数
2009/11/11 Javascript
在图片上显示左右箭头类似翻页的代码
2013/03/04 Javascript
jQuery拖拽 &amp; 弹出层 介绍与示例
2013/12/27 Javascript
jquery队列queue与原生模仿其实现方法分享
2014/03/25 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
AngularJS使用angular-formly进行表单验证
2015/12/27 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
JavaScript的Backbone.js框架的一些使用建议整理
2016/02/14 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
AngularJS  $modal弹出框实例代码
2016/08/24 Javascript
jQuery右下角悬浮广告实例
2016/10/17 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
JavaScript通过改变文字透明度实现的文字闪烁效果实例
2017/04/27 Javascript
解读ES6中class关键字
2017/11/20 Javascript
js如何找出字符串中的最长回文串
2018/06/04 Javascript
React中this丢失的四种解决方法
2019/03/12 Javascript
简单易扩展可控性强的Jquery转盘抽奖程序
2019/03/16 jQuery
JavaScript如何实现监听键盘输入和鼠标监点击
2020/07/20 Javascript
vue 解决data中定义图片相对路径页面不显示的问题
2020/08/13 Javascript
基于Vue3.0开发轻量级手机端弹框组件V3Popup的场景分析
2020/12/30 Vue.js
[54:57]DOTA2-DPC中国联赛定级赛 Aster vs DLG BO3第二场 1月8日
2021/03/11 DOTA
python使用pyhook监控键盘并实现切换歌曲的功能
2014/07/18 Python
详解Django框架中用户的登录和退出的实现
2015/07/23 Python
vscode 远程调试python的方法
2017/12/01 Python
Python json模块dumps、loads操作示例
2018/09/06 Python
python实现飞机大战微信小游戏
2020/03/21 Python
CSS3下的渐变文字效果实现示例
2018/03/02 HTML / CSS
基于HTML5 FileSystem API的使用介绍
2013/04/24 HTML / CSS
《回乡偶书》教学反思
2014/04/12 职场文书
2014和解协议书范文
2014/09/15 职场文书
党支部党的群众路线对照检查材料
2014/09/24 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
银行反洗钱宣传活动总结
2015/05/08 职场文书