vue小总结

以下是我在使用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 中记得写入。