Vue项目框架

Vue项目框架

基本组件的使用：

new Vue({ el, //要绑定的DOM element data, //要绑定的资料 props, //可用来接收父原件资料的属性 template, //要解析的模板，能够是#id , HTML 或某个DOM element 实体 computed, //定义资料的getter 与 setter,即须要计算后才能使用的属性 components, //定义子元件，可用ES6简写法 例如（MyHeader） methods, //定义能够在元件或样版内使用的方法 propsData, //存放预设的props 内容，方便测试用 relplace, //要不要用template取代el指向的DOM Element预设为ture })

这里说一下v-if和v-show的差异

v-if与v-show最大的差异在于对DOM的操做，v-if会依照条件决定是否将原件渲染至网页上，并决定时间于材料的监听是否要绑定至原件或直接销毁该原件

v-show则是一定会产出原件，但以条件来切换css（style）的现实与否，若条件改变频繁，用v-show来切换更适合

再来一张vue1.0和vue2.0的对比图 

这里在解释一下method和component以及slot

<b>methods:</b>一次加载一个数据 
<b>component:</b>一次加载多个数据,至关于属性的一个实时计算，若是实时计算里关联了对象，那么当某个值改变的时候，同时会发出实时计算。 
<b>slot:</b>使用slot分发内容，他的做用主要是为了让组件组件以前能够进行组合（混合父组件的内容和子组件本身的模板，这个过程叫作内容<b>分发</b>） 
<slot>的意思是插槽，插入的内容是从父组件传进来的,浅显点说就是提早站好坑，等须要用的时候，在过来用，比如老爹和儿子去吃饭，吃饭前，老爹要去上厕所，让儿子去占好餐桌，等老爹回来后，二人在一块儿吃。<slot>就是外部调用时，标签中的内容。若是外部调用时没有提供内容的话，那么它就会使用本身默认的内容。举一个例子说明：

<template> <div> <slot name="CPU">这儿插你的CPU</slot> <slot name="GPU">这儿插你的显卡</slot> </div> </template>

假设有个组件computer

<template> <computer> <div slot="CPU">Intel Core i7</div> <div slot="GPU">GTX980Ti</div> </computer> </template>

补充vue的几个很重要生命周期：

beforecreate:这个Vm 在实例化以后 就是刚生下来 
beforeCreate: function(){}

create:这里已经完成了 数据观测 属性和方法 的运算 事件回调 
created: function(){}

挂载： 
beforemount:挂载以前使用 挂载就是 $el属性不能用 
beforeMount: function(){}

mount:挂载到实例上了，原有的 el 被新建立的vm.$el替换了 
mounted: function(){}

DOM： 
beforeupdated:当数据更新时调用 
beforeUpdate: function(){}

updated:因为数据的修改，虚拟DOM 从新渲染和打补丁 这个以后调用该钩子 
updated: function(){} 

Vue父子级的传值

一、 父页面向子页面传值 
①例如：

<editmerchant v-ref:profile></editmerchant>

 

父页面经过赋值

self.$refs.profile.items = items[i];

把父页面的值放到items中存储， 
（注：在一个父页面中有多个v-ref时，profile是你能够定义的名字，可是注意要和$refs调用的名称保持一致。） 
在子页面中直接调用items的方法属性便可。可是必须在初始化数据的时候return items: {}，

export default { data() { return { items:{} } }, }

 

否则没有预期效果哦～ 
②在父页面中绑定事件，调用子页面的方法，子页面经过props来触发。 
父：<editamount v-ref:profile2 :msginfo="msgInfo" ></editamount> 
 
子： 

二、子页面向父页面传值（子页面修改完成，父页面的数据不刷新获得更新） 
父页面经过v-on绑定对应的事件

<editgoods v-ref:profile v-on:parentinfo="search"></editgoods>

子页面使用$emit 
 
这样就实现了子页面传值给父页面啦~

导入导出

若是是涉及到后台管理的系统开发，这个多半都会用到~这里会介绍两种方法来实现，不过都大同小异：

1（第一种）、 
① 导入 

导入是经过表单来作的，因此必需要使用FormData（使用FormData的最大优势就是咱们能够异步上传一个二进制文件。）

②导出 
1.若是是get方式能够直接把下载的连接写到href里面如：<a href=”xxx.com”></a>这种方式的局限性是不适合传不少参数。 
2.能够经过form表单解决 

传递不少个参数，就这样实现O(∩_∩)O（截图部分是主要代码）

二、（第二种） 
① 上传

• 在实现下载的过程当中，老是会遇到请求方式post的问题。我须要的是get请求的方式。 
  这里找了一下，axios能够强制转为get的方式。

axios.get('http://10.1.5.217:8080/api/loanRace/excelDownload').then( res => { console.log(res); }) api.excelExport().then( res =>{ if(res.errcode == "00000000"){ console.log(res.datas); this.tableData = res.datas; } })

• 外部api中须要import引入axios

import axios from 'axios'

• 在接口api.js中，export导入baseUrl

export default { baseURL: axios.defaults.baseURL， //TODO.... }

错误的上传（×）：

importInfo:function() { var file = document.getElementById('upload'); //e.currentTarget.files 是一个数组，若是支持多个文件，则须要遍历 // var name=e.currentTarget.files[0]; // var params = new FormData(name); var formData = new FormData(file[0]); console.log(formData); api.excelConfirm(formData).then( res =>{ console.log(res); if(res.errcode == "00000000"){ this.tableData = res.datas; } }); }

正确的上传（√）：

importInfo:function() { var file = document.getElementById('upload'); //e.currentTarget.files 是一个数组，若是支持多个文件，则须要遍历 // var name=e.currentTarget.files[0]; // var params = new FormData(name); console.log(file.files[0]); //获取当前的文件 var params = new FormData(); //通常数据都放在form表单里 params.append('file',file.files[0]); //excelConfirm()上传的接口 api.excelConfirm(params).then( res =>{ console.log(res); // if(res.errcode == "00000000"){ // this.tableData = res.datas; // } }); }

上传执行结果： 

②下载 
由于下载的方式是get请求，不涉及到传不少参数的问题，因此这里直接能够用a连接就能够下载，如：

<a v-bind:href="downloadUrl" class="downloadExcel">下载Excel</a>

exportInfo:function() { window.location.href = this.downloadUrl; }