vue零基礎

vue 與其他框架的對比

框架	設計模式	數據綁定	靈活度	文件模式	復雜性	學習曲線	生態
Vue	MVVM	雙向	靈活	單文件	小	緩	完善
React	MVC	單向	較靈活	all in js	大	陡	豐富
Angular	MVC	雙向	固定	多文件	較大	較陡（Typescript）	獨立

更多對比細節：vue 官網：https://cn.vuejs.org/v2/guide/comparison.html

Vue 是一個推陳出新的前端框架，吸收了很多前端框架的優點。例如，Vue 借鑒了 React 的組件化和虛擬 DOM ，借鑒了 Angular 的模塊化和數據綁定。因此，我們以 Vue.js 作為入手，以后深入學習其他框架，你會發現他們的共通之處，更好地高效地學習。

選擇 Vue.js 的更多原因是，就框架的 API 而言，對比之下，Vue 更加輕便簡潔。Vue 自身擁有開箱即用的生態開發包（Vuex,Vue-Router）等，復雜性低、學習成本低，是一門比較好入門的前端框架。

如果你剛開始學習前端開發，將框架作為你的第一步可能不是最好的選擇，推薦進入實驗樓前端基礎知識課程。假入你已掌握了關于 HTML、CSS 和 JavaScript 的中級知識，那讓我們進入 Vue 的學習吧!

每個 Vue 應用都是通過用 Vue 函數創建一個新的 Vue 實例 開始的：

var app = new Vue({// 選項
});

vue框架就是很簡單的，新手可以在html的head標簽里面直接引入一個帶有vue連接的script就ok

Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式地將數據渲染進 DOM 的系統，我們新建一個.html 后綴的文件，輸入以下代碼，運行（右擊文件 > open with > Preview 或 Mini Browser），你就會看到 {{msg}} 被渲染成 hello

