码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-04-05 23:26:30      阅读:236      评论:0      收藏:0      [点我收藏+]

标签:键盘   json   src   str   stop   讲解   成功   字符   mis   

属性

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

标签:键盘   json   src   str   stop   讲解   成功   字符   mis   

原文地址:http://www.cnblogs.com/shuai5288/p/6671031.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!