前端目錄結(jié)構(gòu)

build ------前端工程webpack構(gòu)建設(shè)置

config ------ 前端工程構(gòu)建參數(shù)設(shè)置(index.js 打包)

src ---- 項(xiàng)目代碼

????????api ---- 服務(wù)端口請求

? ? ? ? assets ---- 項(xiàng)目靜態(tài)文件、圖片

? ? ? ? coponents ---- 項(xiàng)目自定義組件

? ? ? ? mock ----- 模擬數(shù)據(jù)

? ? ? ? router ----- 項(xiàng)目路由配置

? ? ? ? style ----- 項(xiàng)目樣式文件

? ? ? ? utils ----- 項(xiàng)目公告方法文件

? ? ? ? directives ----- 項(xiàng)目自定義指令文件

? ? ? ? mixins ---- 項(xiàng)目混入文件

? ? ? ? views ----- 頁面

? ? ? ? app.vue ---- 項(xiàng)目入口渲染頁面

? ? ? ? main.js ----- 項(xiàng)目入口文件，創(chuàng)建整個vue實(shí)列，將router、樣式注入

index.html? ---- 項(xiàng)目入口模板

package.json ---- 項(xiàng)目依賴配置

sysconfig.js ----? 項(xiàng)目常用接口配置

Render函數(shù)render

第一：語法是：render: (h, params) => {
此時它所代表得含義是：render:(h,params) => {
return h(" 定義的元素 “，{ 元素的性質(zhì) }，” 元素的內(nèi)容"/[元素的內(nèi)容])
實(shí)例：
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'//導(dǎo)入文件
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{

? ? ? ? //保存當(dāng)前頁面的局部變量，data數(shù)據(jù)必須用return返回

????????}

},

components:{

//當(dāng)前頁面引入自定義的組件

},

props:{

//當(dāng)前頁面組件接受外部變量

},

watch:{

//監(jiān)聽頁面data、props變量變化

},

computed:{

//定義template中需要計算的變量，返回計算后的值

},

created(){

//頁面創(chuàng)建完后需要執(zhí)行的內(nèi)容

//此時頁面組件還沒有掛載，不能獲取document內(nèi)容

},

mounted(){

//頁面渲染后完成要執(zhí)行的內(nèi)容

},

updated(){

//數(shù)據(jù)更改需牛DOM重新渲染后要執(zhí)行的內(nèi)容

},

destroyed(){

//頁面組件實(shí)例銷毀后執(zhí)行的內(nèi)容

}

v-if玉v-show區(qū)別

v-if不會渲染，dom節(jié)點(diǎn)是沒有的，v-show有dom節(jié)點(diǎn)，相當(dāng)于display:none

v-model：界面上實(shí)時輸入數(shù)據(jù)的時候，對應(yīng)的表單綁定值已經(jīng)被更改

父子通信prop

父組件的數(shù)據(jù)需要通過prop才能下發(fā)到子組件中

注意：所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定，父級組件發(fā)生變更時，子組件中所有的 prop 都將會刷新為最新的值，但是不應(yīng)該在一個子組件內(nèi)部改變 prop。如果你這樣做了，Vue 會在瀏覽器的控制臺中發(fā)出警告文章來源地址http://www.zghlxwxcb.cn/news/detail-809762.html

//子傳父
getPropList(){
    if(this.PageShow){
      this.$emit('get-data',this.pageInfo)
    }else{
      this.#emit('get-data')
    }
}

//父頁面
<title @get-data="getPropList">

到了這里，關(guān)于后端必會的前端vue基礎(chǔ)知識的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！