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 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...
随机推荐
- Unit06 - 抽象类、接口和内部类（下） 、 面向对象汇总
Unit06 - 抽象类.接口和内部类(下) . 面向对象汇总 1.多态: 1)意义: 1.1)同一类型的引用指向不同的对象时,有不同的实现 行为的多态:cut().run(). ...
- thinkphp多语言设置
thinkphp多语言设置有点'高大上',为什么说它有点'高大上'呢?因为本人设置了好久才弄好,而本人之所以弄了好久的原因,竟然是因为'开启语言设置必须得先开启初始化系统的行为类',所以,在这里,因为 ...
- mysqldump database table
一)在同一个数据库服务器上面进行数据表间的数据导入导出: 1. 如果表tb1和tb2的结构是完全一样的,则使用以下的命令就可以将表tb1中的数据导入到表tb2中: insert into db2.tb ...
- Hadoop+Spark:集群环境搭建
环境准备: 在虚拟机下,大家三台Linux ubuntu 14.04 server x64 系统(下载地址:http://releases.ubuntu.com/14.04.2/ubuntu-14.0 ...
- DruidDataSource配置属性列表
DruidDataSource配置兼容DBCP,但个别配置的语意有所区别. 配置 缺省值 说明 name 配置这个属性的意义在于,如果存在多个数据源,监控的时候可以通过名字来区分开来.如果没有配置 ...
- Frag（匹配跟踪）
‘碎片’(Frag)跟踪是目标跟踪里的一种通过‘部分‘匹配识别的方法,其目标模板是通过图像多个碎片和块来描述.块是任意的,不基于目标模型的(与传统的基于’部分‘的方法不一样,比如人体的四肢与躯干的跟踪 ...
- ASP.NET 管道事件与HttpModule, HttpHandler简单理解
BeginRequest 指示请求处理开始 AuthenticateRequest 封装请求身份验证过程 AuthorizeRequest 封装检查是否能利用以前缓存的输出页面处理请求的过程 Reso ...
- 将数组里的元素拼接成sql里的in条件
/** * 将数组里的元素拼接成sql里的in条件,如'a1','a2','a3' * @param array * @returns */function makeSqlInStr(array){ ...
- 浅谈 PHP 与手机 APP 开发（API 接口开发）
本文内容转载自:http://www.thinkphp.cn/topic/5023.html 这个帖子写给不太了解PHP与API开发的人一.先简单回答两个问题:1.PHP 可以开发客户端?答:不可以, ...
- Web Performance Test : IP切换/IP欺骗
译者前言 本文翻译自<Visual Studio Performance Testing Quick Reference Guide 3.6> 有关于IP Switching的章节.< ...