前端基礎-Vue
VUE
1.簡介
Vue (讀音 /vjuː/，類似於 view) 是一套用於構建使用者介面的漸進式框架。與其它大型框架不同的是，Vue 被設計為可以自底向上逐層應用。Vue 的核心庫只關注檢視層，不僅易於上手，還便於與第三方庫或既有專案整合。
Vue 的目標是通過儘可能簡單的 API 實現響應的資料繫結和組合的檢視元件。
2.使用
(1)CDN方法
在頁面上以 CDN 包的形式匯入。
<script src="https://unpkg.com/vue@next"></script>
CDN的全稱是Content Delivery Network，即內容分發網路。CDN是構建在現有網路基礎之上的智慧虛擬網路，依靠部署在各地的邊緣伺服器，通過中心平臺的負載均衡、內容分發、排程等功能模組，使使用者就近獲取所需內容，降低網路擁塞，提高使用者訪問響應速度和命中率。CDN的關鍵技術主要有內容儲存和分發技術。
由於CDN是為加快網路訪問速度而被優化的網路覆蓋層，因此被形象地稱為“網路加速器”。
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> <div id="app"> //<div> 標籤可以把文件分割為獨立的、不同的部分。它可以用作嚴格的組織工具，並且不使用任何格式與其關聯。用 id 或 class 來標記 <div>，那麼該標籤的作用會變得更加有效。 //如果與 CSS 一同使用，<div> 元素可用於對大的內容塊設定樣式屬性。 <p>{{ message }}</p> //{{ }} 用於輸出物件屬性和函式返回值。 </div> <script> new Vue({ el: '#app', //id選擇器 data: { //輸出什麼東西？ message: 'Hello Vue.js!' } }) </script>
(2)使用npm方法
npm run dev
Vue.js 提供一個官方命令列工具vue-cli，可用於快速搭建大型單頁應用。
# 全域性安裝 vue-cli $ cnpm install --global vue-cli # 建立一個基於 webpack 模板的新專案 $ vue init webpack my-project 安裝及執行： $ cd my-project $ cnpm install $ cnpm run dev 專案打包： npm run build 執行完成後，會在 Vue 專案下生成一個 dist 目錄，一般包含 index.html 檔案及 static 目錄，static 目錄包含了靜態檔案 js、css 以及圖片目錄 images。 直接雙擊 dist/index.html 檔案就可以在瀏覽器中看到效果了。
3.VUE專案
(1)專案目錄
| 目錄/檔案 | 說明 |
|---|---|
| build | 專案構建(webpack)相關程式碼 |
| config | 配置目錄，包括埠號等。我們初學可以使用預設的。 |
| node_modules | npm 載入的專案依賴模組 |
| src | 這裡是我們要開發的目錄，基本上要做的事情都在這個目錄裡。裡面包含了幾個目錄及檔案：assets: 放置一些圖片，如logo等。components: 目錄裡面放了一個元件檔案，可以不用。App.vue: 專案入口檔案，我們也可以直接將元件寫這裡，而不使用 components 目錄。main.js: 專案的核心檔案。 |
| static | 靜態資源目錄，如圖片、字型等。 |
| test | 初始測試目錄，可刪除 |
| .xxxx檔案 | 這些是一些配置檔案，包括語法配置，git配置等。 |
| index.html | 首頁入口檔案，你可以新增一些 meta 資訊或統計程式碼啥的。 |
| package.json | 專案配置檔案。 |
| README.md | 專案的說明文件，markdown 格式 |
app.vue:
<!-- 展示模板 -->
<template>
<div id="app">
<img src="./assets/logo.png">
<hello></hello>
</div>
</template>
<script>
// 匯入元件
import Hello from './components/Hello'
export default {
name: 'app',
components: {
Hello
}
}
</script>
<!-- 樣式程式碼 -->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
(2)template標籤
使用 <template> 保留頁面載入時隱藏的內容。使用 JavaScript 來顯示：
<!DOCTYPE html>
<html>
<body>
<h1>template 元素</h1>
<p>單擊下面的按鈕，顯示 template 元素中的隱藏內容。</p>
<button onclick="showContent()">顯示隱藏的內容</button>
<template> //點選按鈕才會顯示，JavaScript響應事件
<h2>Flower</h2>
<img src="/i/photo/flower.gif" width="180" height="180">
</template>
<script>
function showContent() {
var temp = document.getElementsByTagName("template")[0];
var clon = temp.content.cloneNode(true);
document.body.appendChild(clon);
}
</script>
</body>
</html>
(3)vue應用
每個 Vue 應用都需要通過例項化 Vue 來實現。
var vm = new Vue({
// 選項
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 測試</title>
<script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
</head>
<body>
<div id="vue_det"> //塊兒
<h1>site : {{site}}</h1>
<h1>url : {{url}}</h1>
<h1>Alexa : {{alexa}}</h1>
</div>
<script type="text/javascript">
// 我們的資料物件
var data = { site: "hello", url: "www.runoob.com", alexa: 10000}
var vm = new Vue({ //vue應用
el: '#vue_det', //id選擇器
data: data //資料，在外面
})
// 它們引用相同的物件！
document.write(vm.site === data.site) // true
document.write("<br>")
// 設定屬性也會影響到原始資料
vm.site = "Runoob"
document.write(data.site + "<br>") // Runoob
// ……反之亦然
data.alexa = 1234
document.write(vm.alexa) // 1234
</script>
</body>
</html>
當一個 Vue 例項被建立時，它向 Vue 的響應式系統中加入了其 data 物件中能找到的所有的屬性。當這些屬性的值發生改變時，html 檢視將也會產生相應的變化。
4.vscode執行html
(1).新建.html檔案
(2).安裝open in browser外掛
(3).html頁面右鍵選擇open in other browser
5.vue專案不用localhost
改變config下index.js裡的ip，也是本機的私有ip，公網內的其他ip可訪問。
6.專案解讀
main.js 像是加vue應用的。
.vue 裡面有<template> <script> <style>
首頁入口檔案：index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>myfirstvue</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
專案入口檔案：App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
ES6：全稱 ECMAScript 6.0 ，是 JavaScript 的下一個版本標準，2015.06 發版。
ES6 主要是為了解決 ES5 的先天不足，比如 JavaScript 裡並沒有類的概念，但是目前瀏覽器的 JavaScript 是 ES5 版本，大多數高版本的瀏覽器也支援 ES6，不過只實現了 ES6 的部分特性和功能。
export default
用於匯出常量、函式、檔案、模組等。
export可以有多個，export default只能有一個
hello.vue中：
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>