前端目录结构
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才能下发到子组件中文章来源：https://www.toymoban.com/news/detail-809762.html
注意：所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定，父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值，但是不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告文章来源地址https://www.toymoban.com/news/detail-809762.html
//子传父
getPropList(){
if(this.PageShow){
this.$emit('get-data',this.pageInfo)
}else{
this.#emit('get-data')
}
}
//父页面
<title @get-data="getPropList">到了这里，关于后端必会的前端vue基础知识的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
