01 . Vue簡介,原理,環境安裝及簡單hello案例

簡介

vue是一個提供了Mvvm風格的雙向數據綁定的Javascript庫,專注於view層，是一套用於構建用戶界面的漸進式框架，是初創項目的首選前端框架。它是以數據驅動和組件化的思想構建的，采用自底向上增量開發的設計。它是輕量級的，它有很多獨立的功能或庫，我們會根據我們的項目來選用vue的一些功能。它提供了更加簡潔、更易於理解的API，使得我們能夠快速地上手並使用Vue.js.

什么是vue.js

Vue.js 是目前最火的一個前端框架，React是最流行的一個前端框架（React除了開發網站，還可以開發手機App， Vue語法也是可以用於進行手機App開發的，需要借助於Weex）

• Vue.js 是前端的主流框架之一，和Angular.js、React.js 一起，並成為前端三大主流框架！
• Vue.js 是一套構建用戶界面的框架，只關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。（Vue有配套的第三方類庫，可以整合起來做大型項目的開發）
• 前端的主要工作？主要負責MVC中的V這一層；主要工作就是和界面打交道，來制作前端頁面效果；

為什么要學習流行框架?

• 企業為了提高開發效率：在企業中，時間就是效率，效率就是金錢；

• 企業中，使用框架，能夠提高開發的效率；

• 提高開發效率的發展歷程：原生JS -> Jquery之類的類庫 -> 前端模板引擎 -> Angular.js / Vue.js（能夠幫助我們減少不必要的DOM操作；提高渲染效率；雙向數據綁定的概念【通過框架提供的指令，我們前端程序員只需要關心數據的業務邏輯，不再關心DOM是如何渲染的了】）

• 在Vue中，一個核心的概念，就是讓用戶不再操作DOM元素，解放了用戶的雙手，讓程序員可以更多的時間去關注業務邏輯；

• 增強自己就業時候的競爭力

• 人無我有，人有我優

• 你平時不忙的時候，都在干嘛？

框架和庫的區別

/*
	- 框架：是一套完整的解決方案；對項目的侵入性較大，項目如果需要更換框架，則需要重新架構整個項目。
  - node 中的 express；
  - 庫（插件）：提供某一個小功能，對項目的侵入性較小，如果某個庫無法完成某些需求，可以很容易切換到其它庫實現需求。

  - 1. 從Jquery 切換到 Zepto
  - 1. 從 EJS 切換到 art-template
*/

vue能做什么

/*
		1. 最大程度上解決了DOM操作.
		2. 單頁Web項目(SPA [SinglePageApplicationn]項目,例如Workite官網)開放
		3. 傳統網站開發
*/

vue核心特性

/*
		1. 雙向數據綁定
				 vue(借鑒了react的虛擬DOM,借鑒了angular的雙向數據綁定.)
				 
		2. 通過指令擴展了HTML,通過表達式綁定數據到HTML.
		3. 解耦視圖與數據.
		4. 可復用組件.
		5. 虛擬DOM.
		6. M-V-VM.
		7. 數據驅動視圖.
*/

Node(后端)中的mvc與前端中的mvvm之間區別?

/*
    MVC 是后端的分層開發概念；

    MVVM是前端視圖層的概念，主要關注於 視圖層分離，也就是說：MVVM把前端的視圖層，分為了 三部分 Model, View , VM ViewModel

    為什么有了MVC還要有MVVM
*/

mvvm

MVVM—》M,V,VM
M—Mode數據模型
V----View視圖
VM----ViewModel 視圖模型
MVVM是Model-View-ViewModel的簡寫。它本質上就是MVC 的改進版。MVVM 就是將其中的View 的狀態和行為抽象化，讓我們將視圖 UI 和業務邏輯分開。當然這些事 ViewModel 已經幫我們做了，它可以取出 Model 的數據同時幫忙處理 View 中由於需要展示內容而涉及的業務邏輯
注：雖然沒有完全遵循MVVM模型，Vue的設計收到了它的啟發，而另外一個js框架“knockout”完全遵循MVVM的設計模型，並且在學習Vue的過程中要轉化思想“不要想着怎么操作DOM，而是想着如何操作數據”

Vue環境安裝

/*
		1. 本地文件
		2. CND引入
		3. npm install vue
*/

兼容性

Vue 不支持 IE8 及以下版本，因為 Vue 使用了 IE8 無法模擬的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的瀏覽器。

直接用<script>引入

直接下載並用 <script> 標簽引入，Vue 會被注冊為一個全局變量。

在開發環境下不要使用壓縮版本，不然你就失去了所有常見錯誤相關的警告!

CDN

對於制作原型或學習，你可以這樣使用最新版本：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

對於生產環境，我們推薦鏈接到一個明確的版本號和構建文件，以避免新版本造成的不可預期的破壞：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>

