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=1
name:'要把之前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 是为了解决跨域
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.
<Modal
v-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
入坑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 就好了
423
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
