vue.js学习笔记之v-bind,v-on
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">百度一下</a>
<a :href="url">百度一下</a>
<a href="{{url}}">百度一下</a>
<a v-on:click="update()" href="#">更改图片</a>
<a @click="update()" href="#">更改图片</a>
</div>
<script type="text/javascript">
new Vue({
el: '#test',
data: {
url: "https://www.baidu.com",
src: "img/spring.jpg" },
methods: {
update: function(){
this.src = "img/summer.jpg";
}
}
})
</script>
</body>
note: vue.js 1.0版本后才有的这两个指令
vue.js学习笔记之v-bind,v-on的更多相关文章
- Vue.js学习笔记（2）vue-router
vue中vue-router的使用:
- vue.js 学习笔记3——TypeScript
目录 vue.js 学习笔记3--TypeScript 工具 基础类型 数组 元组 枚举 字面量 接口 类类型 类类型要素 函数 函数参数 this对象和类型 重载 迭代器 Symbol.iterat ...
- Vue.js学习笔记：在元素 和 template 中使用 v-if 指令
f 指令 语法比较简单,直接上代码: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " ...
- Vue.js学习笔记（1）
数据的双向绑定(ES6写法) 效果: 没有改变 input 框里面的值时
- Vue.js学习笔记(代码)
##v-cloak v-text v-html v-bind v-on的使用 <!DOCTYPE html> <html> <head> < ...
- Vue.js学习笔记(介绍)
Vue语法也可以进行APP开发,需要借助weex Vue.js是一套构建用户界面的框架,只关注视图层,便于与第三方库或既有项目整合. 在Vue中的核心概念:让用户不能操作Dom元素(减少不必要的dom ...
- Vue.js——学习笔记（一）
Vue-自学笔记 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,不仅 ...
- Vue.js 学习笔记之二：数据驱动开发
在 Vue.js 框架中,与 HTML 页面元素的交互方式没有像原生 JavaScript 接口那么直接,它是通过先在 HTML 元素标签中嵌入一系列类似于普通标签属性的 Vue 指令属性来绑定数据, ...
- Vue.js 学习笔记之三：与服务器的数据交互
显而易见的,之前的02_toDoList存在着一个很致命的缺陷.那就是它的数据只存在于浏览器端,一但用户关闭或重新载入页面,他之前加入到程序中的数据就会全部丢失,一切又恢复到程序的初始状态.要想解决这 ...
- Vue.js 学习笔记之四：Vue 组件基础
到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...
随机推荐
- Python开发【第八章】：Socket
一.Socket socket通常也称作"套接字",用于描述IP地址和端口,是一个通信链的句柄,应用程序通常通过"套接字"向网络发出请求或者应答网络请求. so ...
- SQL Server索引进阶第五篇：索引包含列 .
包含列解析所谓的包含列就是包含在非聚集索引中,并且不是索引列中的列.或者说的更通俗一点就是:把一些底层数据表的数据列包含在非聚集索引的索引页中,而这些数据列又不是索引列,那么这些列就是包含列.同时,这 ...
- Salesforce.com Object Query Language (SOQL) 示例
Salesforce 中的用户操作 打开按公司名称排序的供应商记录列表视图.SOQL 查询 SELECT CompanyName__c,ContactName__c FROM Suppliers__x ...
- Matlab中图片保存的5种方法
matlab的绘图和可视化能力是不用多说的,可以说在业内是家喻户晓的. Matlab提供了丰富的绘图函数,比如ez**系类的简易绘图函数,surf.mesh系类的数值绘图函数等几十个.另外其他专业工具 ...
- 视觉中的深度学习方法CVPR 2012 Tutorial Deep Learning Methods for Vision
Deep Learning Methods for Vision CVPR 2012 Tutorial 9:00am-5:30pm, Sunday June 17th, Ballroom D (Fu ...
- spring1冲刺感想与总结
感想与体会: 通过团队合作的第一个sprint,我们知道如何在团队合作中做好自己,还有与队友不合时,如何和平处理问题.产品负责人是一个重要的的角色,他负责任务的安排,处理合作中意见不统一的问题.通过这 ...
- sklearn 组合分类器
组合分类器: 组合分类器有4种方法: (1)通过处理训练数据集.如baging boosting (2)通过处理输入特征.如 Random forest (3)通过处理类标号.error_corre ...
- MergeSort（归并排序）算法Java实现
归并排序 归并排序 (merge sort) 是一类与插入排序.交换排序.选择排序不同的另一种排序方法.归并的含义是将两个或两个以上的有序表合并成一个新的有序表.归并排序有多路归并排序.两路归并排序 ...
- [3]R语言在数据处理上的禀赋——par参数详解(一)
本文目录 公共参数列表 par 颜色相关 字体相关 字体大小相关 线条相关 符号相关 线条和符号大小相关 结束 本文首发:program-dog.blogspot.com 注1:本文也曾在csdn发布 ...
- 批处理命令——if
[1]if命令简介 if,大家肯定见多了,一个没有用过if的程序员不是一个好产品经理(呵呵~~). if,判断选择的作用,自从写了几年代码,我才真正弄明白了一件事,为什么当初上学时候考试总要做那么多的 ...