vue实战技巧

12月18日更新版本

使用vue已经一年多了,做了几个项目，总结点实战经验，巩固一下记忆。

1、插件在打包的时候，由于样式写在组件里面，导致打包后样式，被插件原来样式覆盖，因此必须提取出来，放在公共样式里面，或者新建一个专属的css文件。

2

问题：之前这样import echarts from ‘echarts’引用，版本升级后会报错

解决办法：import echarts from ‘echarts/dist/echarts’

3、组件中标签名不要用语义化标签，如header footer等 容易报错。

4、template中 只能有一个根div，否则也会报错如下：

ERROR in ./node_modules/vue-loader/lib/template-compiler?{"id":"data-v-14b150ee","hasScoped":false,"transformToRequire":{"video":"src","source":"src","img":"src","image":"xlink:href"},"buble":{"transforms":{}}}!./node_modules/vue-loader/lib/selector.js?type=template&index=0&bustCache!./src/App.vue
(Emitted value instead of an instance of Error) 
  Error compiling template:
  
  <div id="app">
    <img src="./assets/logo.png">
    <router-view/>
  </div>
  <div></div>

5、style 里引用mixin时 一定要声明

<style lang="scss" scoped>。

6、

问题：想在渲染出来的HTML元素上监听click事件怎么办？

方法：

<router-link v-on:click.native="doSomethingCool"to="/">Home</router-link>

7、:class=”变量？class名1:class名2”，处理页面tap切换等改变背景问题

8、v-if 和 v-show的区别

简单来说，v-if 的初始化较快，但切换代价高；v-show 初始化慢，但切换成本低

1.共同点：都是动态显示DOM元素

2.区别

手段：

v-if是动态的向DOM树内添加或者删除DOM元素，相当于jquery的append和remove方法；

v-show是通过设置DOM元素的display样式属性控制显隐,相当于display:none和display:block；

编译过程：

v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；

v-show只是简单的基于css切换；

编译条件：

v-if是惰性的，如果初始条件为假，则什么也不做；只有在条件第一次变为真时才开始局部编译（编译被缓存？编译被缓存后，然后再切换的时候进行局部卸载);

v-show是在任何条件下（首次条件是否为真）都被编译，然后被缓存，而且DOM元素保留；

性能消耗：

v-if有更高的切换消耗；

v-show有更高的初始渲染消耗；

使用场景：

v-if适合运营条件不大可能改变；

v-show适合频繁切换。

9、加载闪动问题

使用v-cloak

<style type="text/css">
      [v-cloak] { display: none }
</style>
<div v-cloak>{{message}}</div>

10、axios的get,post方法

GET方法

axios.get(url, {
　　params: { 'key': 'value' }
}).then(function (response) {
　　alert(''.concat(response.data, '\r\n', response.status, '\r\n', response.statusText, '\r\n', response.headers, '\r\n', response.config));
}).catch(function (error) {
　　alert(error);
});

对应服务端获取数据

const urlModule = require('url');
let params = urlModule.parse(request.url, true).query;//解析数据 获得Json对象
let value = params.key;//通过参数名称获得参数值

POST方法

var params = new URLSearchParams();
params.append('key', 'value');
axios.post(url, params).then(function (response) {
　　alert(''.concat(response.data, '\r\n', response.status, '\r\n', response.statusText, '\r\n', response.headers, '\r\n', response.config));
}).catch(function (error) {
　　alert(error);
});

对应服务端获取数据

const queryStringModule = require('querystring');
let postData = '';
request.on('data', function (chunk) {
　　postData += chunk;//接收数据
});
let params = queryStringModule.parse(postData);//解析数据 获得Json对象
let value = params.key;//通过参数名称获得参数值

11、axios的get,post方法

GET方法

axios.get(url, {
　　params: { 'key': 'value' }
}).then(function (response) {
　　alert(''.concat(response.data, '\r\n', response.status, '\r\n', response.statusText, '\r\n', response.headers, '\r\n', response.config));
}).catch(function (error) {
　　alert(error);
});

对应服务端获取数据

const urlModule = require('url');
let params = urlModule.parse(request.url, true).query;//解析数据 获得Json对象
let value = params.key;//通过参数名称获得参数值

POST方法

var params = new URLSearchParams();
params.append('key', 'value');
axios.post(url, params).then(function (response) {
　　alert(''.concat(response.data, '\r\n', response.status, '\r\n', response.statusText, '\r\n', response.headers, '\r\n', response.config));
}).catch(function (error) {
　　alert(error);
});

对应服务端获取数据

const queryStringModule = require('querystring');
let postData = '';
request.on('data', function (chunk) {
　　postData += chunk;//接收数据
});
let params = queryStringModule.parse(postData);//解析数据 获得Json对象
let value = params.key;//通过参数名称获得参数值