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 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...
随机推荐
- Unit03 - 对象内存管理 、 继承的意义（上）
Unit03 - 对象内存管理 . 继承的意义(上) 1.内存管理:由JVM来管理的 1)堆: 1.1)存储所有new出来的对象(包含成员变量) 1.2)没有任何引用所指向的对象就是垃圾 ...
- Android 高德地图No implementation found for long com.autonavi.amap.mapcore.MapCore
此篇博客最后更新时间写自2016.5.18.当下高德地图jar版本为3.3.1. 使用高德地图碰到此问题,纠结许久(接近4个多小时). 记录在此,希望遇到相同问题的读者可以有所借鉴. 错误截图: 导致 ...
- 快速掌握Flyway
什么是Flyway? Flyway is an open-source database migration tool. It strongly favors simplicity and conve ...
- ios每日一发--Leanclude数据云存储以及登录 注册账户
利用LeanCloud来实现注册账号,存储账号以及,登录时查询账号是否正确.集成方式很简单可以看这里的官方文档.地址是这里: https://leancloud.cn/docs/ 在这里创建应用,以及 ...
- lua 环境揭秘
什么是环境? http://www.lua.org/manual/5.1/manual.html#2.9 Besides metatables, objects of types thread, fu ...
- RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件Web业务平台
RDIFramework.NET ━ .NET快速信息化系统开发框架 工作流程组件Web业务平台 接前两篇: RDIFramework.NET ━ .NET快速信息化系统开发框架 ━ 工作流程组件介 ...
- DuiLib事件分析（一）——鼠标事件响应
最近在处理DuiLib中自定义列表行元素事件,因为处理方案得不到较好的效果,于是只好一层一层的去剥离DuiLib事件是怎么来的,看能否在某一层截取消息,自己重写. 我这里使用CListContaine ...
- fasta文件拆分与合并
Linux中fasta文件的拆分与合并 FASTA文件的拆分: (1)如果从一个文件a提取第11至20个序列存到另一个文件b: awk -v RS='>' 'NR>1{i++}i>= ...
- [原创]java WEB学习笔记93：Hibernate学习之路---Hibernate 缓存介绍，缓存级别，使用二级缓存的情况，二级缓存的架构集合缓存，二级缓存的并发策略，实现步骤，集合缓存，查询缓存，时间戳缓存
本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...
- SQL2012新特性一次一个数据块----特殊的查询分页
对于数据库人员来说,在软件项目开发的过程中,或多或少的不可避免的就是经常遇到类似“UI查询结果设计”这样的说法,当听到UI设计的时候,多数人的第一反应是“靠!关我毛事!~这是其他人的问题!”. 然而, ...