前端用vue后端用ssm（后端必会的前端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">