VUE

1.MVVM架構(gòu)

M：Model 模型層（業(yè)務(wù)邏輯層）主要包含JS代碼，用于管理業(yè)務(wù)邏輯的實(shí)現(xiàn)
V：View 視圖層 主要包含HTML/CSS代碼，用于管理UI的展示
VM：ViewModel （視圖模型層）用于將data與視圖層的Dom進(jìn)行動態(tài)綁定

2.基于腳手架環(huán)境開發(fā)Vue項(xiàng)目

①腳手架環(huán)境安裝

制作web項(xiàng)目，從小作坊狀態(tài)轉(zhuǎn)向工程化開發(fā)的狀態(tài)就需要了解Vue腳手架環(huán)境。
腳手架開發(fā)環(huán)境將會提供一套開發(fā)標(biāo)準(zhǔn)便于工程化快速開發(fā)。
基于腳手架環(huán)境就可以生成標(biāo)準(zhǔn)化開發(fā)時所需要的項(xiàng)目包。
官方文檔：Vue Cli官方文檔

環(huán)境要求：
1、node版本：12~16
查看版本：node -v
2、npm，包管理工具，需要配置倉庫鏡像地址，改為中國倉庫鏡像地址。
查看當(dāng)前鏡像地址：npm get registry
設(shè)置鏡像地址的命令：
npm set registry https://registry.npmmirror.com/ (淘寶)
npm set registry https://mirrors.huaweicloud.com/repository/npm/ (華為)

基于npm命令，全局安裝腳手架工具，這樣就可以通過該工具創(chuàng)建vue項(xiàng)目了
npm i -g @vue/cli
常見錯誤：mac系統(tǒng)權(quán)限不足，命令前加sudo 密碼 提權(quán)；network相關(guān)錯誤，檢查鏡像地址更換網(wǎng)絡(luò)

安裝成功后 重啟cmd窗口(重置環(huán)境變量) 查看版本：vue --version

②創(chuàng)建項(xiàng)目包

注意：
1、在哪一個文件夾中執(zhí)行vue命令創(chuàng)建項(xiàng)目，生成的項(xiàng)目就會出現(xiàn)在哪一個文件
2、創(chuàng)建項(xiàng)目所在文件目錄不要有中文和特殊字符
3、創(chuàng)建項(xiàng)目的目錄中，不要有vue.js

D:\Web\VUE\Day02
vue create 自定義的項(xiàng)目文件夾名稱
例如：vue create vue-pro

VueCli 將會讓我們選擇創(chuàng)建項(xiàng)目時的相關(guān)配置



后面的選項(xiàng)全部回車即可

進(jìn)入項(xiàng)目目錄執(zhí)行npm run serve即可啟動項(xiàng)目

③腳手架項(xiàng)目包的使用

使用 單獨(dú)vscode窗口 直接打開vue-pro文件夾
vue2推薦安裝兩個插件Vetur / Vue VSCode Snippets

腳手架運(yùn)行過程：
腳手架啟動時，將會打開public/index.html，并在該網(wǎng)頁中允許main.js，將會創(chuàng)建vue對象，通過vue對象來管理index.html中的 #app 內(nèi)容的顯示。初始化狀態(tài)下，默認(rèn)將App.vue組件中的內(nèi)容渲染到 #app 中，從而看到頁面效果。
所以研究 .vue 文件的寫法即可搞定各種在腳手架中開發(fā)vue項(xiàng)目的細(xì)節(jié)

template 部分用于定義當(dāng)前組件的頁面結(jié)構(gòu)。定義的這些頁面結(jié)構(gòu)，最終將會被掛載在 #app 中 。
注意：template中的內(nèi)容又且僅有一個根目錄

script 部分用于定義當(dāng)前組件的js腳本。通過ES6的export default語法將當(dāng)前組件中定義的js對象到處到外部供vue進(jìn)行后續(xù)處理

style 部分用于定義當(dāng)前組件中標(biāo)簽的css樣式

lang：語言 需要在創(chuàng)建項(xiàng)目時選擇 css pre-processors ，此處才可用

scoped：作用域。含有該屬性的style中定義的css樣式，僅當(dāng)前組件生效

3. 腳手架基礎(chǔ)結(jié)構(gòu)示例

綁定屬性和事件在腳手架中的寫法

<template>
  <div>
    <img width="400px" :src="`/img/${n}.jpg`" alt="" />
    <br>
    <button @click="n == 1 ? n = 4 : n--">上一張</button>
    <button @click="n == 4 ? n = 1 : n++">下一張</button>
    <h3>{{ moviename }}</h3>
    <div>電影時長：{{ m }}分鐘</div>
    <button @click="next">換一部</button>
  </div>
</template>

