iview select选中值取值

vue-cli3创建项目 (创建一个项目 | Vue CLI)
1,vue ui (视图创建,会在localhost打开页面,创建项目)
2,vue create hello-world

路由跳转

// 字符串
this.$router.push('/home/first')

// 对象
this.$router.push({ path: '/home/first' })

// 命名的路由
this.$router.push({ name: 'home', params: { userId: wise }})

1.$emit
this.$emit('showCityName',data);//select事件触发后，自动触发showCityName事件

2.v-for

数组的渲染:
v-for='(item,index) in list' :key="item.id" //index是序号, 加了:key(一定要具有唯一性)
对象渲染:
v-for='(item,key) in Obj' :key="item.id" //item是值,key是键名,加了:key(一定要具有唯一性)

3,Vue.set

1,首先要引入
improt Vue from 'vue'2,然后在方法中改变页面数据的值
methods:{addBtn(){ //点击按钮Vue.set(this.list, 1, { //this.list 数据数组,1 是数组index=1name:'要把之前list 第二个的name改成,现在的值'})}
}

4,$bus 全局使用父子组件之间的通信

main.js
创建一个全局的$bus对象
const EventBus = new Vue()Object.defineProperties(Vue.prototype, {$bus: {get: function () {return EventBus;}}
})
子组件:
在子组件中可以互相通信
methods:{nav(item){this.$bus.$emit('navBtnSublis',item);console.log('触发兄弟组件事件',item.id);}},
created(){var _self = this;this.$bus.$on('navBtnSublis', function (data) {console.log('接收到兄弟组件传参', data.id);})},
父组件接受:mounted () {var _self = this;this.$bus.$on('navBtnSublis', function (data) {console.log('父接受子', data.id);})}

5.props 可以是数组或对象，用于接收来自父组件的数据

6.computed 计算属性类型：{ [key: string]: Function | { get: Function, set: Function } }

7.watch 监听

8,组件使用

1,<com-a></com-a>
2,<p :is = 'com-a'></p>
3,如下:

9,父组件给子组件插入模板,需要<slot></slot>插槽

9-1 父级: 可以插入<img> span 等等

9-1 子级:

9-2 父级: (父级向子级给指定的插槽插入模板)

9-2 子级:

主意:
用此项目的时候
npm install (会报错)
修改:

fs.write(fd, buf, 0, buf.length, 0, function(err, written, buffer) {});

替换为

fs.write(fd, buf, 0, 'utf-8', function(err, written, buffer) {});

然后:npm run init 最后:npm run dev

Vue中的package.json里面dependencies和devDependencies区别

使用 npm i 【包名】 --save-dev 安装的包，会被写入到 devDependencies 对象里面去；而使用 npm i 【包名】 --save 安装的包，则被写入到 dependencies 对象里面去。

dependencies：
应用能够正常运行所依赖的包。这种 dependencies 是最常见的，用户在使用 npm install 安装你的包时会自动安装这些依赖。
devDependencies：
开发应用时所依赖的工具包。通常是一些开发、测试、打包工具，例如 webpack、ESLint、Mocha。应用正常运行并不依赖于这些包，用户在使用 npm install 安装你的包时也不会安装这些依赖。
peerDependencies：
应用运行依赖的宿主包。最典型的就是插件，例如各种 jQuery 插件，这些插件本身不包含 jQeury，需要外部提供。用户使用 npm 1 或 2 时会自动安装这种依赖，npm 3 不会自动安装，会提示用户安装。
bundledDependencies：
发布包时需要打包的依赖，似乎很少见。
optionalDependencies：
可选的依赖包。此种依赖不是程序运行所必须的，但是安装后可能会有新功能，例如一个图片解码库，安装了 optionalDependencies 后会支持更多的格式。
我们在使用npm install 安装模块或插件的时候，有两种命令把他们写入到 package.json 文件里面去，比如：
npm i 【包名】 --save-dev
npm i 【包名】 --save
在 package.json 文件里面提现出来的区别就是：
使用 npm i 【包名】 --save-dev 安装的包，会被写入到 devDependencies 对象里面去；
而使用 npm i 【包名】 --save 安装的包，则被写入到 dependencies 对象里面去。
那么 package.json 文件里面的 devDependencies 和 dependencies 对象有什么区别呢？
devDependencies 里面的插件(比如各种loader，babel全家桶及各种webpack的插件等)只用于开发环境，不用于生产环境，因此不需要打包；而 dependencies 是需要发布到生产环境的，是要打包的。
作者：雨伞不挡雨
链接：https://www.jianshu.com/p/ce808cd37ea6
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

*******vue跨域,本地,测试,生产配置*

vue项目之配置本地，测试，生产环境，配置axios.defaults.baseURL，解决跨域问题

上面的是连接文档

记得在test.js中修改const webpackConfig = require('./webpack.test.conf')上面文档漏掉了

dev.env.js配置成localhost 是为了解决跨域

解决跨域代理

test 是新增的完全复制了prod的,

vue+iview入坑

1,<Input v-model="addMenuFormData2.resPath" :maxlength="100" :disabled="isDetail"></Input>正常的Input 长度 由 :maxlength="100"可以控制 输出的是字符串
2.<InputNumber v-model="addMenuFormData2.resOrder" :max="99999" :min="0"></InputNumber>number类型的,InputNumber,:max="99999", :min="0" 可控制长度输出的也是字符串
假如后端返回的是数字 不是字符串,需要+''转换成字符串3.<Modalv-model="showModel"title="重置密码":mask-closable="false"><Form ref="addDepForm" :model="restPassData" class="form-content"  :label-width="110"><Row ><Col span="22"><FormItem label="账号密码" :required="true"><Input v-model.trim="restPassData.userPassword" type="password" :maxlength="20" :required="true"></Input></FormItem></Col></Row></Form><div slot="footer">//slot modal 点击确定的时候 不管怎么样都会关闭 所以必须要用slot插入自定义的底部按钮组<Button type="text" size="large" @click="showModel=false">取消</Button><Button type="primary" size="large" @click="saveItem">确定</Button>//保存成功后this.showModel = false</div></Modal>

iview上传图片,
初始化:
this.uploadList = this.$refs.upload.fileList;//图片数组
this.httpApi = process.env.API_ROOT;//全局定义环境域名,不在这定义 会保存找不到process

直接这样写会报错找不到fileList,必须如下:

入坑2:iviewui和element中日期选择控件少一天问题

这iview的时间控件真神奇，
我当时用的是l来v-mode绑定的，这样绑定后获取的时间好像叫utc时间，
如果要想获取正确的时间，通过@on-change事件来绑定即可，
(注意，用@on-change来获取时间的时候，就不能加v-model了，
不然获取的时间还是老样子，这里需要注意下，我就入过坑了),
如下代码：
<div class="height-400px" v-show="threeStep"><div class="layout-content-main" style="margin-left: 50px; margin-top: 30px;"><FormItem label="时间范围"><span><DatePicker type="date" @on-change="getStartTime" :value = 'listParam.creatStartTime' placeholder="选择日期" style="width: 200px"></DatePicker><span>至</span><DatePicker type="date" @on-change="getEndTime" :value = 'listParam.creatEndTime' placeholder="选择日期" style="width: 200px"></DatePicker>//加 :value 这块是为了重置的时候清空值  不加的话没法清空  </span></FormItem></div>getStartTime(starTime){this.listParam.creatStartTime = starTime;},getEndTime(endTime){this.listParam.creatEndTime = endTime;},

vue+iview Table表格Input数据双向绑定

1,表头----动态数据

<Table :columns="columns" :data="dataList" border ref="selection" ><template v-for="item in columns" //这块循环只是为了给:solt 赋值slot-scope="{ row, index }" :slot="item.slot" >//需要吧solt跟表头对应上<Input  v-bind:value="Object.values(row)[item.index]"//这是value不是v-model:title="Object.values(row)[item.index]" // 获取value展示页面:ref="index+Object.keys(row)[item.index]"//:ref 很关键 获取key:maxlength="60"@on-blur="inputModel(index,//这是裂变的第几行index+Object.keys(row)[item.index],//index+key 为了区分第几行的数据 (唯一)Object.keys(row)[item.index])"></Input></template>
</Table>

2,表头---数据固定

columns:[{title:'项目部管控部门',key:'name',slot:'action',render: (h, params) => {var vm = this;return h('Input', {props: {value: params.row.name},on:{'on-change' (event) { //input 数据变化时候 重新赋值params.row.name = event.target.value;vm.dictList[params.index] = params.row;}}})}},
],

问题描述:

1,wangeditor 富文本,在ie10下面,上传图片成功后无法显示,且有报错this.editor._useStyleWithCSS = true //为了兼容ie10

2,iview 中 Select组件,在ie10下面选中之后无反应,百般搜索之后发现加 transfer 就好了