Vue組件介紹及開發
一. 經過axios實現數據請求
1.json
json是 JavaScript Object Notation 的首字母縮寫，單詞的意思是javascript對象表示法，這裏說的json指的是相似於javascript對象的一種數據格式。javascript
json的做用：在不一樣的系統平臺，或不一樣編程語言之間傳遞數據。css
(1) json數據的語法
json數據對象相似於JavaScript中的對象，可是它的鍵對應的值裏面是沒有函數方法的，值能夠是普通變量，不支持undefined，值還能夠是數組或者json對象。html
// 原生的js的json對象前端
var obj = {vue
age:10,java
sex: '女',node
work:function(){python
return "好好學習",jquery
}webpack
}
// json數據的對象格式,json數據格式,是沒有方法的,只有屬性：
{
"name":"tom",
"age":18
// 最後一個不要加逗號
}
// json數據的數組格式：
["tom",18,"programmer"]
複雜的json格式數據能夠包含對象和數組的寫法。
{
"name":"小明",
"age":200,
"is_delete": false,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":100,
"lve":["code","eat"]
}
}
// 數組結構也能夠做爲json傳輸數據。
json數據能夠保存在.json文件中，通常裏面就只有一個json對象。
總結：
1. json文件的後綴是.json
2. json文件通常保存一個單一的json數據
3. json數據的屬性不能是方法或者undefined，屬性值只能：數值[整數,小數,布爾值]、字符串、json和數組
4. json數據只使用雙引號、每個屬性成員之間使用逗號隔開，而且最後一個成員沒有逗號。
{
"name":"小明",
"age":200,
"fav":["code","eat","swim","read"],
"son":{
"name":"小小明",
"age":100
}
}
工具：postman能夠用於測試開發的數據接口。
(2)js中提供的json數據轉換方法
javascript提供了一個JSON對象來操做json數據的數據轉換.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> // json語法 let emp = { "username":"xiaohui", "password":"1234567", "age":20 }; console.log(emp); console.log(typeof emp); // JSON對象提供對json格式數據的轉換功能 // stringify(json對象) # 用於把json轉換成字符串 let result = JSON.stringify(emp); console.log(result); console.log(typeof result); // parse(字符串類型的json數據) # 用於把字符串轉成json對象 let json_str = '{"password":"1123","age":20,"name":"xiaobai"}'; console.log(json_str); console.log(typeof json_str); let json_obj = JSON.parse(json_str); console.log(json_obj); console.log(typeof json_obj); console.log(json_obj.age) </script> </body> </html>
2. ajax簡介
ajax，通常中文稱之爲："阿賈克斯"，是英文 「Async Javascript And Xml」的簡寫，譯做：異步js和xml數據傳輸數據。
ajax的做用： ajax可讓js代替瀏覽器向後端程序發送http請求，與後端通訊，在用戶不知道的狀況下操做數據和信息，從而實現頁面局部刷新數據/無刷新更新數據。
因此開發中ajax是很經常使用的技術，主要用於操做後端提供的`數據接口`，從而實現網站的`先後端分離`。
ajax技術的原理是實例化js的XMLHttpRequest對象，使用此對象提供的內置方法就能夠與後端進行數據通訊。
(1)數據接口
數據接口，也叫api接口，表示`後端提供`操做數據/功能的url地址給客戶端使用。
客戶端經過發起請求向服務端提供的url地址申請操做數據【操做通常：增刪查改】
同時在工做中，大部分數據接口都不是手寫，而是經過函數庫/框架來生成。
(2)ajax的使用
ajax的使用必須與服務端程序配合使用，可是目前咱們先學習ajax的使用，因此暫時先不涉及到服務端python代碼的編寫。所以，咱們可使用別人寫好的數據接口進行調用。
jQuery將ajax封裝成了一個函數$.ajax()，咱們能夠直接用這個函數來執行ajax請求。
jQuery版本：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> </head> <body> <button id="btn">點擊獲取數據</button> <script> $("#btn").click(function(){ $.ajax({ // 後端程序的url地址 url: 'http://wthrcdn.etouch.cn/weather_mini', // 也可使用method，提交數據的方式，默認是'GET'，經常使用的還有'POST' type: 'get', dataType: 'json', // 返回的數據格式，經常使用的有是'json','html',"jsonp" data:{ // 設置發送給服務器的數據，若是是get請求，也能夠寫在url地址的?後面 "city":'深圳' } }) .done(function(resp) { // 請求成功之後的操做 console.log(resp); }) .fail(function(error) { // 請求失敗之後的操做 console.log(error); }); }); </script> </body> </html>
vue版本(可填寫城市版)：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/vue.js"></script> <script src="js/axios.js"></script> <!--<script src="js/axios.js"></script>--> </head> <body> <div id="app"> <input type="text" v-model="city"> <button @click="get_weather">點擊獲取天氣</button> <div v-for="k,v in weather_info.data"> <p>{{v}}:{{k}}</p> </div> </div> <script> let vm = new Vue({ el:"#app", data:{ city:"", weather_info: {}, }, methods:{ get_weather(){ // http://wthrcdn.etouch.cn/weather_mini?city=城市名稱 axios.get("http://wthrcdn.etouch.cn/weather_mini?city="+this.city) .then(response=>{ console.log(response); this.weather_info = response.data; }).catch(error=>{ console.log(error.response) }); // 上面的參數寫法,也能夠是下面這種格式: // axios.get("http://wthrcdn.etouch.cn/weather_mini",{ // // get請求的附帶參數 // params:{ // "city":"廣州", // } // }).then(response=>{ // console.log(response.data); // 獲取接口數據 // }).catch(error=>{ // console.log(error.response); // 獲取錯誤信息 // }) } } }) </script> </body> </html>
(3)同源策略
同源策略，是瀏覽器爲了保護用戶信息安全的一種安全機制。所謂的同源就是指代通訊的兩個地址（例如服務端接口地址與瀏覽器客戶端頁面地址）之間比較，協議、域名(IP)和端口是否相同。不一樣源的客戶端腳本[javascript]在沒有明確受權的狀況下，沒有權限讀寫對方信息。
ajax本質上仍是javascript，是運行在瀏覽器中的腳本語言，因此會被受到瀏覽器的同源策略所限制。
| 前端地址：http://www.oldboy.cn/index.html |
是否同源 |
緣由 |
| http://www.oldboy.cn/user/login.html |
是 |
協議、域名、端口相同 |
| http://www.oldboy.cn/about.html |
是 |
協議、域名、端口相同 |
| https://www.oldboy.cn/user/login.html |
否 |
協議不一樣 ( https和http ) |
| http:/www.oldboy.cn:5000/user/login.html |
否 |
端口 不一樣( 5000和80) |
| http://bbs.oldboy.cn/user/login.html |
否 |
域名不一樣 ( bbs和www ) |
同源策略針對ajax的攔截，代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> <script src="js/axios.js"></script> </head> <body> <div id="app"> <button id="btn" @click="get_music">搜索音樂</button> </div> <script> var vm = new Vue({ el: "#app", data: { }, methods: { get_music(){ axios.get("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=葉問宗師" ).then(response=>{ console.log(response.data); }).catch(error=>{ alert("出錯了！"); console.log(error.response); }) } } }) </script> </body> </html>
上面代碼運行錯誤以下：
Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=%E6%88%91%E7%9A%84%E4%B8%AD%E5%9B%BD%E5%BF%83' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
上面錯誤，關鍵詞：Access-Control-Allow-Origin
只要出現這個關鍵詞，就是訪問受限。出現同源策略的攔截問題。
<1>ajax跨域（跨源）方案之CORS
ajax跨域(跨源)方案：後端受權[CORS]，jsonp，服務端代理
CORS是一個W3C標準，全稱是"跨域資源共享"，它容許瀏覽器向跨源的後端服務器發出ajax請求，從而克服了AJAX只能同源使用的限制。
實現CORS主要依靠後端服務器中響應數據中設置響應頭信息返回的。
#django的視圖 def post(request): response = new Response() response .set_header("Access-Control-Allow-Origin","http://localhost:63342") return response;
// 在響應行信息裏面設置如下內容： Access-Control-Allow-Origin: ajax所在的域名地址 Access-Control-Allow-Origin: www.xxx.cn # 表示只容許www.xxx.cn域名的客戶端的ajax跨域訪問 // * 表示任意源，表示容許任意源下的客戶端的ajax均可以訪問當前服務端信息 Access-Control-Allow-Origin: *
jsonp咱們經過代碼瞭解一下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> </head> <body> <p>嚴格來講：jsonp不是ajax技術，採用了script標籤的加載跨域腳本的方式避開了同源策略</p> <p>jsonp技術的實現，是依靠服務端和瀏覽器端雙方配合的</p> <p>api地址：https://suggest.taobao.com/sug?code=utf-8&q=商品名稱&callback=cb</p> <button id="btn">點擊搜索</button> <script> function hello(data) { console.log(data.result); alert(data.result); } let btn = document.getElementById("btn"); btn.onclick = function () { // 1. 建立一個script標籤 script = document.createElement("script"); // 2. 把script的src屬性，設置爲後端api的接口地址，並且後端接口返回的數據必須是js代碼， // 這個代碼中，必須調用一個客戶端已經提早聲明的函數。 script.src = "https://suggest.taobao.com/sug?code=utf-8&q=詠春&callback=hello"; document.head.appendChild(script); } </script> </body> </html>
總結：
1. 同源策略：瀏覽器的一種保護用戶數據的一種安全機制。
瀏覽器會限制ajax不能跨源訪問其餘源的數據地址。
同源：判斷兩個通訊的地址之間，是否協議，域名[IP]，端口一致。
ajax： http://127.0.0.1/index.html
api數據接口： http://localhost/index
這兩個是同源麼？不是同源的。是否同源的判斷依據不會根據電腦來判斷，而是經過協議、域名、端口的字符串是否來判斷。
2. ajax默認狀況下會受到同源策略的影響，一旦受到影響會報錯誤以下：
No 'Access-Control-Allow-Origin' header is present on the requested resource
3. 解決ajax只能同源訪問數據接口的方式：
(1). CORS，跨域資源共享，在服務端的響應行中設置：
Access-Control-Allow-Origin: 容許訪問的域名地址
(2). jsonp
(3). 是否服務端代理
思路：經過python來請求對應的服務器接口，獲取到數據之後。
二.Vue自動化工具（Vue-cli）
前面學習了普通組件之後，接下來咱們繼續學習單文件組件則須要提早先安裝準備一些組件開發工具。不然沒法使用和學習單文件組件。
通常狀況下，單文件組件，咱們運行在 自動化工具vue-CLI中，能夠幫咱們編譯單文件組件。因此咱們須要在系統中先搭建vue-CLI工具，
官網：https://cli.vuejs.org/zh/
Vue CLI 須要 [Node.js](https://nodejs.org/) 8.9 或更高版本 (推薦 10.+)。你可使用 [nvm](https://github.com/creationix/nvm)或 [nvm-windows](https://github.com/coreybutler/nvm-windows)在同一臺電腦中管理多個 Node 版本。
nvm工具的下載和安裝：
https://www.jianshu.com/p/d0e0935b150a
https://www.jianshu.com/p/622ad36ee020
安裝記錄:
打開:https://github.com/coreybutler/nvm-windows/releases
1.安裝Vue-cli與相關依賴包
關於安裝vue-cli以及相關的依賴包等教程請見：
windos安裝教程:https://www.cnblogs.com/liluxiang/p/9592003.html
ubuntu安裝教程:https://www.cnblogs.com/Asterism-2012/p/10177345.html
2.使用Vue-CLI初始化建立前端項目
使用vue自動化工具能夠快速搭建單頁應用項目目錄。
該工具爲現代化的前端開發工做流提供了開箱即用的構建配置。只需幾分鐘便可建立並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目：
// 生成一個基於 webpack 模板的新項目
vue init webpack 項目目錄名
例如：
vue init webpack myproject
// 啓動開發服務器 ctrl+c 中止服務
cd myproject
npm run dev # 運行這個命令就能夠啓動node提供的測試http服務器
3.vue項目框架目錄結構
src 主開發目錄，要開發的單文件組件所有在這個目錄下的components目錄下
static 靜態資源目錄，全部的css，js文件放在這個文件夾
dist項目打包發佈文件夾，最後要上線單文件項目文件都在這個文件夾中[後面打包項目,讓項目中的vue組件通過編譯變成js 代碼之後,dist就出現了]
node_modules目錄是node的包目錄，
config是配置目錄，
build是項目打包時依賴的目錄
src/router 路由,後面須要咱們在使用Router路由的時候,本身聲明.
4.項目執行流程圖
整個項目是一個主文件index.html,index.html中會引入src文件夾中的main.js,main.js中會導入頂級單文件組件App.vue,App.vue中會經過組件嵌套或者路由來引用components文件夾中的其餘單文件組件。
三.組件化開發
組件（Component）是自定義封裝的功能。在前端開發過程當中，常常出現多個網頁的功能是重複的，並且不少不一樣的頁面之間，也存在一樣的功能。
而在網頁中實現一個功能，須要使用html定義功能的內容結構，使用css聲明功能的外觀樣式，還要使用js來定義功能的特效，所以就產生了把一個功能相關的[HTML、css和javascript]代碼封裝在一塊兒組成一個總體的代碼塊封裝模式，咱們稱之爲「組件」。
因此，組件就是一個html網頁中的功能，通常就是一個標籤，標籤中有本身的html內容結構，css樣式和js特效。
這樣，前端人員就能夠在組件化開發時，只須要書寫一次代碼，隨處引入便可使用。
vue的組件有兩種：默認組件[全局組件] 和 單文件組件。
1.默認組件的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="js/vue.js"></script> <style> .title{ color: blue; } </style> </head> <body> <div id="app"> <myheader></myheader> </div> <script> // 1. 聲明默認組件 Vue.component /* * 組件名稱：不要大寫，也不要和原生的HTML標籤同名，更不要任意使用特殊的符號 * Vue.component("組件名稱", { * template: "html代碼", // 組件的HTML結構代碼 * data(){ * return {} * }, * methods: { // 組件的相關的js方法 * 方法名(){ * // 邏輯代碼 * } * } * } * */ // `` 是js的多行字符串 // 組件裏面的data的值，必須是一個匿名函數，函數的返回值必須是一個json對象 Vue.component('myheader', { template: `<div>頭部組件的HTML代碼<h2 @click="demo" :class="className">{{message}}</h2></div>`, data(){ return { "message": "hello, 我是組件裏面的data數據", "className": "title" } }, methods: { demo(){ alert('你好！') } } }); var vm = new Vue({ el: "#app", data: { } }) </script> </body> </html>
2.單文件組件的使用
普通組件的缺點：
1. html代碼是做爲js的字符串進行編寫，因此組裝和開發的時候不易理解，並且沒有高亮效果。
2. 普通組件用在小項目中很是合適，可是複雜的大項目中，若是把更多的組件放在html文件中，那麼維護成本就會變得很是昂貴。
3. 普通組件只是整合了js和html，可是css代碼被剝離出去了。使用的時候的時候很差處理。
將一個組件相關的html結構，css樣式，以及交互的JavaScript代碼從html文件中剝離出來，合成一個文件，這種文件就是單文件組件，至關於一個組件具備告終構、表現和行爲的完整功能，方便組件之間隨意組合以及組件的重用，這種文件的擴展名爲「.vue」，好比："Home.vue"。
建立組件:
在組件中編輯三個標籤，編寫視圖、vm對象和css樣式代碼。
修改組件的導入：將原來的默認進行註釋
修改成：
<template> <div id="app"> <!--<img src="./assets/logo.png">--> <!--<HelloWorld/>--> <Home/> </div> </template> <script> // import HelloWorld from './components/HelloWorld' import Home from './components/Home' export default { name: 'App', components: { // 子組件集合 // HelloWorld Home } } </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> 完成案例-點擊加減數字 Home.vue文件： <template> <div id="Home"> <span @click="num--">-</span> <input type="text" size="1" v-model="num"> <span @click="num++">+</span> </div> </template> <script> // 暴露對象 export default { name: "Home", // 組件名稱 data(){ return { num: 0, } }, components: { } } </script> <style> span{ font-size: 30px } </style>
效果如操做圖：
在App.vue下添加樣式：
span{ border: 2px solid red; }
獲得的效果：
3.組件的嵌套使用
有時候開發vue項目時,頁面也能夠算是一個大組件,同時頁面也能夠分紅多個子組件.
由於,產生了父組件調用子組件的狀況.
例如,咱們能夠聲明一個組件,做爲父組件
在components/建立一個保存子組件的目錄common，並建立一個Header.vue文件。
Header.vue文件：
// 組件中代碼必須寫在同一個標籤中 <template> <div> 公共頭部 <p>{{message}}</p> </div> </template> <script> export default { name: "Header", data(){ return { message: "頭部組件的data數據" } } } </script> <style> p{ color: red; } </style> 而後，在父組件中調用上面聲明的子組件： <template> <div id="Home"> <!--使用子組件--> <HeaderSon></HeaderSon> 我是Home組件的template內容 <span @click="num--">-</span> <input type="text" size="1" v-model="num"> <span @click="num++">+</span> </div> </template> <script> // 導入子組件 import HeaderSon from './common/Header' // 暴露對象 export default { name: "Home", // 組件名稱 data(){ return { num: 0, } }, components: { // 註冊子組件 HeaderSon, } } </script> <style> span{ font-size: 30px } </style>
最後,父組件被App.vue調用.就能夠看到頁面效果.
效果：
四.在組件中使用axios獲取數據
1.父組件的數據傳遞給子組件
例如,咱們但願把父組件的數據傳遞給子組件.
能夠經過props屬性來進行數據傳遞.
傳遞數據三個步驟：
1. 在父組件中，調用子組件的組名處，使用屬性值的方式往下傳遞數據
<HeaderSon :fnum="num" title="Home裏面寫的數據"></HeaderSon>
上面表示在父組件調用Menu子組件的時候傳遞了2個數據：
若是要傳遞變量[變量能夠各類類型的數據]，屬性名左邊必須加上冒號:，同時，屬性名是自定義的，會在子組件中使用。
若是要傳遞普通字符串數據，則不須要加上冒號:
2. 在子組件中接受上面父組件傳遞的數據，須要在vm組件對象中，使用props屬性類接受。
<script> export default { name: "Header", data(){ return { message: "頭部組件的data數據" } }, props: [ "fnum", 'title' ] } </script>
3.在子組件中的template中使用父組件傳遞過來的數據
// 組件中代碼必須寫在同一個標籤中
<template> <div> 公共頭部 <p>{{message}}</p> <p>父組件傳過來的fnum：{{fnum}}</p> <p>父組件傳過來的title：{{title}}</p> </div> </template>
效果：
代碼的步驟流程爲：
2.子組件傳遞數據給父組件
子傳父傳遞數據步驟：
(1)在子組件中，經過 this.$emit() 來調用父組件中定義的事件
<script> export default { name: "Header", data(){ return { message: "頭部組件的data數據" } }, props: [ "fnum", 'title' ], watch: { fnum(){ console.log(this.fnum); // this.$emit("父元素的自定義事件","要傳遞的數據"); // 經過this.$emit()方法，子組件能夠把數據傳遞給父組件 this.$emit("PostParentData", this.fnum); } } } </script>
(2)父組件中聲明一個和子組件 this.$emit("自定義事件名稱") 對應的事件屬性。
(3)父組件中，聲明的自定義方法，在事件被調用時執行。
- 1. Vue組件介紹及開發
- 2. Vue組件、插件介紹
- 3. Vue組件開發
- 4. vue組件開發
- 5. Vue (三) --- Vue 組件開發
- 6. Kafka簡介及各個組件介紹
- 7. Hbase簡介及各個組件介紹
- 8. 組件介紹
- 9. vue-loader和單頁組件介紹
- 10. Vue的Keep-alive組件詳細介紹
- 更多相關文章...
- • 網站主機 介紹 - 網站主機教程
- • ASP AdRotator 組件 - ASP 教程
- • PHP開發工具
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Vue組件介紹及開發
- 2. Vue組件、插件介紹
- 3. Vue組件開發
- 4. vue組件開發
- 5. Vue (三) --- Vue 組件開發
- 6. Kafka簡介及各個組件介紹
- 7. Hbase簡介及各個組件介紹
- 8. 組件介紹
- 9. vue-loader和單頁組件介紹
- 10. Vue的Keep-alive組件詳細介紹