Vue.js 準系統瞭解

來源:互聯網
上載者:User

標籤:構建   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 準系統瞭解

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.