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 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...
随机推荐
- 简单5步说清App软件在线开发、App制作多少钱？
开发制作一款App,所有人都会首先关心开发一款App多少钱这个问题.从网上的信息来看,花费个几十万是很正常的事情,甚至有人说要花上百万才能制作出一款App.那么App软件的开发制作到底和什么有关?怎么 ...
- MVC模式--DropDownList数据绑定
DropDownList数据绑定 在控制器中Controller中,为前台页面DropDownList准备的数据 List<bookInfo> bookList = bookManger. ...
- Apache和IIS服务器共存问题--来自网上内容
1.apache 主要支持PHP IIS 主要支持asp 静态的网页他们都支持入htm,端口冲突的话你可以更改其中一个服务器的端口来实现端口的避让,IIS在右击“我的电脑”“管理”“服务和应用程 ...
- AJAX-----03远古时期的ajax
用iframe方法实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...
- 微信端应用 ionic实现texarea 自适应高度
最近公司项目,做微信端用到texarea 需要实现自适应高度的功能 当然自适应高度的方法很多网上找一大片,最直接的方式就是在使用到texarea的controller中添加js代码事件来实现,这中方式 ...
- ios项目总结一：开发中常用的设计模式
一.单例设计模式 1.应用场景: 程序运行期间,在内存中只有一个实例存在,主要用于资源共享,对硬件的访问等等 2.优点: 跨模块,解耦合,使用简单 3.敏捷原则: 单一职责原则 4.SDK实例: UI ...
- Windows：常见问题
1.文件(夹)非法字符 Windows系统文件(夹)非法字符"\\/:*?\"<>|",不包含‘.’,但"."字符不能是文件(夹)的首字符 ...
- ASP值view State
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...
- 执行大量的Redis命令，担心效率问题？用Pipelining试试吧~
参考的优秀文章 Request/Response protocols and RTT 来源 原来,系统中一个树结构的数据来源是Redis,由于数据增多.业务复杂,查询速度并不快.究其原因,是单次查询的 ...
- python 字符串 转 dict
比直接eval更好的方法>>>import ast >>>ast.literal_eval("{'muffin' : 'lolz', 'foo' : 'k ...