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无刷新评论实现方法
May 13 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
简单易懂的天气插件(代码分享)
Feb 04 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
node+express+ejs使用模版引擎做的一个示例demo
Sep 18 Javascript
vue-cli扩展多模块打包的示例代码
Apr 09 Javascript
JS构造一个html文本内容成文件流形式发送到后台
Jul 31 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
详解Vue数据驱动原理
Nov 17 Javascript
Javascript 解构赋值详情
Nov 17 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
PHP Document 代码注释规范
2009/04/13 PHP
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
学习php设计模式 php实现访问者模式(Visitor)
2015/12/07 PHP
php判断数组是否为空的实例方法
2020/05/10 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
Jquery 获得服务器控件值的方法小结
2010/05/11 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
node.js中的events.EventEmitter.listenerCount方法使用说明
2014/12/08 Javascript
jQuery拖拽插件gridster使用指南
2015/04/21 Javascript
Vue.js每天必学之过渡与动画
2016/09/06 Javascript
json定义及jquery操作json的方法
2016/09/29 Javascript
JS获取html元素的标记名实现方法
2016/10/08 Javascript
详解vue.js全局组件和局部组件
2017/04/10 Javascript
微信小程序 页面跳转事件绑定的实例详解
2017/09/20 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
原生js实现随机点名功能
2019/11/05 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
[05:26]TI10典藏宝瓶套装外观展示
2020/07/03 DOTA
Python多线程和队列操作实例
2015/06/21 Python
使用浏览器访问python写的服务器程序
2019/10/10 Python
python with语句的原理与用法详解
2020/03/30 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
css3中transition属性详解
2014/09/02 HTML / CSS
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
英国著名音像制品和图书游戏购物网站:Zavvi
2016/08/04 全球购物
.net软件工程师应聘上机试题
2015/03/10 面试题
出纳试用期自我鉴定
2014/04/07 职场文书
综合实践活动总结
2014/05/05 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
地陪导游欢迎词
2015/01/26 职场文书
2015年求职自荐信范文
2015/03/04 职场文书
员工担保书范本
2015/09/22 职场文书
小学班级标语口号大全
2015/12/26 职场文书
Element-ui Layout布局(Row和Col组件)的实现
2021/12/06 Vue.js
浅谈MySQL中的六种日志
2022/03/23 MySQL