1.请求方法：
vue-resource是一个通过XMLHttpRequest或者JSONP技术实现异步加载服务端数据的插件。
引入<script src="../vue-resource.js"></script>
this.$http.get(url+params).then(function(){})
this.$http.post(url,params).then(function(){})
vue-cli:
npm i vue-resource --save
然后在main.js里：
import VueResource from 'vue-resource';
Vue.use(VueResource);
- ref获取dom：
<input type="text"
class="input"
id="pickdate_start"
v-model="startDate"
ref="newStart"
/>
Vue.set(container, 'startDate', this.$refs.newStart.value);
// 目标容器，data参数名，ref值
- v-for和v-if共用优先级渲染数据：
li只渲染前5条数据，先在计算属性里判断，再渲染过滤后的数组
computed: {
activeListCon: function() {
return this.ListCon.filter(function(List,index) {
return index<5;
});
},
},
<li
class="list_item mui-card"
v-for="(List,index) in activeListCon "
:key="index"
>
- vue 动态加载图片src路径的解决办法：
<ul>
<li class="list" v-for="item in materialData" :key="item.id">
<img :src="item.url" alt>
<p>{{item.title}}</p>
</li>
</ul>
data() {
return {
materialData: [
{
id: "001",
title: "哈哈哈哈",
creater: "黄哈哈",
url: require("../imgs/defultImg.png")
},
{
id: "002",
title: "哈哈哈哈",
creater: "黄哈哈",
url: require("../imgs/testImg1.jpg")
}
]
};
},
- VUE请求在header加上token：
Vue.http.headers.common['token'] = localStorage.getItem("token");
- 在获取完数据之后执行某个函数：
var effectAnalysis = new Vue({
el: "#container",
data: {
analysisRank: [],
topParams: {
"page": 1,
"pageSize": 6,
"flag": 7,
"sortFlag": 1
}
},
mounted: function () {
var _this = this;
_this.getData();
},
watch: { // 监听数据异步获取完成之后执行函数
analysisRank: function () { // 监听data的analysisRank属性
var _this = this;
_this.$nextTick(function () {
computProcess()
});
}
},
methods: {
//获取数据
getData: function () {
var _this = this;
_this.$http.get(HTTP.url + "rest/spread/analysisRank").then(function (res) {
_this.analysisRank = res.body.data;
return echartBar(res.body.data);
});
},
7、路由跳转以及传参：
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{ // 路径
path: '/',
name: 'init',
component: resolve => {
require(['@/components/weibo/init.vue'], resolve);
}
},
})
this.$router.push({
name: "init",
params: {
type: 0 // 参数
}
});
8、设置接口请求头：
http: {
// 设置请求头
headers: {
token: userInfo.token,
siteCode: userInfo.siteCode,
region: userInfo.region
}
},
9、文本域监听v-model：
<textarea cols="30" rows="6" v-model="textAreaData" id="target" ref="textarea"></textarea>
data() {
return {
textAreaData: "", // 文本域
};
watch: {
// 监听文本域输入变化
textAreaData: function(data) {
this.textAreaData = data;
},
},
10、vue分页插件v-page：
https://terryz.gitee.io/vue/#/page/demo
11、v-for 渲染多层属性时候出现undefind：
eg： data：[
{
a:1,
b:{c:2,d:3}
}
];
v-for='(item,index) in data ;
item.a 和item.b能打印出来，而item.b.c是undefind；
解决办法：在外层包裹一层 v-if=‘item.b’ 判断
12、解析后台传值富文本带有html标签的字符串原样输出：
使用 v-html，但是在v-for中v-html默认将标签去除了，v-html解析vue的data下的直系属性状态，则可以。
未完待续。。。
