标签：
以下是我在使用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 中记得写入。
标签：
原文地址：http://www.cnblogs.com/yingzi1028/p/5543575.html
