属性

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. 微信小程序学习笔记二 数据绑定 + 事件绑定

    微信小程序学习笔记二 1. 小程序特点概述 没有DOM 组件化开发: 具备特定功能效果的代码集合 体积小, 单个压缩包体积不能大于2M, 否则无法上线 小程序的四个重要的文件 *js *.wxml - ...

  2. VueJs 学习笔记

    VueJs学习笔记 参考资料:https://cn.vuejs.org/ 特效库:TweenJS(补间动画库)  VelocityJS(轻量级JS动画库) Animate.css(CSS预设动画库) ...

  3. iOS学习笔记之触摸事件&UIResponder

    iOS学习笔记之触摸事件&UIResponder 触摸事件 与触摸事件相关的四个方法如下: 一根手指或多根手指触摸屏幕 -(void)touchesBegan:(NSSet *)touches ...

  4. vuejs学习笔记(1)--属性,事件绑定,ajax

    属性 v-for 类似于angular中的 ng-repeat ,用于重复生成html片段: <ul id="box"> <li v-for="(v, ...

  5. node学习笔记(二)(ajax方式向node后台提交数据)

    通过ajax向node后台提交数据过程(附手写前后台代码),并总结post与get的区别 POST 前台代码 //CSS简单给点样式 <style> form{ width: 200px; ...

  6. VueJs学习笔记

      在cmd下,进入目录之后 cd 到项目目录下 1 安装node cnpm install   2 启动或者调试 cnpm start (或是npm run dev) 3 上线: npm run b ...

  7. 【zepto学习笔记03】事件机制

    前言 我们今天直接进入事件相关的学习,因为近期可能会改到里面的代码就zepto来说,我认为最重要的就是选择器与事件相关了,随着浏览器升级,选择器简单了,而事件相关仍然是核心,今天我们就来学习学习 ze ...

  8. Vuejs学习笔记(一)

    1)    vue.js 的 主要功能 1.模板渲染 2.模块化 3.扩展功能:路由,Ajax 2)    vue.js 模板渲染之双向绑定示例 message 绑定到了 input 对象,所有在in ...

  9. 学习笔记:IDEA、原生ajax的三道练习题、Markdown

    前言 该从何说起呢?想写博客好久了,正好这个学期课很少(大三),可以静下心来写点东西(虽然事情依旧很多),总感觉记录和分享是一件很酷的事情.第一篇博客,第一次使用Markdown写博客,第一次使用ID ...

随机推荐

  1. perl 获取系统时间

    最近需要将字符串转换成时间,找了下资料,实战如下,发现时timelocal费了些时间 strftime也可在 c / c++ / awk / php 中使用,用法基本一致. 这个也不错 $time = ...

  2. request.RequestContextListener

    由于是使用spring mvc来做项目,因此脱离了HttpServletRequest作为参数,不能够直接使用request,要想使用request可以使用下面的方法: 在web点xml中配置一个监听 ...

  3. Asp.Net 常用工具类之Office-文档操作(6)

    文档一直是老大难问题,君不知,代码用时方恨少!有一套成熟的文件帮助类能很大程度上减少寻找各种资料的时间. 记得以前做一个业务,需要导出协议,一份可编辑,一份不可编辑.那么Word和PDF是最好的选择, ...

  4. wemall app商城源码中ScrollView中嵌套ListView主要代码

    很多时间我们在scorllview中嵌入listview的时候,都只能看到listview显示一行数据,而我们的要求是显示多行,即我们数据的行数, 当ListView的高度设定一定的值时,ListVi ...

  5. java笔记---equals和==的区别

    摔在这里几次,还是记下来吧.原文:http://www.cnblogs.com/shenliang123/archive/2012/04/16/2452156.html --------------- ...

  6. python 语法笔记(一)

    #python3里面input默认接收到的事str类型,而python2里面却认为是int类型n=int(input('请输入想要第几个数')) #如果将int省去,python3中该程序将会报错a, ...

  7. Spring+SpringMVC+MyBatis+easyUI整合基础篇(十一)SVN服务器进阶

    日常啰嗦 上一篇文章<Spring+SpringMVC+MyBatis+easyUI整合基础篇(十)SVN搭建>简单的讲了一下SVN服务器的搭建,并没有详细的介绍配置文件及一些复杂的功能, ...

  8. jQuery中$.extend(true,object1, object2);深拷贝对象

    语法:jQuery.extend( [deep ], target, object1 [, objectN ] ) 深浅拷贝对应的参数就是[deep],是可选的,为true或false.默认情况是fa ...

  9. 初用Linux, 安装Ubuntu16.04+NVIDIA387+CUDA8.0+cudnn5.1+TensorFlow1.0.1

    因为最近Deep Learning十分热门, 装一下TensorFlow学习一下. 本文主要介绍安装流程, 将自己遇到的问题说明出来, 并记录自己如何处理, 原理方面并没有能力解释. 由于本人之前从来 ...

  10. Unity3D Shader Stencil模版测试学习

    官方文档地址: https://docs.unity3d.com/Manual/SL-Stencil.html 参考博客: http://blog.csdn.net/onafioo/article/d ...