vuejs学习笔记(2)--属性,事件绑定,ajax
属性
v-for 类似于angular中的 ng-repeat ,用于重复生成html片段;
<ul id="box"> <li v-for="(v, i) in list">{{v}}</li> </ul> <script> var vm = new Vue({ el: '#box', // 对应的元素选择器 或者是 指向元素的变量 data: { // data list: [1,2,3] } }); </script>
也可以写成这种形式 v-for='v in list' ,重复的数据也可以是js对象格式的。
v-show 与angular中的 ng-show 是一样的,值为 true 则显示,false 则隐藏(display:none)。
v-model 与angular中的 ng-model 一样,主要用于input元素值的绑定。
v-bind: 用于绑定属性值;
<img v-bind:class="class" v-bind:src="src"/> <script> var vm = new Vue({ el: '#box', // 对应的元素选择器 或者是 指向元素的变量 data: { // data class: ['class1','class2'], // src: 'img/1.png' } }); </script>
这里的class数据也可以是对象形式的 {'class1': true, 'class2': false},对象中的key值为类名,value为真则应用此类名,否则反之;
还可以是字符串 'class1' 。
v-bind: 的简写形式,如 v-bind:class 可以写成 :class , v-bind:src 可以写成 :src ,推荐使用简写。
事件绑定
vuejs中使用 v-on:click="fn()" 的形式绑定事件:
<input type="button" v-on:click="add()"> // <input type="reset" v-on:click=" username='123' "> // 也可以是一条js语句 <input type="button" @click="add($event)"> // @click 是 v-on:click 的简写,推荐使用 <input type="text" @click.stop="add($event)"> // .stop 表示阻止冒泡 <input type="text" @click.prevent="add($event)"> // .prevent 表示默认行为 <input type="text" @keydown.up="add($event)"> // .up 对应键盘up键 <input type="text" @keydown.left="add($event)"> // .left 对应键盘left键
<input type="text" @keydown.13="add($event)"> // .13 对应 enter 键
<script> var vm = new Vue({ el: '#box', // 对应的元素选择器 或者是 指向元素的变量 data: { // data username: 'vuejs' }, methods: { // 存放事件对应的方法 add:function(e){} } }); </script>
vue 提供多种形式的事件绑定,没有他做不到,只有你想不到。
ajax
vue 本身并没有封装ajax模块,我们可以使用vue的插件 vue-resource.js 来做数据交互;当然也可以使用 jquery
vue-resource.js 的API 与jquery的 ajax 类似,容易上手:
<script src="vue.js"></script> <script src="vue-resource.js"></script>
<script> var vm = new Vue({ el: '#box', // 对应的元素选择器 或者是 指向元素的变量 data: { // data username: 'vuejs' }, methods: { // 存放事件对应的方法 get: function(e){ this.$http.get('url').then( function(result){console.log('success')}, // 请求成功的回调函数 function(result) {console.log('fail')} // 失败时的回调函数 ) } } }); </script>
$http.get() 返回的是 promise 对象。大白话讲解Promise(一)
$http也支持 post(), jsonp()跨域 等方法。
vuejs学习笔记(2)--属性,事件绑定,ajax的更多相关文章
- 微信小程序学习笔记二 数据绑定 + 事件绑定
微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...
- VueJs 学习笔记
VueJs学习笔记 参考资料:https://cn.vuejs.org/ 特效库:TweenJS(补间动画库) VelocityJS(轻量级JS动画库) Animate.css(CSS预设动画库) ...
- iOS学习笔记之触摸事件&UIResponder
iOS学习笔记之触摸事件&UIResponder 触摸事件 与触摸事件相关的四个方法如下: 一根手指或多根手指触摸屏幕 -(void)touchesBegan:(NSSet *)touches ...
- vuejs学习笔记(1)--属性,事件绑定,ajax
属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...
- node学习笔记(二)(ajax方式向node后台提交数据)
通过ajax向node后台提交数据过程(附手写前后台代码),并总结post与get的区别 POST 前台代码 //CSS简单给点样式 <style> form{ width: 200px; ...
- VueJs学习笔记
在cmd下,进入目录之后 cd 到项目目录下 1 安装node cnpm install 2 启动或者调试 cnpm start (或是npm run dev) 3 上线: npm run b ...
- 【zepto学习笔记03】事件机制
前言 我们今天直接进入事件相关的学习,因为近期可能会改到里面的代码就zepto来说,我认为最重要的就是选择器与事件相关了,随着浏览器升级,选择器简单了,而事件相关仍然是核心,今天我们就来学习学习 ze ...
- Vuejs学习笔记(一)
1) vue.js 的 主要功能 1.模板渲染 2.模块化 3.扩展功能:路由,Ajax 2) vue.js 模板渲染之双向绑定示例 message 绑定到了 input 对象,所有在in ...
- 学习笔记:IDEA、原生ajax的三道练习题、Markdown
前言 该从何说起呢?想写博客好久了,正好这个学期课很少(大三),可以静下心来写点东西(虽然事情依旧很多),总感觉记录和分享是一件很酷的事情.第一篇博客,第一次使用Markdown写博客,第一次使用ID ...
随机推荐
- java初级开发程序员(第六单元)
1.for循环结构: 循环结构分为四个部分. >初始部分:设置循环的初始状态,如设置记录循环次数的变量i为0. >循环体:重复执行的代码,即输出“好好学习,天天向上!”. >迭代部分 ...
- 关于volatile的可见性和禁止指令重排序的疑惑
在学习volatile语义的可见性和禁止指令重排序的相关测试中,发现并不能体现出禁止指令重排序的特性 实验代码如下 package com.aaron.beginner.multithread.vol ...
- 计算机程序的思维逻辑 (70) - 原子变量和CAS
从本节开始,我们探讨Java并发工具包java.util.concurrent中的内容,本节先介绍最基本的原子变量及其背后的原理和思维. 原子变量 什么是原子变量?为什么需要它们呢? 在理解synch ...
- 程序点滴001_Python模拟点阵数字
尝试过很多编程语言,写过不少程序(当然,基本上都是些自娱自乐或给自己用的工具类的小玩意儿),逐渐认识到编写程序是一个不断完善.不断优化的过程——编程首先要有一个想法(目标),围绕这个目标形成最基本的功 ...
- HTML入门
一些说明 写在前面:HTML和CSS,当你了解所有规则后,你应该多写页面并记录你出现的问题,这才是学习HTML和CSS的最佳方法 这是我学习一段时间之后,再次回顾HTML,希望大家也对HTML有不一样 ...
- lxd-启动篇分析
lxd是什么:lxd是基于lxc构筑的容器管理进程,提供镜像,网络,存储,以及容器的能力,对外暴漏restfull API.其与docker的区别是docker更切近与app container,以应 ...
- WEB标准了解
今天看到朋友的简历有一项“了解WEB标准”,就特地了解了一下什么是WEB标准.现在就一项一项地解开自己的疑惑. 1.什么是WEB标准 WEB标准大部分由万维网组织(W3C)制定的WEB程序开发规范.W ...
- AR入门系列-04-vuforia识别多个图片及同屏展示
首先,我们需要在官网中识别数据库添加多张图片,并将数据库下载下来覆盖原来的数据库 在 Hierarchy视图中需要多个ImageTarget 将新建的ImageTarget(1) 选择数据库中的识别图 ...
- h5标签基础 表单form
表单:收集用户信息 一. 组成: 文本框<input type="text"/> 密码框<input type="password"/> ...
- 实现自动构建编译javaweb项目并发布到N台服务器
前言 当你使用nginx实现了负载均衡,当你有了超过3台以上的应用服务器时,一个特别头疼的问题就来了,发布项目好麻烦. 你每次都要在本地编译打包一遍,然后手动复制到每一台服务器上面去,如果只有一两台服 ...