前端目录结构
build ------前端工程webpack构建设置
config ------ 前端工程构建参数设置(index.js 打包)
src ---- 项目代码
????????api ---- 服务端口请求
? ? ? ? assets ---- 项目静态文件、图片
? ? ? ? coponents ---- 项目自定义组件
? ? ? ? mock ----- 模拟数据
? ? ? ? router ----- 项目路由配置
? ? ? ? style ----- 项目样式文件
? ? ? ? utils ----- 项目公告方法文件
? ? ? ? directives ----- 项目自定义指令文件
? ? ? ? mixins ---- 项目混入文件
? ? ? ? views ----- 页面
? ? ? ? app.vue ---- 项目入口渲染页面
? ? ? ? main.js ----- 项目入口文件，创建整个vue实列，将router、样式注入
index.html? ---- 项目入口模板
package.json ---- 项目依赖配置
sysconfig.js ----? 项目常用接口配置
Render函数render
第一：语法是：render: (h, params) => {
此时它所代表得含义是：render:(h,params) => {
return h(" 定义的元素 “，{ 元素的性质 }，” 元素的内容"/[元素的内容])
实例：
title: ‘角色’,
key: ‘role’,
width: ‘70px’,
render: (h, params) => {
if (params.row.role === ‘m’) return h(‘span’, {style: ‘background-color: #17dc1d’}, ‘主’)
else if (params.row.role === ‘s’) return h(‘span’, {style: ‘background-color: #17c1dc’}, ‘备’)
else return h(‘span’, {style: ‘background-color: #dc8417’}, ‘无’)
}
this.$moment
main.js 挂载 引入
import moment from 'moment'//导入文件
Vue.prototype.$moment = moment;//赋值使用
在组件中使用this.$moment
this.$moment('string').format("YYYY-DD-MM")
this.$moment('2018-09-19T05:54:32.767Z').format("YYYY-DD-MM")
let galeDt = this.$moment(params.row.galeDt, "YYYYMMDD").format("YYYY-MM-DD");
Object.assign({}, this.data)
js 中 拷贝对象原生方法，用于对象合并 Object.assign({}, this.data)
总体页面介绍
data(){
????????return{
? ? ? ? //保存当前页面的局部变量，data数据必须用return返回
????????}
},
components:{
//当前页面引入自定义的组件
},
props:{
//当前页面组件接受外部变量
},
watch:{
//监听页面data、props变量变化
},
computed:{
//定义template中需要计算的变量，返回计算后的值
},
created(){
//页面创建完后需要执行的内容
//此时页面组件还没有挂载，不能获取document内容
},
mounted(){
//页面渲染后完成要执行的内容
},
updated(){
//数据更改需牛DOM重新渲染后要执行的内容
},
destroyed(){
//页面组件实例销毁后执行的内容
}
v-if玉v-show区别
v-if不会渲染，dom节点是没有的，v-show有dom节点，相当于display:none
v-model：界面上实时输入数据的时候，对应的表单绑定值已经被更改
父子通信prop
父组件的数据需要通过prop才能下发到子组件中
注意：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定，父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值，但是不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告
//子传父
getPropList(){
if(this.PageShow){
this.$emit('get-data',this.pageInfo)
}else{
this.#emit('get-data')
}
}
//父页面
<title @get-data="getPropList">
?
|