0


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

前端目录结构

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

本文转载自: https://blog.csdn.net/weixin_52210557/article/details/127196742
版权归原作者 远走与梦游 所有, 如有侵权,请联系我们删除。

“后端必会的前端vue基础知识”的评论:

还没有评论