Vue 學習筆記(一)初遇
爲何要學VUE?
考慮到有些同窗還在用原生的JS,不知道Jquery,這裏我先介紹一下Jquery.在介紹Jquery我大體的介紹一下JavaScript。javascript
咱們用JavaScript作什麼?
WEB前端有三層:html
HTML: 從語義的角度，描述頁面結構
CSS: 從審美的角度，描述樣式（美化頁面）
JavaScript: JavaScript：從交互的角度，描述行爲（提高用戶體驗）
我我的認爲所謂的描述行爲就是:前端
- 對HTML的結點(就是HTML文件中的標籤，好比Div)增刪查改。
- 改變結點屬性和樣式，好比背景的顏色，改變類樣式。
- 製做一些動畫，好比滑入或淡出。
- 監聽事件，在某一事件被觸發以後，對HTML的結點作上面兩點的操做
- Ajax(異步請求)
那寫JavaScript很差嗎？
很差，體驗十分的不良好。好比一個Ajax請求，你要本身去適配不一樣的瀏覽器，用原生JavaScript寫是這樣子的:vue
var xmlhttp;
//實例化XMLHTTPRequest對象
if(window.XMLHttpRequest)
{
//針對ie7+、firefox、chrome等瀏覽器
xmlhttp=new XMLHttpRequest();
}else
{
//針對ie五、6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
Jquery寫是這樣子的:java
$(function(){
//請求參數
var list = {};
//
$.ajax({
//請求方式
type : "POST",
//請求的媒體類型
contentType: "application/json;charset=UTF-8",
//請求地址
url : "http://127.0.0.1/admin/list/",
//數據，json字符串
data : JSON.stringify(list),
//請求成功
success : function(result) {
console.log(result);
},
//請求失敗，包含具體的錯誤信息
error : function(e){
console.log(e.status);
console.log(e.responseText);
}
});
});
有沒有看到，咱們不用再本身適配各類瀏覽器了，是否是很開心啊。
並且，邏輯結構更爲清晰。jquery
僅僅是書寫很繁瑣，代碼量多和瀏覽器兼容性問題，就讓我十分的厭煩寫原生的JavaScript。有更簡單的，爲何我還要記這一套複雜的。
在學了Jquery以後，我就選擇性的忘記了原生方式寫Ajax。程序員
Jquery是什麼?
Jquery是一個體積小、速度快、特性豐富的JavaScript庫。它使得一些對HTML的遍歷、處理，甚至是操縱結點、製做動畫更爲簡單，同時提供了一些更加簡單實用的API，而且是可以跨平臺的。chrome
庫、框架之間的區別
框架與庫之間最本質區別在於控制權: You call Library.Framework calls you.（控制反轉）npm
我我的以爲庫更像是一個工具集、API的倉庫，就像一個建築隊同樣的倉庫裏存放了許多工具，建築工人能夠根據本身的須要取出本身想要的工具，去完成本身想要完成的操做。固然你也能夠不用。就像你引入了Jquery庫，寫Ajax的時候，你仍然能夠用原生JavaScript的那一套。沒有一個總體貫穿的思想。
框架的話，更像是一種解決方案，有一套總體貫穿的思想，致力於去解決的問題。
好比說Spring框架，在剛開始學Spring的時候，不少的都會先去講解耦合.講Hibernate和MyBatis以前會先講JDBC，在用過Hibernate和MyBatis以後, 你就會以爲JDBC十分的很差用。Hibernate和MyBatis進入官網以後，官方在介紹本身的時候，就會有明確的定位。
那Jquery很差嗎?
- 挺好的,前提是你的頁面相對來講比較簡單，在知乎上看一個Yox(一個前端框架)的做者在提到在頁面有大量的表單的狀況下，Jquery寫起來太複雜了，你知道複雜的話，每每須要時間，而企業開發是注重效率的。
- 還有就是速度，Jquery是基於選擇器，直接對DOM結點進行操做，這是很是消耗資源的。爲何直接對DOM結點操縱會很是消耗資源啊? 這個解釋起來有一點那麼的複雜，大體上是這樣子的: 操做HTML結點的時候，須要遍歷DOM樹，頁面比較複雜的時候，比較消耗內存，第二點直接對結點操做，操做完以後，瀏覽器會再從新組織HTML的結點。
那什麼叫DOM?
JavaScript基礎分爲三個部分:
- ECMAScript：JavaScript的語法標準。包括變量、表達式、運算符、函數、if語句、for語句等。 - DOM：文檔對象模型（Document object Model），操做網頁上的元素的API。好比讓盒子移動、變色、輪播圖等 - BOM：瀏覽器對象模型（Browser Object Model），操做瀏覽器部分功能的API。好比讓瀏覽器自動滾動。
結點（Node）：
構成 HTML 網頁的最基本單元。網頁中的每個部分均可以稱爲是一個節點，好比：html標籤、屬性、文本、註釋、整個文檔等都是一個節點。
雖然都是節點，可是實際上他們的具體類型是不一樣的。常見節點分爲四類：
- 文檔節點（文檔）：整個 HTML 文檔。整個 HTML 文檔就是一個文檔節點。
- 元素節點（標籤）：HTML標籤。
- 屬性節點（屬性）：元素的屬性。
- 文本節點（文本）：HTML標籤中的文本內容（包括標籤之間的空格、換行）。
- 節點的類型不一樣，屬性和方法也都不盡相同。全部的節點都是Object。
DOM(Document Object Model): 文檔對象模型
DOM 爲文檔提供告終構化表示，並定義瞭如何經過腳原本訪問文檔結構。目的其實就是爲了能讓js操做html元素而制定的一個規範。
瀏覽器解析過程： HTML加載完畢，渲染引擎會在內存中把HTML文檔，生成一個DOM樹，getElementById是獲取內中DOM上的元素節點。而後操做的時候修改的是該元素的屬性(實際的過程比這個更復雜)。
DOM樹：（一切都是節點）
DOM的數據結構以下：
總結
一切都是由於頁面在逐漸的變的複雜，雖然頁面變的複雜，追求速度仍然是程序員的目標，不斷的優化，不斷的前進。
MVVM模式
MVVM是Model-View-ViewModel的簡寫。
MODEL: 數據
View: 視圖(能夠理解爲HTMl結點)
VM: view-model負責業務邏輯處理（好比Ajax請求等），對數據進行加工後交給視圖展現
經過VM，數據能夠在視圖中顯示出來，這叫數據綁定(Data Bindings)。
經過VM，數據能夠取出View中的數據, 這叫 DOM監聽(DOM LIsteners)，
Vue的定位
-
漸進式的javaScript框架(可插拔、可擴展)
- 漸進式:核心庫很是小,根據功能擴大,不斷的增長新庫
- 響應式的: 數據在發生變更的時候,Vue會幫你更新全部網頁中用到它的地方
一個響應式的很好例子: 
當我把17改成25的時候，第五行的和就會自動跟着變
Vue初體驗
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- 首先你須要引入Vue，Vue版本:v2.6.10-->
<script src = "../lib/vue.js"></script>
</head>
<body>
<!--這個div區域就是MVVM中的 View-->
<div id="app">
<h1>{{name}}</h1>
</div>
</body>
<script>
<!--myVue就是MVVM中的VM-->
var myVue = new Vue({
el:'#app' <!--當前Vue對象接管的區域-->,
data:{
name:'你好啊 Vue',
<!--Data是MVVM中的MODEL部分-->
},
});
</script>
</html>
取值方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <script src = "../lib/vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<h1 v-text="message"></h1>
<h1 v-html="message"></h1>
<h1 v-html="message2"></h1>
<h1 v-html="message3"></h1>
</div>
</body>
<script>
var app2 = new Vue({
el: '#app',
data: {
message: '<a href="https://www.baidu.com/?tn=78040160_5_pg&ch=1">百度</a>',
message2:'a',
message3:'<a href="https://www.baidu.com/?tn=78040160_5_pg&ch=1"百度</a>'
}
})
</script>
</html>
效果: 
經過效果咱們能夠看出:
- {{data中的數據名}}: 原樣輸出(即便數據具有HTML標籤的語義,message中數據是一個a標籤)
- v-text: 原樣輸出數據
- v-html: 對具有HTML標籤語義的數據進行渲染。咱們姑且能夠能夠將渲染理解爲將數據變成HTML的結點。
假如該數據不是HTMl的標籤, 原樣輸出，假如是HTML標籤，可是標籤不完整(好比缺乏了<),Vue就沒法判斷你這是一個普通的數據仍是HTML標籤，就不顯示。
v-text特性被稱爲指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊特性
V-bind指令綁定元素特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<!-- <script src = "../lib/vue.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
<h1 v-text="message"></h1>
<h1 v-html="message"></h1>
<h1 v-html="message2"></h1>
<h1 v-html="message3"></h1>
<span v-bind:title="titleMessage">
鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
</span>
<!-- 省略版的寫法 -->
<br/>
<span :title="titleMessage">
鼠標懸停幾秒鐘查看此處動態綁定的提示信息！
</span>
<img v-bind:src="img">
</div>
</body>
<script>
var app2 = new Vue({
el: '#app',
data: {
message: '<a href="https://www.baidu.com/?tn=78040160_5_pg&ch=1">百度</a>',
message2:'a',
message3:'<a href="https://www.baidu.com/?tn=78040160_5_pg&ch=1"百度</a>',
titleMessage:'頁面加載於 ' + new Date().toLocaleString(),
img:'aa.jpg'
}
})
</script>
</html>
效果:
aa.jpg和該頁面同級。
title 屬性規定關於元素的額外信息,這些信息一般會在鼠標移到元素上時顯示一段工具提示文本（tooltip text）。
V-bind指令能夠將html標籤的屬性和數據綁定在一塊兒。
監聽事件和雙向綁定
Vue中v-on 指令監聽 DOM 事件，並在觸發時運行一些 JavaScript 代碼。
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="../lib/vue.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
</head>
<body>
<div id="app">
<button v-on:click="welcome">Greet</button>
<button v-on:click="greet">Greet</button>
雙向綁定:<input type="text" v-model="message">
<h1>{{message}}</h1>
</div>
</body>
<script>
var app2 = new Vue({
el: '#app',
data: {
message: 'Vue.js',
},
methods: {
welcome() {
alert('Hello' + this.message + '!');
},
greet: function (event) {
// `this` 在方法裏指向當前 Vue 實例
alert('Hello ' + this.name + '!')
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)
}
}
}
})
</script>
</html>
效果:
折騰了半天,仍是沒辦法上傳Gif,只好一張,一張的貼。
v-model指令能夠實現標籤和數據的雙向的綁定。
什麼意思呢? v-model能夠將文本的框數據取出更新message的值。
而後message的值更新的時候，也能夠出如今輸入框中.
如上圖所示
參考資料:
- 1. Vue學習筆記一：初識vue
- 2. Git學習筆記（一）初遇
- 3. NIO 學習筆記(一)初遇
- 4. 初學Vue(學習筆記 一) day one
- 5. Vue 學習筆記 (一) -- 初識 VueCli 3
- 6. vue學習筆記-初識Vue
- 7. VUE初學筆記
- 8. 初學Vue筆記
- 9. 初學vue.js——學習筆記一
- 10. 學習VUE筆記及遇到的坑
- 更多相關文章...
- • 您已經學習了 XML Schema，下一步學習什麼呢？ - XML Schema 教程
- • 我們已經學習了 SQL，下一步學習什麼呢？ - SQL 教程
- • Tomcat學習筆記（史上最全tomcat學習筆記）
- • 適用於PHP初學者的學習線路和建議
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Vue學習筆記一：初識vue
- 2. Git學習筆記（一）初遇
- 3. NIO 學習筆記(一)初遇
- 4. 初學Vue(學習筆記 一) day one
- 5. Vue 學習筆記 (一) -- 初識 VueCli 3
- 6. vue學習筆記-初識Vue
- 7. VUE初學筆記
- 8. 初學Vue筆記
- 9. 初學vue.js——學習筆記一
- 10. 學習VUE筆記及遇到的坑