Vue搭建與使用

一、什麼是Vue？

Vue是一個構建【數據驅動】的前端漸進式框架，主要用於實現界面交互。

1. 前端主要做兩件事

   ①界面
   bootstrap、ElementUI
   ②交互
   jquery、Vue

2. 中文官網

   https://cn.vuejs.org/

二、Vue環境搭建

Vue可以以兩種形式使用：

1. 引入庫文件

   ①下載庫文件 vue.js
   https://cn.vuejs.org/js/vue.js
   ②引入到網頁

   <script src="js/vue.js"></script>
   

   ③創建模板

   <div id="app"></div>
   

   ④初始化Vue對象

   new Vue({
   	el:'#app',
   	data:{
   	}
   });
   

2. 官方腳手架vue-cli

   全局安裝vue-cli
   npm i -g @vue/cli
   yarn add global @vue/cli
   目的：爲了提供vue命令

   創建項目
   vue create 項目名稱

   啓動項目
   npm run serve
   yarn serve

三、項目目錄結構

• node_modules

  依賴安裝目錄

• public

  靜態文件目錄（沒用）

• src

  源碼目錄（做開發就用這個目錄）

  • assets

    靜態資源目錄（可選）

  • components

    組件目錄（可選）

  • App.vue

    頂級組件

  • main.js

    主模塊

四、組件【重點】

什麼是組件？

組件就是網頁的零部件，一個網頁可以由多個組件組合而成

單文件組件

1個文件就是一個組件，以 .vue來命名
由 template、script、style組成

①template標籤

<template>
	<!--聲明組件的模板-->
</template>

②script標籤

<script>
	//定義組件的腳本
</script>

③style標籤

<style>
	/*定義組件的樣式*/
</style>

自定義組件

①定義一個組件

一般情況下，放在 components目錄中

②引入組件

import 組件名 from ‘組件模塊路徑’;

③聲明成子組件

components:{
標籤名:組件名
}

④在模板中使用

<標籤名></標籤名>

(4)注意事項

eslint
用於檢查代碼是否符合規範，不規範的寫法就會報錯
定義變量沒使用：‘myfooter’ is defined but never used no-unused-vars
混合空格和tab鍵：Mixed spaces and tabs no-mixed-spaces-and-tabs
template有且只能有一個根標籤

五、數據渲染

1.聲明式渲染

①定義數據
data(){
return {屬性名:值}
}
②渲染數據
{{屬性名}}

2.指令式渲染

①定義數據
data(){
return {屬性名:值}
}
②渲染數據
<標籤 v-text=“屬性名”></標籤>

六、指令【重點】

(1)什麼是指令？
指令就是 Vue爲html提供的新屬性，以 v-* 模式開頭

(2)渲染指令
①v-text
將數據當成普通文本渲染
②v-html
將數據當成HTML內容渲染

(3)條件指令
①v-show
根據條件的真假決定是否【顯示】標籤，如果條件爲假就使用樣式進行隱藏
②v-if
根據條件的真假決定是否【創建】標籤，如果條件爲假就不創建標籤
③v-else
與v-if或v-else-if配合使用，表示“否則”
④v-else-if
多分支

(4)循環指令
v-for
對數組或對象進行遍歷

(5)數據綁定指令
v-model
對錶單元素進行數據的雙向綁定

(6)綁定事件指令
v-on
用於實現事件綁定，縮寫成 @

<h1 v-on:click="show"></h1>
//定義事件處理函數
export default {
	methods:{
		show(){
		}
	}
}

七、計算屬性computed

(1)什麼是計算屬性？
計算屬性是定義一個方法對數據進行處理以後再拿去使用，在不改變原有數據的情況下，就可以得到新的結果
(2)計算屬性的定義

export default {
	computed:{
		計算屬性方法名(){
			return 運算的結果;
		}
	}
}