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 相关文章推荐
javascript delete 使用示例代码
Mar 29 Javascript
Javascript变量作用域详解
Dec 06 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
BootStrap智能表单实战系列(四)表单布局介绍
Jun 13 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
Aug 01 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
如何制作幻灯片(代码分享)
Jan 06 Javascript
JS 在数组指定位置插入/删除数据的方法
Jan 12 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
浅谈Webpack 是如何加载模块的
May 24 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
摩卡咖啡
2021/03/03 咖啡文化
坏狼的PHP学习教程之第1天
2008/06/15 PHP
fetchAll()与mysql_fetch_array()的区别详解
2013/06/05 PHP
PHP在网页中动态生成PDF文件详细教程
2014/07/05 PHP
关于URL最大长度限制的相关资料查证
2014/12/23 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
OfflineSave离线保存代码再次发布使用说明
2007/05/23 Javascript
对xmlHttp对象方法和属性的理解
2011/01/17 Javascript
Javascript简单实现可拖动的div
2013/10/22 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
javascript常用的设计模式
2017/02/09 Javascript
详解node HTTP请求客户端 - Request
2017/05/05 Javascript
react实现一个优雅的图片占位模块组件详解
2017/10/30 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
js拖动滑块和点击水波纹效果实例代码
2018/10/16 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
JavaScript交换两个变量方法实例
2019/11/25 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
JavaScript实现瀑布流布局的3种方式
2020/12/27 Javascript
[51:05]DOTA2上海特级锦标赛主赛事日 - 5 败者组决赛Liquid VS EG第一局
2016/03/06 DOTA
Python网页解析利器BeautifulSoup安装使用介绍
2015/03/17 Python
Python抓取电影天堂电影信息的代码
2016/04/07 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
Python实现的特征提取操作示例
2018/12/03 Python
python 多进程共享全局变量之Manager()详解
2019/08/15 Python
Python自带的IDE在哪里
2020/07/01 Python
Html5原创俄罗斯方块(基于canvas)
2019/01/07 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
暑期研修感言
2014/02/17 职场文书
党员干部承诺书
2014/03/25 职场文书
战友聚会主持词
2014/04/02 职场文书
2016年学习贯彻十八届五中全会精神心得体会
2016/01/05 职场文书
box-shadow单边阴影的实现
2023/05/21 HTML / CSS