vue.js入門筆記（ps：前端初級）
第一章 vue.js是什么？
Vue（法語） view（英語）
是一套構建用戶界面的MVVM框架。核心庫只關注視圖層。並且非常容易學習。
非常容易與其它庫或者已有的項目進行整合
1.1 Vue.js的目的
vue.js的產生核心是為了解決如下三個問題：
1、解決數據綁定的問題：（從angular.js人們認識到）
2、Vue.js框架產生的主要目的是為了開發大型單頁面應用（SPA：Single page application ）
angular.js對PC端支持良好，但是對移動端支持一般。而Vue.js主要支持移動端，也支持PC端。
3、它還支持組件化。也就是可以將頁面封裝成若干個組件。采用積木式編程，這樣使頁面的復用度達到最高（支持組件化）
1.2 Vue.js特性
1.MVVM
M：model 業務模型 ，用處：處理數據，提供數據
V：view 用戶界面、用戶視圖
業務模型model中的數據發生改變的時候，用視view也會隨之變化。用戶試圖view改變的時候，業務模型model中的數據也可以發生改變。
2.組件化
3.指令系統
4.Vue.js2.0 開始支持虛擬DOM(Vuejs 1.0是操作的真實DOM，而不是虛擬DOM)
虛擬DOM可以提升頁面的刷新速度。
第二章 Vue.js入門
使用Vue.js的步驟：
第一步：在html中引入這個Vue.js。（通過一個script的標簽）
第二步：Vue.js提供了一個Vue,我們需要創建一個對象
new Vue();
第三步:在用戶界面view中，通過{{}}形式將data中的數據顯示在頁面中。
在用戶界面中，{{}}中綁定的data的key（鍵值），而在界面中顯示的是該key的value。
Vue.js對獲取的data與頁面上顯示的{{}}會產生一種映射關系。
app這個變量會搭理vue中data數據，所以我們訪問數據的時候，直接使用app.name(例子)
如果我們要實現前后台交互，只要將從后台得到的數據放在app.data中，頁面就會自動綁定，這樣就實現了從model>view的數據流向。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>vue.js入門</title> 6 <script src="js/vue.js"></script> 7 </head> 8 <body> 9 <h1 id="demo">{{name}}，歡迎您來到Vue.js的樂園！</h1> 10 </body> 11 <script> 12 var app = new Vue({ 13 el:'#demo', //聲明Vue.js管理的邊界（可以是ID，類，標簽名等選擇器）（PS：同樣的選擇器，這里只會匹配第一個。。） 14 data:{ //data核心作用是存放顯示在頁面中的數據，需要是一個對象 15 name:'akun' 16 } 17 }); 18 </script> 19 </html>
第三章 Vue.js指令
指令，其實指的就是vue自定義的v- 開頭的自定義屬性，每個不同的屬性都有各自不同的意義和功能。
指令的語法：
v-指令名稱=“表達式判斷或者是業務模型中屬性名或者事件名”
3.1 v-text
作用：操作元素中的純文本
快捷方式：{{}} （PS：最外面的引號是vue.js的界限符號，並非字符串的引號，所以里面是字符串的時候，需要另加引號）
示例1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js控制純文本（上）</title>
<script src="js/vue.js"></script>
</head>
<body>
<h1 id="demo" v-text="'今天是'+year+'年'+month+'月'+day+'日'"></h1>
<script>
new Vue({
el:'#demo', //vue管理的邊界
data:{
year:new Date().getFullYear(),
month:new Date().getMonth()+1,
day:new Date().getDate()
}
});
</script>
</body>
</html>
示例2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js控制純文本（下）</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="demo">
<p>姓名：{{person.name}}</p>
<p>年齡：{{person.age}}</p>
<p>性別：{{person.sex}}</p>
</div>
<script>
var app = new Vue({
el:'#demo',
data:{
person:{
name:'xushankun',
sex:'男',
age:'25'
}
}
});
app.person.sex='男的嗎'; //通過js來控制文本
console.log(app.person.sex);
</script>
</body>
</html>
3.2 v-html
作用：操作html
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js控制html</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="demo" v-html="msg">{{msg}}</div>
<script>
var app = new Vue({
el:'#demo',
data:{
msg:' <img src="images/03.jpg" alt="">'
}
});
</script>
</body>
</html>
3.3 v-bind
作用：v-bind綁定頁面中的元素屬性。例如：a的href屬性，img的src、alt和title屬性。
語法：v-bind：元素的屬性名 = "data中鍵名"
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue.js控制html</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="demo">
<img v-bind:src="msg" alt="">
</div>
<script>
var app = new Vue({
el:'#demo',
data:{
msg:'images/03.jpg'
}
});
</script>
</body>
</html>
在view模板中，可以使用簡單的JS表達式，例如：
<p>{{num==1? '輸出A' : '輸出B'}}</p>