后端必会的前端vue基础知识

远走与梦游

已于 2022-10-26 21:11:01 修改

阅读量3.5k

点赞数 59

文章标签：前端 vue.js javascript

于 2022-10-07 18:08:11 首次发布

本文链接：https://blog.csdn.net/weixin_52210557/article/details/127196742

版权

本文深入解析前端项目目录结构，包括build、config、src等关键部分，详细讲解了api、assets、components等子目录的功能及作用。同时，介绍了如何在实际项目中应用这些结构，包括render函数、Vue组件、数据绑定、生命周期钩子、prop通信等内容。

摘要由CSDN通过智能技术生成

前端目录结构

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">