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 相关文章推荐
使用jscript实现二进制读写脚本代码
Jun 09 Javascript
csdn 论坛技术区平均给分功能
Nov 07 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
jqueyr判断checkbox组的选中(示例代码)
Nov 08 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
一个CSS+jQuery实现的放大缩小动画效果
Feb 19 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
javascript基本常用排序算法解析
Sep 27 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
基于vue中对鼠标划过事件的处理方式详解
Aug 22 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 Javascript
node.js通过url读取文件
Oct 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
PHP 5.3.0 安装分析心得
2009/08/07 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
25个非常棒的jQuery滑块插件和教程小结
2011/09/02 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
关于JavaScript对象的动态选择及遍历对象
2014/03/10 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
js实现YouKu的漂亮搜索框效果
2015/08/19 Javascript
javascript中new关键字详解
2015/12/14 Javascript
JavaScript中数组Array方法详解
2017/02/27 Javascript
Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
2017/03/13 Javascript
Vue.js实现输入框绑定的实例代码
2017/08/24 Javascript
springMvc 前端用json的方式向后台传递对象数组方法
2018/08/07 Javascript
vue+elementUI实现表单和图片上传及验证功能示例
2019/05/14 Javascript
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
详解Vue.js3.0 组件是如何渲染为DOM的
2020/11/10 Javascript
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
sqlalchemy对象转dict的示例
2014/04/22 Python
python的移位操作实现详解
2019/08/21 Python
django框架F&amp;Q 聚合与分组操作示例
2019/12/12 Python
Tensorflow 自定义loss的情况下初始化部分变量方式
2020/01/06 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
Jar包的作用是什么
2014/03/30 面试题
工商企业管理实习自我鉴定
2013/12/04 职场文书
四风存在的原因分析
2014/02/11 职场文书
租房协议书
2014/04/10 职场文书
乡镇群众路线教育实践活动整改措施
2014/10/04 职场文书
环卫工作汇报材料
2014/10/28 职场文书
2014年员工工作总结范文
2014/11/18 职场文书
死亡赔偿协议书
2015/01/28 职场文书
员工加薪申请报告
2015/05/15 职场文书
走进科学观后感
2015/06/18 职场文书
校长新学期寄语2016
2015/12/04 职场文书
Java中Dijkstra(迪杰斯特拉)算法
2022/05/20 Java/Android
Docker部署Mysql8的实现步骤
2022/07/07 Servers