首页 > 代码库 > vuejs学习笔记（1）--属性，事件绑定，ajax
vuejs学习笔记（1）--属性，事件绑定，ajax
本文转自：http://www.cnblogs.com/shuai5288/archive/2017/04/05/6670923.html
属性
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:http://www.mamicode.com/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="http://www.mamicode.com/vue.js"></script> <script src="http://www.mamicode.com/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学习笔记（1）--属性，事件绑定，ajax
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。