VUE用法总结

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);

2. 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值

3. 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"
            >

4. 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")
        }
      ]
    };
  },

5. VUE请求在header加上token：

  Vue.http.headers.common['token'] = localStorage.getItem("token");

6. 在获取完数据之后执行某个函数：

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下的直系属性状态，则可以。

未完待续。。。