標籤:構建 ext 顯示 條件 sage bind 詳細 date() methods
一、寫在前面
隔了這麼久才來出Vue的第二篇文章,真是墮落了,自己先懲罰下/(ㄒoㄒ)/~~
回過頭看自己第一篇相關文章《初試 Vue.js》(http://www.cnblogs.com/anniey/p/6307138.html),簡直慘不忍睹、不忍直視、辣眼睛,怎麼可以這麼囉嗦,廢話好多哦,沒臉看下去了~(o′?ェ?`o)
都說入一門語言寫好hello wrold開始,我上篇文章就已經打好這個頭啦,不管是Vue1,還是2,現在咱們繼續╰(*°▽°*)╯
二、起步
1.簡單的方式
建立好一個html檔案,通過script的方式引入,如下:
<script src="https://unpkg.com/vue"></script>
2.其他的方式
參考官網給出的選項:
https://cn.vuejs.org/guide/installation.html
三、資料的渲染
Vue.js的核心是採用簡潔的模板文法來聲明式的將資料渲染進DOM!
例1:
<div id="app">{{ message }}</div>
1 <script type="text/javascript">2 var app=new Vue({3 el:"#app",4 data:{5 message:"hello vue"6 }7 })8 </script>
這已經產生了一個vue應用,現在資料和DOM已經綁定在一起,只要修改app.message,相應的也會更新DOM!
例2:
<div id="app_2"> <span v-bind:title="message"> Hover your mouse over me for a few seconds to see my dynamically bound title! </span> </div>
1 <script type="text/javascript">2 var app_2=new Vue({3 el:‘#app_2‘,4 data:{5 message:‘You loaded this page on ‘+new Date()6 }7 })8 </script>
例子2涉及到了Vue的特殊屬性 v-bind 指令,也會在相應的DOM元素上渲染!
四、條件與迴圈
Vue不僅可以綁定DOM文本到資料,也可以綁定DOM結構到資料!
1.條件
我們可以使用其中的 v-if 指令達到條件設定,而在實際應用中控制切換一個元素的顯示也很簡單。
例3:
1 <div id="app_3">2 <p v-if="flags">Now you see me</p>3 </div>
1 <script>2 var app_3=new Vue({3 el:‘#app_3‘,4 data:{ 5 flags:true6 }7 })8 </script>
同樣的可以修改data屬性來達到響應。
2.迴圈
每個指令都有特殊的功能,v-for 指令可以綁定數組的資料來渲染一個列表!
例4:
1 <div id="app_3_2">2 <ul>3 <li v-for="todo in todos">4 {{todo.text}}5 </li>6 </ul>7 </div>
1 var app_3_2=new Vue({ 2 el:‘#app_3_2‘, 3 data:{ 4 todos:[ 5 { text:‘Learn JavaScript‘ }, 6 { text:‘Learn Vue‘ }, 7 { text:‘Learn Other ‘ } 8 ] 9 }10 })
開啟控制台,輸入 app_3_2.todos.push({ text: ‘新項目‘ })
,你會發現列表中添加了一個新項。
五、雙向繫結
Vue 提供了一個 v-model
指令,它能輕鬆實現表單輸入和應用狀態之間的雙向繫結。
例5:
1 <div id="app5">2 <input type="text" v-model="msg2" />3 <p>{{msg2}}</p>4 </div>
1 var app5 = new Vue({2 el: ‘#app5‘,3 data: {4 msg2: ‘# hello ‘5 }6 })
六、介面互動
為了讓使用者和你的應用進行互動,我們可以用 v-on
指令綁定一個事件監聽器,通過它調用我們 Vue 執行個體中定義的方法!
例6:
1 <div id="app6">2 <p>{{message}}</p>3 <button v-on:click="reverseMessage">Reverse Message</button>4 </div>
1 var app6=new Vue({ 2 el:‘#app6‘, 3 data:{ 4 message:‘Hello Vue.js!‘ 5 }, 6 methods:{ 7 reverseMessage:function(e){ 8 this.message=this.message.split(‘‘).reverse().join(‘‘); 9 }10 }11 })
注意:在methods方法中,只更新了狀態,沒有觸動到DOM!
七、組件構建(簡單版)
一定要先註冊完組件,再來執行個體化!
一定要確保在初始化根執行個體之前註冊了組件!
否則未註冊就使用會報錯的!
組件比較強大,可以擴充,封裝可重用代碼,就是比較膩害(*@ο@*) 哇~一定要好好的熟悉熟悉它!
例7:
1 <div id="app_7">2 <ol>3 <todo-item v-for="list in itemsList" v-bind:todo="list"></todo-item>4 </ol>5 </div>
1 Vue.component(‘todo-item‘,{ 2 props:[‘todo‘], 3 template:‘<li>{{todo.text}}</li>‘ 4 }); 5 var app_7=new Vue({ 6 el:‘#app_7‘, 7 data:{ 8 itemsList:[ 9 {text:‘Vegetables‘},10 {text:‘Cheese‘},11 {text:‘Whatever else humans are supposed to eat‘}12 ]13 }14 })
組件是很重要的一部分,當你熟悉完以上的內容後要好好研究組件系統,其中涉及到許多內容需要更詳細的掌握。
在實際項目中使用時,多個頁面有相同的part,組件複用簡直厲害的不要不要~O(∩_∩)O~~
---------------------------------------------------------------
vue的準系統介紹就到這裡了,謝謝思密達O(∩_∩)O~~
多多指教n(*≧▽≦*)n
Vue.js 準系統瞭解