如果你使用原生 ES Modules，這里也有一個兼容 ES Module 的構建文件：

<script type="module">
  import Vue from 'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.esm.browser.js'
</script>

你可以在 cdn.jsdelivr.net/npm/vue 瀏覽 NPM 包的源代碼。

Vue 也可以在 unpkg 和 cdnjs 上獲取 (cdnjs 的版本更新可能略滯后)。

請確認了解不同構建版本並在你發布的站點中使用生產環境版本，把 vue.js 換成 vue.min.js。這是一個更小的構建，可以帶來比開發環境下更快的速度體驗。

運行vue等技術開發的客戶端項目,需要安裝Node.js環境

Node下載

可以到nodejs的下載頁面: http://nodejs.cn/download/下載對應的安裝包

1.Windows電腦安裝Nodejs環境

• 1、windows環境下選擇.msi安裝文件。然后進行雙擊node.msi，選擇安裝路徑。
• 2、配置環境變量。在計算機（或者我的電腦）右擊屬性 -> 高級系統設置 -> 環境變量進行配置。新建NODE_PATH變量並設置Nodejs的安裝目錄。

macOS系統安裝Nodejs

在終端中使用brew命令安裝nodejs。詳細命令：

brew install nodejs

Linux系統安裝Nodejs

在nodejs的下載頁面選擇linux類別下的64位文件，下載文件為tar.xz格式的壓縮文件。然后依次執行解壓縮和建立軟連接的命令：

tar -xvf   node-v10.15.3-linux-x64.tar.xz
vi /etc/profile
export NODEJS=/opt/node/node-v10.15.3-linux-x64
export PATH=$NODEJS/bin:$PATH

// 保存/etc/profile文件后
node -v 
// 看版本

安裝腳手架工具vue-cli

/*
		npm install --global vue-cli
*/

安裝webpack

/*
		npm install -g webpack
		vue init webpack myVue
		
		npm install -g webpack
/Users/youmen/.nvm/versions/node/v10.14.2/bin/webpack -> /Users/youmen/.nvm/versions/node/v10.14.2/lib/node_modules/webpack/bin/webpack.js
+ webpack@5.4.0
added 82 packages from 122 contributors in 6.878s
\W $ vue init webpack myvue  

? Project name helloworld
? Project description student vue demo1
? Author [e-mail]
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has 
been created? (recommended) npm
		
		
		安裝中有個選項(Use ESLint to line your code? 選擇No)
		
		進入myVue,使用npm install 安裝package.json中的依賴
		cd myVue
		npm install
		
		運行項目
		npm run dev
*/

安裝nvm

管理node版本,非必須

// mac
git clone https://github.com/nvm-sh/nvm.git
cd nvm
./install.sh

cat ~/.bash_profile 
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

// 換源
export NVM_NODEJS_ORG_MIRROR=http://npm.taobao.org/mirrors/node
export NVM_IOJS_ORG_MIRROR=http://npm.taobao.org/mirrors/iojs

source ~/.bash_profile 
nvm --version
0.37.0

// 安裝指定版本
nvm install 10.14.2

安裝yarn

包管理工具

brew install yarn

安裝vue cli

npm config set registry https://registry.npm.taobao.org/
npm install -g @vue/cli


yarn global add @vue/cli

創建vue項目

vue create ginessentail-vue
Vue CLI v4.5.8
? Please pick a preset: (Use arrow keys)
  Default ([Vue 2] babel, eslint) 
  Default (Vue 3 Preview) ([Vue 3] babel, eslint) 
❯  Manually select features 




Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project: 
 ◉ Choose Vue version
 ◉ Babel
 ◯ TypeScript
 ◯ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
❯◯ CSS Pre-processors
 ◉ Linter / Formatter
 ◯ Unit Testing
 ◯ E2E Testing



Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, Lin
ter
? Choose a version of Vue.js that you want to start the project with 2.x
? Use history mode for router? (Requires proper server setup for index fallback in product
ion) (Y/n) y




Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS
 Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in product
ion) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default
): 
  Sass/SCSS (with dart-sass) 
❯ Sass/SCSS (with node-sass) 
  Less 
  Stylus 


                            
Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS
 Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in product
ion) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default
): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: 
  ESLint with error prevention only 
❯ ESLint + Airbnb config 
  ESLint + Standard config 
  ESLint + Prettier 

     
                            
Vue CLI v4.5.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Vuex, CSS
 Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 3.x (Preview)
? Use history mode for router? (Requires proper server setup for index fallback in product
ion) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default
): Sass/SCSS (with node-sass)
? Pick a linter / formatter config: Airbnb
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
❯ In dedicated config files 
  In package.json 
      
                            
success Saved lockfile.
✨  Done in 17.00s.
🚀  Invoking generators...
📦  Installing additional dependencies...