<script>
export default {
  // 腳手架項(xiàng)目中 data必須已函數(shù)的方式導(dǎo)出，返回一個數(shù)據(jù)對象
  // 返回的數(shù)據(jù)對象將會直接混入到vue對象中，成為vue對象的屬性
  // 為什么不直接用對象，而是用方法返回對象？
  // 原因：同一個組件在未來場景下復(fù)用時，需要做到防止屬性的混亂
  data() {
    return {
      moviename: '三體Ⅰ',
      m: 111,
      n: 1,
    }
  },
  methods: {
    // 定義函數(shù)
    next() {
      this.moviename = '三體Ⅱ'
      this.m = '222'
      this.n = this.n == 4 ? 1 : this.n + 1
    },
  },
}
</script>

<style lang="scss" scoped></style>

4.Vue的常用指令

v-show ：控制組件的顯示與隱藏
v-on ：綁定事件
v-bind ：動態(tài)綁定屬性
v-text ：為元素設(shè)置內(nèi)容文本 和{{text}}效果差不多 (類似dom.innerText)
v-html ：將文本當(dāng)作html代碼解析后顯示在元素中
v-pre ：不會將 {{ }} 當(dāng)作 vue 語法解析

<template>
  <div>
    <!-- 測試vue的常用指令 -->
    <p>{{ text }}</p>
    <p v-text="text"></p>
    <p v-html="text"></p>
    <!-- {{}}：是vue的語法，vue將會對其解析，編譯 -->
    <p>{{ 8 + 8 }}</p>
    <!-- v-pre指令：不解析vue的花括號 -->
    <p v-pre>{{ 8 + 8 }}</p>
    <p v-text="`{{8+8}}`"></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: `<span style="color:red">
      最近有什么新聞？鄭州富士康...韓國梨泰院...
      </span>`,
    }
  },
}
</script>

<style lang="scss" scoped></style>

v-for ：用于循環(huán)輸出當(dāng)前元素

    <p v-for="n in 10">文本...文本</p>
    
    <p class="item" v-for="(m, i) in movies" :key="i">{{ m }} - {{ i }}</p>
    
    <script>
    // 等價(jià)于
    for (n == 1; n < 10; n++) { dom.append(`<p>文本...文本</p>`) }
    
	for (let i = 0; i < movies.length; i++) {
	  let m = movies[i]
	  dom.append(`<p>${m} - ${i}</p>`)
	}
    </script>

v-for 指令更多用法

<template>
  <div>
    <!-- v-for指令的基礎(chǔ)用法 -->

    <!-- 循環(huán)打印n次，并在后面拼接遍歷的n -->
    <!-- v-for指令中，使用in與of沒有區(qū)別 -->
    <p v-for="n in 3" :key="n">段落in...{{ n }}</p>
    <p v-for="n of 5" :key="n">段落for...{{ n }}</p>

    <!-- 遍歷數(shù)組 -->
    <p>圖圖喜歡的電影：</p>
    <p class="item" v-for="ikun in movies" :key="ikun">{{ ikun }}</p>

    <!-- 遍歷過程中，同時訪問元素及其對應(yīng)下標(biāo) -->
    <p>圖圖喜歡的電影：</p>
    <p class="item" v-for="(m, i) in movies" :key="i">{{ m }} - {{ i }}</p>

    <!-- 訪問對象數(shù)組 -->
    <div class="food-item" v-for="(item, i) in foods" :key="i">
      <div style="width: 20%">ID：{{item.id}}</div>
      <div style="width: 20%">名稱：{{item.name}}</div>
      <div style="width: 20%">￥{{item.price}}</div>
      <div style="width: 20%">×{{item.num}}</div>
      <div style="width: 20%">商品小計(jì)：￥{{ item.price * item.num }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      foods: [
        { id: 1001, name: '??', price: '20', num: 5 },
        { id: 1002, name: '??', price: '30', num: 3 },
        { id: 1003, name: '??', price: '40', num: 4 },
        { id: 1004, name: '??', price: '50', num: 1 },
        { id: 1005, name: '??', price: '60', num: 2 },
      ],
      movies: ['三體Ⅰ', '三體Ⅱ', '三體Ⅲ', '三體Ⅳ', '三體Ⅴ'],
    }
  },
}
</script>

<style lang="scss" scoped>
.item {
  margin-left: 10px;
  display: inline-block;
  padding: 5px 10px;
  background-color: green;
  color: white;
}
.food-item {
  width: 750px;
  display: flex;
  height: 30px;
  align-items: center;
  border: 1px solid gray;
  margin: 5px;
}
</style>

總結(jié)

注意復(fù)習(xí)：腳手架環(huán)境安裝，腳手架基礎(chǔ)結(jié)構(gòu)，Vue的常用指令(v-for)文章來源地址http://www.zghlxwxcb.cn/news/detail-490519.html

到了這里，關(guān)于VUE2 腳手架搭建的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！