码迷,mamicode.com
首页 > 其他好文 > 详细

vue小总结

时间:2016-05-30 20:00:29      阅读:258      评论:0      收藏:0      [点我收藏+]

标签:

以下是我在使用vue过程中自己对vue的一些小总结,希望对学习vue的亲们能有所帮助:

 

1.   http的post请求:

this.$http({url: ‘/someUrl‘, method: ‘GET‘}).then(function (response) {           // success callback       }, function (response) {           // error callback       });

eg1:this.$http.post(serverApi, {‘method‘:‘getOrgInfo‘,‘params‘:{orgid:_orgid}}, {

headers: {

token: userToken

}

}).then(function(response) {

if(response.ok&&response.data!=undefined){

this.enterpriseData= response.data[0][0];

this.enterpriseData.orgid=_orgid;

            }else{

alert(‘网络请求数据失败!‘);

}

},function(err) { //ajax请求出错

              alert(err.message);

            }); 

eg2:this.$http.post(serverApi, _this.getOrgOpListData, {

                headers: {

                    token: userToken

                }

            }).then(function(response) {

                if (response.ok && response.data != undefined ) {

                    response.data[1].forEach(function(item) {

                        item.members = false;

                        item.leader = false;

                    });

                    this.getOrgOpListResult.items = response.data[1];

                }

           },function(err) { //ajax请求出错

              alert(err.message);

            }); 

   此处有坑请注意:当你将ajax请求拿回的数据赋值给getOrgOpListResult.items 后,并且想动态再给getOrgOpListResult.items 添加属性时,当你在别的方法里需要改变动态添加的这个属性时,你是访问不到这个属性的,所以应该在ajax请求拿回的数据里动态添加属性,然后再将其赋给getOrgOpListResult.items,然后你就可以访问并修改给getOrgOpListResult.items动态添加的属性了。

2.数据双向绑定:

 适用于:<input><select><textarea>

  eg:JS代码:

     data () {

         return {

             eg1:‘张三‘,

  }

           }

     html代码:

<input  type=‘text‘  v-model=‘eg1‘>

当你在改变这个文本输入框的值时,data中的“eg1”的值相应也会改变。

3.如果想在只是单纯的显示data里数据的值。

   eg:JS代码:

     data () {

         return {

             eg1:‘张三‘,

  }

           }

html代码:<label >{{eg1}}</label>

4.循环遍历v-for:

eg:

      <template v-for="(index city ) in dc.city">

<option value=‘{{city.codeno}}‘>{{ city.codename }}</option>

</template>

dc.city是你要循环遍历的data,index代表city数据的索引,city 是dc.city的别名,city.codeno、city.codename是循环遍历的data里的属性。

5.逻辑判断v-if:  v-if是根据所传的值决定是否加载该模块/dom。

eg:  JS代码:

     data() {

     return {

            showFlag: true,

             }

         }

html代码:

<div v-if=‘showFlag‘ class=‘login-container‘ ></div>

当showFlag的值是true时,class为login-container的div才显示。

6.v-else:在v-if或v-show后紧跟的dom后可以跟v-else,逻辑类似与if和else。

7.v-on:缩写@,绑定事件监听器,普通元素中只能监听原生DOM事件,自定义组件中可以监听组件中的自定义事件.可以传参$event

eg1: JS代码:

methods: {

    backLogin: function() {

          this.showRegisterFlag = false;

          this.showforgotPwdFlag = false;

          this.showFlag = true;

},

}

html代码:

<button type=‘submit‘ class=‘btn btn-warning‘ v-on:click=‘backLogin‘>返回</button>

当单击“返回”按钮时触发其clik事件,调用‘backLogin‘方法。

eg2:JS代码:

methods: {

    addSelectedTagForMembers: function(index) {

            this.getOrgOpListResult.items[index].members = true;

        },    }

html代码:

<template v-for=‘item in getOrgOpListResult.items‘>

<div class="select-item" v-on:click=‘addSelectedTagForMembers($index)‘>{{item.name}}</div>

 </template>

当单击某一个class为select-item的div时,调用addSelectedTagForMembers($index)方法,在此方法中改变当前你点击的getOrgOpListResult.items里members属性的值。

8.v-bind:可以绑定src/class /style/prop等,此处重点说下v-bind:class的用法

eg1: <div class="select-item" v-bind:class="{‘selected‘: item.members}" ></div>

当item.members的值为true时,该div的class="select-item selected"

eg2:

<input v-bind:class="{‘reds‘: confirmPassword!=registeredData.password}" class=‘form-control‘ type="password">

当满足confirmPassword!=registeredData.password时该密码框class=‘form-control  reds ‘

 9.v-link:是一个用来让用户在 vue-router 应用的不同路径间跳转的指令。该指令接受一个 JavaScript 表达式,并会在用户点击元素时用该表达式的值去调用 router.go

eg: <a v-link="{ path: ‘/practice/taskAssignment/‘+parmasForRouter.ac_id, activeClass: ‘practice-active-class‘}">任务分配</a>

当你要在跳转过去的页面taskAssignment内拿到你跳转页面时传的参数ac_id值时,用以下方式获取传参的值:

var acid=this.$route.params.ac_id;

链接活跃时的class:带有 v-link指令的元素,如果 v-link对应的 URL 匹配当前的路径,该元素会被添加特定的 class。默认添加的 class 是 .v-link-active,而判断是否活跃使用的是包含性匹配

链接活跃时的 class 名称可以通过在创建路由器实例时指定 linkActiveClass全局选项 来自定义,也可以通过 activeClass内联选项来单独指定:

eg:  <a v-link="{ path: ‘/a‘, activeClass: ‘custom-active-class‘ }"></a>

10.引用插件:

eg :  JS代码:

     import yeziTablePaing from ‘yezi-vue/widget/yeziTablePaing.vue‘

     export default {

components:{

yeziTablePaing

          },

         props:{ },

      }

当你用import引用插件后在 components 中记得写入。

vue小总结

标签:

原文地址:http://www.cnblogs.com/yingzi1028/p/5543575.html

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