yarn install v1.22.10
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
✨  Done in 8.86s.
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project ginessentail-vue.
👉  Get started with the following commands:

 $ cd ginessentail-vue
 $ yarn serve

cd ginessentail-vue 
yarn serve                  

引入bootstrap

yarn add vue bootstrap-vue bootstrap

項目目錄說明

/*
		build：項目構建(webpack)相關代碼
    config：配置目錄，包括端口號等
    node_modules：npm加載的項目依賴塊
    src：這里是我們要開發的目錄，基本上要做的事情都在這個目錄里。里面包含了幾個目錄及文件：
    assets: 放置一些圖片，如logo等
    components：該目錄里存放的我們的開發文件組件，主要的開發文件都存放在這里了
    App.vue：項目入口文件
    main.js：項目的核心文件
    router：路由配置目錄
    static：放置一些靜態資源文件
    test：初始測試目錄，可刪除
    .xxxx文件：這些是一些配置文件，包括語法配置，git配置等
    index.html：首頁入口文件
    package.json：項目配置文件
    README.md：項目的說明文檔，markdown 格式
*/

Vue項目啟動流程

1.找到package.json文件

/*
		在執行npm run dev的時候，會去在當前文件夾下的項目中找package.json文件,啟動開發服務器，默認端口是8080;
*/

2.找到src的main.json文件,在該文件中new Vue實例,要加載的模板內容App

3.App是src目錄下的App.vue結尾的文件

4.在App.vue所對應的模板當中，有一個router-view在src目錄下有一個router文件夾，該文件夾有個index.js文件，該文件是配置路由詞典，指定了路由地址是空，加載HelloWorld組件

vue運行是基於node環境的,,構建vue框架之前,需要確保node環境安裝成功

vue生命周期示意圖

/*
		掛載(初始化相關屬性)
				1. beforeCreate
				2. created
				3. beforeMount
				4. mounted
				
		更新(元素或組件的變更操作)
				1. beforeUpdate
				2. updated
				
		銷毀(銷毀相關屬性)
				1. beforeDestory
				2. destroyed
*/

vue運行原理

vue語法-->原生語法

本地文件引入小案例

傳統開發模式

Vue

Helloworld

作用: 將數據應用在html頁面中

/*
		1. body中,設置vue管理的視圖<div id="app"></div>
		2. 引入vue.js
		3. 實例化vue對象 new vue();
		4. 設置vue實例的選項: 如e1,data..., new vue{{ 選項:值 }}
		5. 在<div id='app'></div> 中通過{{}}使用data中的數據
		
*/

Example1

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>Examples</title>
		<meta name="description" content="">
		<meta name="keywords" content="">
		<link href="" rel="stylesheet">
		<script type="text/javascript" src="lib/vue.js"></script>
	</head>
	<body>

		<!-- 目的: 將數據渲染到頁面上 -->
		<div id="app">
      <!-- 將數據填充到HTML標簽中, 插值表達式支持基本的計算操作 -->
			<p>{{ msg }}</p>
			<p>{{ count }}</p>
			<button @click="fn1()">按鈕</button>
		</div>

		<script>
			var vm = new Vue({
				// Vue實例選項
				/*
					el  作用: 
						1. 指定/設置 當前Vue實例所管理的視圖
						2. 值也可以為其他選擇器,class或者DOM元素,/.,嗎但發生作用的只有第一個
						3. 值也可以為DOM元素
						
						注意: 不能讓el直接管理html或者body 報錯! mount ->掛載
				*/
				el: '#app',

				// 模擬ajax返回的數據
				data: {
					/*
						data作用:  指定/設置 當前vue實例所管理視圖中要使用的數據
						
						1 . data的值可以是一個對象
						2 . data中的數據 可以通過Vue實例對象,屬性名(vm.msg),去訪問數據
						3 . 訪問數據  可以通過vm.$data.msg訪問數據
						
						特點:  響應式數據(當數據發生變化時,視圖中用數據的位置會自動發生變化)
					*/
					msg: '后台返回數據',
					count: 1,
				},


				/*
					methods: 寫方法
						1 . 可以在視圖中通過{{}}調用方法
						2 . 可以通過vm對象.方法名去調方法  (vm.fn1())
						3 . 方法中的this指的是當前的vue實例對象
						4 . 可以通過指令調用方法
					注意:
						不推薦寫箭頭函數  因為箭頭函數this指向不是vm實例
				*/
				methods: {
					fn1: function() {
						console.log('fun1....')
					},

					fn2: function() {
						console.log(this)
					},

					fn3: function() {
						console.log(this.msg)
					},

					fn4: () => {
						console.log("fn4...")
						console.log(this.msg)
					},
				}
			})
		</script>

	</body>
</html>