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 ...
随机推荐
- perl 获取系统时间
最近需要将字符串转换成时间,找了下资料,实战如下,发现时timelocal费了些时间 strftime也可在 c / c++ / awk / php 中使用,用法基本一致. 这个也不错 $time = ...
- request.RequestContextListener
由于是使用spring mvc来做项目,因此脱离了HttpServletRequest作为参数,不能够直接使用request,要想使用request可以使用下面的方法: 在web点xml中配置一个监听 ...
- Asp.Net 常用工具类之Office-文档操作(6)
文档一直是老大难问题,君不知,代码用时方恨少!有一套成熟的文件帮助类能很大程度上减少寻找各种资料的时间. 记得以前做一个业务,需要导出协议,一份可编辑,一份不可编辑.那么Word和PDF是最好的选择, ...
- wemall app商城源码中ScrollView中嵌套ListView主要代码
很多时间我们在scorllview中嵌入listview的时候,都只能看到listview显示一行数据,而我们的要求是显示多行,即我们数据的行数, 当ListView的高度设定一定的值时,ListVi ...
- java笔记---equals和==的区别
摔在这里几次,还是记下来吧.原文:http://www.cnblogs.com/shenliang123/archive/2012/04/16/2452156.html --------------- ...
- python 语法笔记(一)
#python3里面input默认接收到的事str类型,而python2里面却认为是int类型n=int(input('请输入想要第几个数')) #如果将int省去,python3中该程序将会报错a, ...
- Spring+SpringMVC+MyBatis+easyUI整合基础篇(十一)SVN服务器进阶
日常啰嗦 上一篇文章<Spring+SpringMVC+MyBatis+easyUI整合基础篇(十)SVN搭建>简单的讲了一下SVN服务器的搭建,并没有详细的介绍配置文件及一些复杂的功能, ...
- jQuery中$.extend(true,object1, object2);深拷贝对象
语法:jQuery.extend( [deep ], target, object1 [, objectN ] ) 深浅拷贝对应的参数就是[deep],是可选的,为true或false.默认情况是fa ...
- 初用Linux, 安装Ubuntu16.04+NVIDIA387+CUDA8.0+cudnn5.1+TensorFlow1.0.1
因为最近Deep Learning十分热门, 装一下TensorFlow学习一下. 本文主要介绍安装流程, 将自己遇到的问题说明出来, 并记录自己如何处理, 原理方面并没有能力解释. 由于本人之前从来 ...
- Unity3D Shader Stencil模版测试学习
官方文档地址: https://docs.unity3d.com/Manual/SL-Stencil.html 参考博客: http://blog.csdn.net/onafioo/article/d ...