偏前端-vue.js學習之路初級（一）概念
首先--不推薦新手直接使用 vue-cli，尤其是在你還不熟悉基於 Node.js 的構建工具時。
新建一個html,引入一下js:
<!-- 開發環境版本，包含了有幫助的命令列警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生產環境版本，優化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
一、文字申明式渲染
html:
1<div id="app"> 2 {{ message }} 3 </div>
js:
1 var app = new Vue({ 2 el: '#app', 3 data: { 4 message: 'Hello Vue!' 5 } 6 })
el：
簡單的理解為 選中 id 為 app 的div，（提供一個在頁面上已存在的 DOM 元素作為 Vue 例項的掛載目標。）
data:
文件一：1.型別可以是 object 或者 function
2.元件的定義只接受 function
分析一：首先，data的型別可以是Object
new Vue({ el:'app', data:{ newTodoText:'', visitCount:0, zhen:false, todos:[], error:null } })
分析二：元件（component）裡的定義的data必須是方法型別
Vue.component('myComponent',{
props:[],
data:function(){
文件二：Vue 例項的資料物件。Vue 將會遞迴將 data 的屬性轉換為 getter/setter，從而讓 data 的屬效能夠響應資料變化。物件必須是純粹的物件 (含有零個或多個的 key/value 對)：瀏覽器 API 建立的原生物件，原型上的屬性會被忽略。大概來說，data 應該只能是資料 - 不推薦觀察擁有狀態行為的物件。
一旦觀察過，不需要再次在資料物件上新增響應式屬性。因此推薦在建立例項之前，就宣告所有的根級響應式屬性。
分析二：在上圖的例項中，app的data物件中有五個屬性，分別是：
newTodoText:'', visitCount:0, zhen:false, todos:[], error:null
分析二：Vue會把這五個屬性轉化為getter和setter來控制訪問物件app的屬性，以第一個屬性newTodoText為例設定了getter和setter：
const Vue = {
_newTodoText:'',
/***************/
get newTodoText(){
return this._newTodoText;
},
set newTodoText(value){
this._newTodoText = value;
},
/****************/
}
文件三：例項建立之後，可以通過 vm.$data 訪問原始資料物件。Vue 例項也代理了 data 物件上所有的屬性，因此訪問 vm.a 等價於訪問 vm.$data.a。
以 _ 或 $ 開頭的屬性 不會 被 Vue 例項代理，因為它們可能和 Vue 內建的屬性、API 方法衝突。你可以使用例如 vm.$data._property 的方式訪問這些屬性。
分析三：這個好理解，就是你可以在data中可以定義屬性時在屬性名開頭加上下劃線“_”或者美元符號“$”，就不可以直接訪問，
<body>
<div id="app">
{{first}}
{{_first}}
</div>
<script>
new Vue({
el:'app',
data:{
first:'ok',
_first:'nope', } })
//這裡會報錯，下面才是正解
分析三：
//這裡才是正確姿勢！！
<body>
<div id="app">
{{first}}
{{$data._first}}
</div>
<script>
new Vue({
el:'app',
data:{
first:'ok',
_first:'nope',
}
})
文件四：當一個元件被定義，data 必須宣告為返回一個初始資料物件的函式，因為元件可能被用來建立多個例項。如果 data 仍然是一個純粹的物件，則所有的例項將共享引用同一個資料物件！通過提供 data 函式，每次建立一個新例項後，我們能夠呼叫 data 函 數，從而返回初始資料的一個全新副本資料物件。
如果需要，可以通過將 vm.$data 傳入 JSON.parse(JSON.stringify(...)) 得到深拷貝的原始資料物件。
分析四：這就是分析一要解決的問題了，為什麼元件（component）裡的定義的data必須是方法型別，原因就是在此，在工程中，每個元件都有可能用來被建立多個例項，而這個元件的例項他們的屬性是不能共用的！意思是元件A的屬性改變不能引起元件B的同一屬性改變，結合原型鏈知識很容易就能想清楚
除了文字插值，我們還可以像這樣來繫結元素特性：v-bind 特性被稱為指令。指令帶有字首 v-
1 <div id="app-2"> 2 <span v-bind:title="message"> 3 滑鼠懸停幾秒鐘檢視此處動態繫結的提示資訊！ 4 </span> 5 </div>
1 var app2 = new Vue({ 2 el: '#app-2', 3 data: { 4 message: '頁面加載於 ' + new Date().toLocaleString() 5 } 6 })
二、條件與迴圈
1.條件判斷使用 v-if 指令：可以用 v-else 指令給 v-if 新增一個 "else" 塊：
1 //隨機生成一個數字，判斷是否大於0.5，然後輸出對應資訊： 2 <div id="app"> 3 <div v-if="Math.random() > 0.5"> 4 Sorry 5 </div> 6 <div v-else> 7 Not sorry 8 </div> 9 </div> 10 11 <script> 12 new Vue({ 13 el: '#app' 14 }) 15 </script>
2.v-else-if
v-else-if 在 2.1.0 新增，顧名思義，用作 v-if 的 else-if 塊。可以鏈式的多次使用：
v-else 、v-else-if 必須跟在 v-if 或者 v-else-if之後。
3.v-show
v-show 指令來根據條件展示元素：
1 <div id="app"> 2 <h1 v-show="ok">Hello!</h1> 3 </div> 4 5 <script> 6 new Vue({ 7 el: '#app', 8 data: { 9 ok: true 10 } 11 }) 12 </script>
4.v-if與v-show的區別：
在切換 v-if 塊時，Vue.js 有一個區域性編譯/解除安裝過程，因為 v-if 之中的模板也可能包括資料繫結或子元件。
v-if 是真實的條件渲染，因為它會確保條件塊在切換當中合適地銷燬與重建條件塊內的事件監聽器和子元件。
v-if 也是惰性的：如果在初始渲染時條件為假，則什麼也不做——在條件第一次變為真時才開始區域性編譯（編譯會被快取起來）。
相比之下，v-show 簡單得多——元素始終被編譯並保留，只是簡單地基於 CSS 切換。
一般來說，v-if 有更高的切換消耗而 v-show 有更高的初始渲染消耗。因此，如果需要頻繁切換 v-show 較好，如果在執行時條件不大可能改變 v-if 較好。
5.迴圈使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊語法， sites 是源資料陣列，並且 site 是陣列元素迭代的別名。
v-for 可以繫結資料到陣列來渲染一個列表：
1 <div id="app"> 2 <ol> 3 <li v-for="site in sites"> 4 {{ site.name }} 5 </li> 6 </ol> 7 </div> 8 9 <script> 10 new Vue({ 11 el: '#app', 12 data: { 13 sites: [ 14 { name: 'Runoob' }, 15 { name: 'Google' }, 16 { name: 'Taobao' } 17 ] 18 } 19 }) 20 </script>
模板中使用 v-for：根據sites陣列內容迴圈展示模板裡的 li 標籤
1 <ul> 2 <template v-for="site in sites"> 3 <li>{{ site.name }}</li> 4 <li>--------------</li> 5 </template> 6 </ul>
5.1 v-for 迭代物件
v-for 可以通過一個物件的屬性來迭代資料：
1 <li v-for="value in object"> 2 {{ value }} 3 </li>
也可以提供第二個的引數為鍵名：
1 <li v-for="(value, key) in object"> 2 {{ key }} : {{ value }} 3 </li>
第三個引數為索引：
1 <li v-for="(value, key, index) in object"> 2 {{ index }}. {{ key }} : {{ value }} 3 </li>
不僅如此，在迭代屬性輸出的之前，v-for會對屬性進行升序排序輸出：
1 <div id="app"> 2 <ul> 3 <li v-for="n in object"> 4 {{ n }} 5 </li> 6 </ul> 7 </div> 8 9 new Vue({ 10 el: '#app', 11 data: { 12 object: { 13 2: '第三', 14 0: '第一', 15 1: '第二' 16 } 17 } 18 })
5.2 v-for 迭代整數
v-for 也可以迴圈整數
1 <li v-for="n in 10"> 2 {{ n }} 3 </li> 4 //從1展示到10
5.3 v-for 迴圈陣列
1 <li v-for="n in [1,3,5]"> 2 {{ n }} 3 </li> 4 //展示1/3/5
三、處理使用者輸入
1.v-on指令繫結事件監聽
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">逆轉訊息</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
2.v-model（它能輕鬆實現表單輸入和應用狀態之間的雙向繫結。）
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})