文章目錄
1、Vue快速入門
1、基礎環境設置
1、NodeJs
Node 是一個讓 JavaScript 運行在服務端的開發平臺
入門案例
編寫 sendData.js
// 設置http常量
const http = require("http")
// 創建server
http.createServer(function(request,response){
// 設置響應頭文件
response.writeHead(200,{"Content-Type":"text/plain"})
// 發送數據
response.end("Hello,Server!")
}).listenerCount(8080)
// 控制檯打印
console.log("Servler is running...port:8080")
點擊文件，右鍵在終端打開，輸入命令node 文件名運行，在瀏覽器輸入http://localhost:8080/，顯示出了從js中響應回的數據，運行結果如下：
2、npm
什麼是npm
npm（Node package manager），和Maven作用類似，使用npm給前端項目導入依賴，前端所有的依賴在npm裏面都能找到
npm基本環境設置
1、初始化基本的配置文件：npm init -y
2、安裝環境
npm install express -g
3、設置淘寶鏡像
npm config set regisry https://registry.npm.taobao.org
查看設置是否成功
npm config list
4、下載依賴
npm install jquery，下載jQuery的依賴
npm install 依賴名 要下載什麼依賴就在後面加名字，可以在後面加@版本號下載指定的版本
什麼都不加，也就是npm install命令會按照package-lock.json文件中的依賴名去下載
5、生產環境
–sava-dev（全稱）或 -D（簡寫）代表這個依賴只在開發環境有效，不會打包出去
eslint 是開發的時候的語法檢測工具
npm install --sava-dev eslint
npm install -D eslint
上面兩個語句效果是一樣的
6、webpack打包，自動將ES6代碼打包成ES5語法
npm install -g webpack webpack-cli，全局安裝webpack，第一次安裝會有點久
webpack -v，查看是否安裝成功
7、更新和卸載包
npm update 包名，自動更新包
npm uninstall 包名，卸載包
8、babel-cli 打包工具
npm install -g babel-cli，安裝babel-cli打包工具
babel --version，檢查是否安裝成功
2、Vue
什麼是Vue
是一個前端框架，只聚焦於視圖層，簡單靈活，核心思想：MVVM，
MVVM：全稱爲Model-View-ViewModel，本質就是MVC的改進版，MVVM將視圖的狀態和行爲抽象化，讓我們將視圖UI和業務邏輯分開，可以取出Model中的數據同時幫忙處理View中由於需要展示內容而設計的業務邏輯
1、第一個Vue程序
新建包，導入vue依賴，創建lib目錄，將導入的vue依賴中的vue.js文件複製進去，創建01-helloVue.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 視圖層代碼 -->
<div id="app">
{{msg}}
</div>
<!-- vue層代碼 -->
<!-- 導入vue.js依賴 -->
<script src="./lib/vue.js"></script>
<script>
// 創建vue對象，綁定視圖層
new Vue({
// 綁定視圖層
el:"#app",
data:{
msg:"Hello,Vue!"
}
})
</script>
</body>
</html>
使用快捷鍵ctrl+shift+x，搜索Live Server插件，點擊Install安裝
右鍵HTML文件，選擇open with Live Server運行，運行結果如下，發現在vue對象中傳遞的參數展示在了前端頁面
2、v-bind 單向綁定
v-bind:title="msg"，簡寫形式爲:title="msg"
創建02-data.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 視圖 -->
<div id="app">
<h1 v-bind:title="msg">我是標題</h1>
<!--
簡寫形式
<h1 :title="msg">我是標題</h1>
-->
</div>
<!-- vue層，數據 -->
<script src="./lib/vue.js"></script>
<script>
var vue = new Vue({
el:'#app',
data:{
msg:'時間'+new Date().toLocaleString()
}
})
</script>
</body>
</html>
3、v-model 雙向綁定
v-bind：單向綁定，v-model：雙向綁定
創建03-model.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 視圖 -->
<div id="app">
<!-- v-bing綁定屬性 -->
<input type="text" v-bind:value="serachMap.keyword">
<!-- v-model綁定屬性 -->
<input type="text" v-model="serachMap.keyword">
</div>
<!-- vue -->
<script src="./lib/vue.js"></script>
<script>
var vue = new Vue({
el:"#app",
data:{
// 定義給前端傳輸的數據
serachMap:{
keyword:"測試"
}
}
})
</script>
</body>
</html>
運行
當我們改變左邊輸入框中的數值的時候我們發現，右邊的輸入框的數值沒有變化
但是當我們改變右邊輸入框的值的時候，我們發現左邊的輸入框的值也隨之發生變化，這就是雙向綁定。單項綁定的輸入框的值不會影響vue對象中的值，而雙向綁定的輸入框中的值的改變會改變vue對象中的值，進而導致兩個輸入框的值都發生變化
4、事件
創建04-event.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=
, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 視圖層 -->
<div id="app">
<!-- button按鈕，綁定單擊事件 -->
<button @click="serach()">查詢</button>
<!-- 將查詢的結果顯示，數據從vue對象中獲得 -->
<p>你要查詢的是：{{result.title}}</p>
<p><a href="result.site" target="_blank">{{result.title}}</a></p>
</div>
<!-- vue -->
<script src="./lib/vue.js"></script>
<script>
// vue對象
var vue = new Vue({
el:"#app",
data:{
// 定義給視圖層的數據
serachMap:{
keyword:"百度"
},
// 查詢結果
result:{}
},
// 定義方法
methods:{
serach(){
console.log("serach")
// 給vue對象中的屬性賦值
this.result={
"title":"百度",
"site":"https://www.baidu.com/"
}
}
}
})
</script>
</body>
</html>
執行結果，當點擊查詢按鈕的時候出現百度標籤，點擊將跳轉到百度頁面
5、路由
導入vue-router依賴，將依賴文件中的vue-router.js複製一份到lib目錄下
創建05-router.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 視圖 -->
<div id="app">
<h1>Hello,router!</h1>
<p>
<router-link to="/">首頁</router-link>
<router-link to="/student">學員管理</router-link>
<router-link to="/teacher">講師管理</router-link>
</p>
<!-- 顯示view -->
<router-view></router-view>
</div>
<!-- 導入依賴 -->
<script src="./lib/vue.js"></script>
<script src="./lib/vue-router.js"></script>
<script>
// 1、定義路由組件
const welcome = {template:"<div>歡迎</div>"}
const student = {template:"<div>student List</div>"}
const teacher = {template:"<div>teacher List</div>"}
// 2、定義路由
const routes = [
{path:"/",redirect:"/welcome"},
{path:"/welcome",component:welcome},
{path:"/student",component:student},
{path:"/teacher",component:teacher}
]
// 3、創建路由實例
const router = new VueRouter({
routes:routes
})
// 4、將路由掛載在vue下
new Vue({
el:"#app",
router
})
</script>
</body>
</html>
運行之後，在瀏覽器可以看到界面
當點擊學員管理時，會出現學員的信息，當點擊講師的按鈕，也會出現講師的信息
路由的步驟
頁面
router-link，定義加載的頁面信息
顯示信息
script
引入lib目錄
定義路由組件
定義路由
創建路由實例
將路由實例掛載到vue對象上
3、axios異步通信
新建文件夾，導入vue和axios依賴，創建lib目錄，將vue.js和axios.js複製進lib目錄
創建html頁面：01-axios.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 視圖層 -->
<div id="app">
<button @click="getList()">測試</button>
<table>
<!-- 循環遍歷取值 -->
<tr v-for="list in lists">
<td>{{list.id}}</td>
<td>{{list.name}}</td>
</tr>
</table>
</div>
<script src="./lib/vue.js"></script>
<script src="./lib/axios.js"></script>
<script>
var vue = new Vue({
el:"#app",
data:{
lists:[]
},
methods:{
// 前後端分離開發時，後端提供JSON數據，前端接收並渲染
getList(){
axios.get("./data.json").then(resopnse=>{
console.log(Response)
this.lists=response;
})
}
}
})
</script>
</body>
</html>
4、如何啓動一個前端項目
1、導入到自己的工作空間
2、下載依賴，npm install
3、啓動npm run dev
4、對照頁面功能查看目錄，瞭解項目的結構