js ajax事件绑定事件绑定,vuejs学习笔记（1）--属性，事件绑定，ajax(示例代码)

属性

v-for 类似于angular中的 ng-repeat ，用于重复生成html片段；

• {{v}}

var vm = new Vue({

el: \'#box\', // 对应的元素选择器 或者是 指向元素的变量

data: { // data

list: [1,2,3]

}

});

也可以写成这种形式 v-for=\'v in list\' ，重复的数据也可以是js对象格式的。

v-show 与angular中的 ng-show 是一样的，值为 true 则显示，false 则隐藏(display：none)。

v-model 与angular中的 ng-model 一样，主要用于input元素值的绑定。

v-bind: 用于绑定属性值；

var vm = new Vue({

el: \'#box\', // 对应的元素选择器 或者是 指向元素的变量

data: { // data

class: [\'class1\',\'class2\'], //

src: \'img/1.png\'

}

});

这里的class数据也可以是对象形式的 {\'class1\': true, \'class2\': false}，对象中的key值为类名，value为真则应用此类名，否则反之；

还可以是字符串 \'class1\' 。

v-bind: 的简写形式，如 v-bind:class 可以写成 :class ,  v-bind:src 可以写成 :src ，推荐使用简写。

事件绑定

vuejs中使用 v-on:click="fn()" 的形式绑定事件：

//

// 也可以是一条js语句

// @click 是 v-on:click 的简写，推荐使用

// .stop 表示阻止冒泡

// .prevent 表示默认行为

// .up 对应键盘up键

// .left 对应键盘left键

// .13 对应 enter 键

var vm = new Vue({

el: \'#box\', // 对应的元素选择器 或者是 指向元素的变量

data: { // data

username: \'vuejs\'

},

methods: { // 存放事件对应的方法

add:function(e){}

}

});

vue 提供多种形式的事件绑定，没有他做不到，只有你想不到。

ajax

vue 本身并没有封装ajax模块，我们可以使用vue的插件 vue-resource.js 来做数据交互；当然也可以使用 jquery

vue-resource.js 的API 与jquery的 ajax 类似，容易上手：

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\')} // 失败时的回调函数

)

}

}

});

$http.get() 返回的是 promise 对象。大白话讲解Promise(一)

$http也支持 post(), jsonp()跨域 等方法。