<!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>syl-vue-test</title><!-- 通過cdn方式引入 vue.js --><script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script></head><body><div id="app">{{msg}}</div><script>var app = new Vue({el: "#app", //dom掛載點data: {//數據項msg: "hello syl",},});</script></body>
</html>

運行效果：

此處輸入圖片的描述

說明： el 為實例掛載點，上面表示掛載在 id 為 app 的 dom 元素中。data 選項為數據選項，存放綁定數據。除了這兩個之外還有實例選項，methods（實例方法）、computed（計算屬性）等，后面我們會學習到。

雙大括號

雙大括號 {{ }} 在 Vue.js 中被用作文本插值的語法，這是一種在模板中輸出數據到 HTML 的簡單方式。當你在 Vue.js 的模板中使用 {{msg}} 時，Vue 會自動將其替換為與其綁定的數據屬性 msg 的當前值。

在你給出的例子中：

<input type="text" v-model="msg" /> 這行 HTML 代碼創建了一個文本輸入框，并通過 v-model 指令將其值與 Vue 實例的 msg 數據屬性雙向綁定。這意味著，當你在輸入框中輸入文本時，msg 屬性的值會實時更新，反之亦然。
<p>{{msg}}</p> 這行 HTML 代碼將會在 <p> 標簽中顯示 msg 屬性的值。當 msg 的值發生變化時（比如你在輸入框中輸入了文本），這個變化會立即反映在 <p> 標簽中的內容上。

所以，雙大括號 {{ }} 內的內容是動態的，并且是響應式的。它不僅僅是簡單的文本輸入，而是一個數據綁定的表達式，Vue 會監控這個表達式關聯的數據屬性，一旦屬性值發生變化，模板中的內容也會自動更新。

總結來說，雙大括號 {{ }} 用于在 Vue 模板中輸出 JavaScript 表達式的結果。在 Vue.js 中，它是最基本的數據綁定形式，允許開發者將數據實時渲染到 DOM 中，非常適合構建動態交互的用戶界面。

上面的雙大括號表達式會將數據解釋為普通文本，即使你的數據為 HTML 元素，也不會渲染成對應的標簽元素，只能渲染成普通文本，而非 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>syl-vue</title><!-- 通過cdn方式引入 vue.js --><script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script></head><body>     <!-- 數據綁定 --> <div id="app"><p>{{msg}}</p></div><script>var app = new Vue({el: "#app", //el: 掛載點data: {           //data:數據選項msg: "<h1>hello syl</h1>", //這個標簽h1還是會作為h1文本進行輸出的},});</script></body>
</html>

tips：

在 Vue.js 中，el 屬性指的是“掛載點”，也就是 Vue 實例所要控制的 DOM 元素。這個 DOM 元素作為 Vue 實例的作用范圍。在你的代碼中，el: "#app" 告訴 Vue 實例要控制的 DOM 元素是頁面上 id 為 app 的元素。Vue 實例會管理這個元素及其內部的所有內容。

data 屬性是 Vue 實例的一個選項，用于聲明所有這個實例要用到的數據。這些數據是響應式的，意味著當這些數據變化時，綁定這些數據的視圖也會自動更新。

關于逗號的使用，JavaScript 中的對象由鍵值對構成，這些鍵值對就是屬性名和它們對應的值。在對象字面量的表示法中，每個鍵值對之間都用逗號 , 分隔。例如：

var app = new Vue({el: "#app",  // 這里的逗號分隔了 el 和 data 兩個不同的屬性data: {msg: "<h1>hello syl</h1>",},  // 這里的逗號在實際中不是必需的，因為后面沒有緊跟其他屬性，但放置逗號是一種常見的做法，便于后續添加新屬性
});

在 data 對象內部，如果你有多個屬性，它們也會用逗號分隔。逗號是 JavaScript 對象以及許多其他結構（如數組）中分隔元素的標準方式。在實踐中，最后一個屬性后面的逗號是可選的，但有的開發者喜歡加上它，也可以不加上去，因為這樣添加新屬性時更方便。這通常被稱為“尾逗號”（trailing comma）。

雙大括號語法不能作用在 HTML 特性（標簽屬性）上，需要對標簽屬性操作，應該使用 v-bind 指令：

<div v-bind:class="syl-vue-course"></div>

HTML 標簽屬性為布爾特性時，它們的存在表示為 true，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>syl-vue</title><!-- 通過cdn方式引入 vue.js --><script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script></head><body><!-- 布爾特性綁定--><div id="app"><input type="checkbox" v-bind:checked="isChecked" /></div><script>var app = new Vue({el: "#app",data: {isChecked: false, // isChecked是否選中boolean},});</script></body>
</html>

一些指令能夠接收一個“參數”，在指令名稱之后以冒號表示。例如，v-bind 指令可以用于響應式地更新 HTML 特性，在這里 href 是參數，告知 v-bind 指令將該元素的 href 特性與表達式 url 的值綁定，例子：

<!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>syl-vue</title><!-- 通過cdn方式引入 vue.js --><script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script></head><body><!-- 指令 參數--><div id="app"><a v-bind:href="url">123</a></div><script>var app = new Vue({el: "#app",data: {url: "https://www.baidu.com",},});</script></body>
</html>

另外一個例子，v-on 指令，用于監聽 DOM 事件，例子：

<!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>syl-vue</title><!-- 通過cdn方式引入 vue.js --><script src="https://labfile.oss.aliyuncs.com/courses/1262/vue.min.js"></script></head><body><!-- 指令 參數--><div id="app"><p>我叫：{{name}}</p><!-- handleClick 使我們在實例 methods 中寫的方法 --><button v-on:click="handleClick">點我</button><p v-bind:class="'col'+colNum">syl</p></div><script>var app = new Vue({el: "#app",data: {name: "實驗樓",colNum: "12",},methods: {//實例方法對象handleClick: function () {this.name = this.name.split("").reverse().join("");},},});</script></body>
</html>

在 Vue.js 中，v-bind:class 用于動態地綁定 class 屬性。這個指令后面通常跟著一個 JavaScript 表達式。

在你提供的代碼中：

<p v-bind:class="'col'+colNum">syl</p>

'col' + colNum 是一個字符串拼接的表達式，它將 'col' 字符串與 colNum 數據屬性的值拼接起來。如果 colNum 的值為 "12"（如你的 Vue 實例中定義的那樣），那么這個表達式的結果就是字符串 "col12"。

這意味著 Vue 會將這個計算后的字符串值綁定到 <p> 元素的 class 屬性上。所以，最終渲染到 DOM 上的 HTML 會是這樣的：

<p class="col12">syl</p>

這樣你就可以根據 colNum 的值來動態地設置 <p> 元素的類名，這在響應式布局框架（如 Bootstrap）中非常有用，其中 col-12 類型的類名用于指定元素在網格系統中占據的列數。如果你改變了 colNum 的值，那么綁定的類名也會相應地改變。

類似的操作在這里：

在 Vue.js 中，除了 v-bind 用于綁定 HTML 特性外，還有許多其他指令和技術可以用來實現不同的動態行為和數據綁定。下面是一些常用的 Vue 指令和它們的用途：

v-model：
- 用于在表單元素上創建雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。
```
<input v-model="message" placeholder="編輯我...">
```
v-for：
- 用于基于源數據多次渲染一個元素或模板塊。可以用于渲染列表。
```
<ul><li v-for="item in items">{{ item.text }}</li>
</ul>
```
v-if / v-else-if / v-else：
- 用于條件渲染一塊內容。只有表達式返回真值時才渲染。
```
<p v-if="seen">現在你看到我了</p>
```
v-show：
- 類似于 v-if，但是它通過切換 CSS 的 display 屬性來顯示或隱藏元素。
```
<p v-show="isVisible">你可以看到我嗎？</p>
```
v-on：
- 用于監聽 DOM 事件，并在觸發時執行一些 JavaScript 代碼。
```
<button v-on:click="doSomething">點擊我</button>
```
v-slot：
- 用于編寫可復用的模板組件，允許子組件內部的內容通過插槽分發。
v-pre：
- 跳過這個元素和它的子元素的編譯過程。可以用來顯示原始的 Mustache 標簽。
```
<span v-pre>{{ this will not be compiled }}</span>
```
v-cloak：
- 保持在元素上直到關聯實例結束編譯。配合 CSS 規則 [v-cloak] { display: none } 可以隱藏未編譯的 Mustache 標簽直到 Vue 實例準備就緒。
v-once：
- 執行一次性的插值，當數據改變時，插值處的內容不會更新。
```
<span v-once>這個將不會改變: {{ msg }}</span>
```