属性

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. java初级开发程序员(第六单元)

    1.for循环结构: 循环结构分为四个部分. >初始部分:设置循环的初始状态,如设置记录循环次数的变量i为0. >循环体:重复执行的代码,即输出“好好学习,天天向上!”. >迭代部分 ...

  2. 关于volatile的可见性和禁止指令重排序的疑惑

    在学习volatile语义的可见性和禁止指令重排序的相关测试中,发现并不能体现出禁止指令重排序的特性 实验代码如下 package com.aaron.beginner.multithread.vol ...

  3. 计算机程序的思维逻辑 (70) - 原子变量和CAS

    从本节开始,我们探讨Java并发工具包java.util.concurrent中的内容,本节先介绍最基本的原子变量及其背后的原理和思维. 原子变量 什么是原子变量?为什么需要它们呢? 在理解synch ...

  4. 程序点滴001_Python模拟点阵数字

    尝试过很多编程语言,写过不少程序(当然,基本上都是些自娱自乐或给自己用的工具类的小玩意儿),逐渐认识到编写程序是一个不断完善.不断优化的过程——编程首先要有一个想法(目标),围绕这个目标形成最基本的功 ...

  5. HTML入门

    一些说明 写在前面:HTML和CSS,当你了解所有规则后,你应该多写页面并记录你出现的问题,这才是学习HTML和CSS的最佳方法 这是我学习一段时间之后,再次回顾HTML,希望大家也对HTML有不一样 ...

  6. lxd-启动篇分析

    lxd是什么:lxd是基于lxc构筑的容器管理进程,提供镜像,网络,存储,以及容器的能力,对外暴漏restfull API.其与docker的区别是docker更切近与app container,以应 ...

  7. WEB标准了解

    今天看到朋友的简历有一项“了解WEB标准”,就特地了解了一下什么是WEB标准.现在就一项一项地解开自己的疑惑. 1.什么是WEB标准 WEB标准大部分由万维网组织(W3C)制定的WEB程序开发规范.W ...

  8. AR入门系列-04-vuforia识别多个图片及同屏展示

    首先,我们需要在官网中识别数据库添加多张图片,并将数据库下载下来覆盖原来的数据库 在 Hierarchy视图中需要多个ImageTarget 将新建的ImageTarget(1) 选择数据库中的识别图 ...

  9. h5标签基础 表单form

    表单:收集用户信息 一. 组成: 文本框<input type="text"/> 密码框<input type="password"/> ...

  10. 实现自动构建编译javaweb项目并发布到N台服务器

    前言 当你使用nginx实现了负载均衡,当你有了超过3台以上的应用服务器时,一个特别头疼的问题就来了,发布项目好麻烦. 你每次都要在本地编译打包一遍,然后手动复制到每一台服务器上面去,如果只有一两台服 ...