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 相关文章推荐
鼠标图片振动代码
Jul 06 Javascript
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
Prototype的Class.create函数解析
Sep 22 Javascript
html中使用javascript调用本地程序(exe、doc等)实现代码
Apr 26 Javascript
javascript实现全角转半角的方法
Jan 23 Javascript
Immutable 在 JavaScript 中的应用
May 02 Javascript
深入理解Vue2.x的虚拟DOM diff原理
Sep 27 Javascript
Javascript中弹窗confirm与prompt的区别
Oct 26 Javascript
Node.js Windows Binary二进制文件安装方法
May 16 Javascript
Vue事件修饰符native、self示例详解
Jul 09 Javascript
js 实现碰撞检测的示例
Oct 28 Javascript
react中useState使用:如何实现在当前表格直接更改数据
Aug 05 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
thinkphp中session和cookie无效的解决方法
2014/12/19 PHP
php获取数组元素中头一个数组元素值的实现方法
2014/12/20 PHP
php验证身份证号码正确性的函数
2016/07/20 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
php实现微信支付之企业付款
2018/05/30 PHP
PHP中isset、empty的用法与区别示例详解
2020/11/05 PHP
比Jquery的document.ready更快的方法
2010/04/28 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
2015/06/05 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
2016/03/18 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
jQuery插件echarts去掉垂直网格线用法示例
2017/03/03 Javascript
AngularJS封装$http.post()实例详解
2017/05/06 Javascript
Angularjs 实现动态添加控件功能
2017/05/25 Javascript
基于vue-resource jsonp跨域问题的解决方法
2018/02/03 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
vue中重定向redirect:‘/index‘,不显示问题、跳转出错的完美解决
2020/09/28 Javascript
python实现2014火车票查询代码分享
2014/01/10 Python
Python实现爬取逐浪小说的方法
2015/07/07 Python
Python之父谈Python的未来形式
2016/07/01 Python
把csv文件转化为数组及数组的切片方法
2018/07/04 Python
python 找出list中最大或者最小几个数的索引方法
2018/10/30 Python
python通过paramiko复制远程文件及文件目录到本地
2019/04/30 Python
Python机器学习算法库scikit-learn学习之决策树实现方法详解
2019/07/04 Python
python matplotlib饼状图参数及用法解析
2019/11/04 Python
Python字符串hashlib加密模块使用案例
2020/03/10 Python
使用Keras中的ImageDataGenerator进行批次读图方式
2020/06/17 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
Superdry瑞典官网:英国日本街头风品牌
2017/05/17 全球购物
先进事迹报告会感言
2014/01/24 职场文书
校园之星获奖感言
2014/01/29 职场文书
机关党员2014全国两会学习心得体会
2014/03/10 职场文书
2014年学生资助工作总结
2014/12/18 职场文书
初中同学会致辞
2015/08/01 职场文书
Java中的Kafka为什么性能这么快及4大核心详析
2022/09/23 Java/Android