長沙網(wǎng)站托管公司排名商品推廣與營銷的方式
MVVM架構(gòu)
Vue框架底層設(shè)計遵循MVVM架構(gòu)。
Model層（M）模型層（業(yè)務(wù)邏輯層）
View層（V）視圖層 主管UI
ViewModel層（VM）
將項目代碼劃分清晰的層次結(jié)構(gòu)后，非常有利于后期代碼功能維護。如果需要修改ui，則只需要修改view層代碼；如果需要修改業(yè)務(wù)邏輯，則只需要修改model層代碼。
基于腳手架的環(huán)境開發(fā)vue項目
開發(fā)vue項目的方式主要有兩種：
-
基于vue.js：在html中引入vue.js，讓vue.js管理頁面的
div#app元素。 -
基于腳手架環(huán)境：通過vue腳手架環(huán)境可以方便的創(chuàng)建一個通用的vue項目框架模板，在此基礎(chǔ)之上開發(fā)vue向更加便捷。適合工程化開發(fā)。
vue腳手架工具：VueCLI、Vite。
VueCLI提供了簡單的創(chuàng)建項目包、vue項目開發(fā)模式。需要安裝VueCLI。
npm config get registry ?# 查看npm源
npm set registry https://registry.npmmirror.com ?# 設(shè)置國內(nèi)npm鏡像源
?
npm install ?-g @vue/cliVueCLI項目很大，文件很多，大多數(shù)都在node_modules中，所以以后傳代碼不會帶著node_modules，大家下載了項目后由于缺少依賴模塊，項目跑不起來的。如果需要運行項目，則應(yīng)該在項目目錄下執(zhí)行命令：npm install。將會默認讀取package.json，下載所需要的依賴包，就可以正常跑項目了。npm run serve。
腳手架的運行過程： 當腳手架啟動時，將會打開 public/index.html ，并且在該網(wǎng)頁中運行 main.js ，將會創(chuàng)建 Vue 對象，通過 Vue 對象來管理 index.html 中的 #app 內(nèi)容的顯示。初始化狀態(tài)下，默認將 App.vue 組件中的內(nèi)容渲染到 #app 中，從而看到頁面效果。
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
?
Vue.config.productionTip = false
?
new Vue({router,store,render: h => h(App)
}).$mount('#app')在VueCLI項目中，所有的資源都會顯示在div#app中。 在此過程中就需要實現(xiàn)根據(jù)不同的請求資源路徑，顯示不同的頁面內(nèi)容。這個功能由VueRouter腳手架的路由系統(tǒng)來管理。
腳手架路由系統(tǒng)（VueRouter）的設(shè)計與應(yīng)用
平時在開發(fā)項目的過程中，需要訪問不同的路徑來看到不同的頁面內(nèi)容，在腳手架項目中，由VueRouter來管理項目的路由系統(tǒng)。 實現(xiàn)：訪問不同的路由地址，看到不同的頁面。
案例：寫一個頁面：首頁，該頁面只有首頁兩個字。訪問：http://localhost:8080/index時，看到該頁面。
實現(xiàn)思路：
-
先準備好一個vue組件：
views/Index.vue。寫好內(nèi)容。 -
手動配置路由，使得當訪問：/index時，看到該組件。
-
測試路由地址即可。http://localhost:8080/index
案例：寫個登錄頁面：賬號密碼兩個輸入框，一個提交按鈕。要求訪問地址：
http://localhost:8080/login 時，看到該登錄頁面。
案例：寫個注冊頁面：賬號、密碼、確認密碼、手機號，一個提交按鈕。要求訪問地址：
http://localhost:8080/register時，看到該注冊頁面。
Vue文件的語法
在腳手架項目中，每一個vue文件都成為是一個組件。一個組件封裝了頁面中的局部內(nèi)容（包括局部內(nèi)容的html結(jié)構(gòu)、局部內(nèi)容的css樣式、局部內(nèi)容的js功能）。這樣就需要研究一下.vue文件的語法。
.vue文件的基礎(chǔ)結(jié)構(gòu)
<template><div></div>
</template>
?
<script>export default {}
</script>
?
<style lang="scss" scoped>
?
</style>template部分用于定義當前組件的頁面結(jié)構(gòu)。
注意：template中的內(nèi)容有且僅有一個根元素。
script部分用于定義當前組件的js腳本。
注意：可以在script中通過data來定義響應(yīng)式變量，通過methods定義方法。
style部分用于定義當前組件的css樣式。
在style標簽中可以添加scoped屬性，一旦style標簽上有scoped屬性，則在此style段中定義的樣式，僅僅針對當前組件的生效（原理是當前組件的每一個元素都會生成一個屬性，然后vue將在style中定義的選擇器改為使用屬性選擇器，僅僅選擇當前組件內(nèi)的元素）。如果沒有scoped屬性，則樣式一旦加載，全局生效。
Vue的常用指令
-
v-on 綁定事件
-
v-bind 動態(tài)綁定屬性
-
v-show 設(shè)置元素顯示或隱藏 display:none
-
v-if v-else-if v-else 判斷元素是否輸出
-
v-html v-pre v-text
-
v-for
案例：編寫一個組件頁面：views/Directive.vue 當訪問：/directive時，看到它。
v-for指令的用法
v-for指令用于重復(fù)輸出當前元素。
案例：寫一個新的組件頁面：For.vue 當訪問： /for時看到它。
場景1
遍歷字符串數(shù)組輸出每一個列表項元素：
data: {nav: ['京東超市','京東家電','秒殺','拍賣','京東生鮮','PLUS會員']
}
<ul><li v-for="item in nav">{{item}}</li>
</ul>上述寫法，類似于：
for(let i=0; i<nav.length; i++){let item = nav[i]輸出 ?`<li> ${item} </li>`
}場景2
遍歷對象數(shù)組輸出每一個列表項元素：
data: {movies: [{id:1, name:'交換余生', showingon:'2021-10-10', duration:124},{id:2, name:'殺手', showingon:'2022-10-09', duration:114},{id:3, name:'功夫', showingon:'2023-1-10', duration:194},{id:4, name:'功夫熊貓', showingon:'2011-05-10', duration:141}]
}
<div><div v-for="item in movies" :key="item.id">ID：{{item.id}} ? | 名稱：{{item.name}} | 上映時間：{{item.showingon}} | 時長：{{item.duration}}分鐘</div>
</div>拓展1
在使用v-for遍歷輸出數(shù)組數(shù)據(jù)的同時，引用數(shù)組的下標：
<div v-for="(item,i) in movies" :key="item.id">..{{i}} 下標
</div>拓展2
純粹的按照數(shù)量重復(fù)輸出元素：
<div v-for="item in 100" :key="item">內(nèi)容</div>:key的作用
v-for指令一般都需要配一個v-bind:key（簡寫 :key）來為每一個列表項設(shè)置一個唯一標識符（簡單理解為每一個item一個名字）。目的是為了提高列表更新時的DOM渲染性能。如果列表中已經(jīng)包含很多列表項了，后續(xù)由于列表數(shù)據(jù)的變化需要重新渲染列表時，將會通過:key屬性來檢測當前需要渲染的列表項是否已經(jīng)渲染過（比較列表項的key在原始列表中是否已經(jīng)存在），如果已經(jīng)渲染過，就不會重新創(chuàng)建DOM了。
那么一般將什么設(shè)置為:key的值？
<div v-for="(item,i) in list" :key="item.id"></div> id是唯一屬性
<div v-for="(item,i) in list" :key="i"></div> 下標 但不建議:key的數(shù)據(jù)類型只能是number和string，不能是對象。同一個列表中的列表項的key不能重復(fù)，否則控制臺報錯。