Vuejs --01 起步

標籤：模板   java   解釋   react   log   hello   元素屬性   傳值   簡潔   

一、是什麼     1、是一套構建使用者介面的漸進式架構，Vue採用自底向上漸進式開發的設計          1.1     解釋：架構譬如angular，是強主張，如果用之---必須使用它的模組機制，必須使用它的依賴注入，必須使用它的特殊形式定義組件（此每個視圖架構都一樣，難以避免）；架構比如react，侵入性看似沒有angular強，因為它是軟性侵入。    　　　　　　　　   而Vue是漸進式，沒有強主張

你可以在原有大系統的上面，把一兩個組件改用它實現，當jQuery用；也可以整個用它全家桶開發，當Angular用；還可以用它的視圖，搭配你自己設計的整個下層用。你可以在底層資料邏輯的地方用OO和設計模式的那套理念，也可以函數式，都可以，它只是個輕量視圖而已，只做了自己該做的事，沒有做不該做的事，僅此而已。     ---摘自知乎徐飛

 二、聲明式渲染     1、Vue核心：採用簡潔的模板文法來聲明式地將資料渲染進DOM

<div id="app">     <p>{{message}}<p>     <p v-bind:title="messa">滑鼠懸浮時顯示title，此時title被Vue綁定了messa（v-表示他們是Vue提供的特殊屬性）</p></div> <script>     new Vue({         el: ‘#app‘,     //注意不能漏掉#         data: {               message: ‘hello‘,          //方式一：元素內資料渲染               messa: ‘懸浮顯示title‘     //方式二：元素屬性資料渲染（區於模板渲染（     <input value="{{message}}" />    ），屬性綁定必須用v-bind:   (     <input v-bind:value="message" />     )）         }      });</script>

 三、條件與迴圈

<div id="app1">     <p v-if="seen">根據if是否為真判斷是否可見，或者說是否運行此行代碼</p></div> <script>     new Vue({          el: ‘#app1‘,          data:{               seen: true          }     });</script>

 

<div id="app1">     <ul>       <li v-for="key in list">         {{key.text}}       </li>     </ul></div> <script>     new Vue({          el: ‘#app1‘,          data:{               list: [                    {text: ‘nihao‘},                    {text: ‘wohao‘},                    {text: ‘dajiahao‘}               ]          }     });</script>

 四、處理使用者輸入     1、事件

<div id="app1">     <input type="text" name="va" v-bind:value="message">     <a href="javascript:;" v-on:click="btnEvent">綁定點擊事件</a></div> <script>    new Vue({        el: ‘#app1‘,        data: {            message: ‘你好‘        },        methods: {            btnEvent: function() {                this.message = ‘點擊之後，message值改變‘            }        }    });</script>  

      2、表單輸入和應用狀態之間的雙向繫結

<div id="app1">     <input type="text" name="va" v-model="message">     <p>     {{message}}     </p></div> <script>     new Vue({          el: ‘#app1‘,          data:{              message: ‘你好‘          }     }); </script>

 五、組件化應用構建

//自訂群組建 ‘item-list‘ ，並定義該組件包含：li模板（內容資料是自訂屬性值中傳過來的） + 自訂屬性props（包含屬性名稱item（屬性值從父級中通過v-bind傳過來））---》完成了從父級中傳值給子級即：自訂群組件）<div id="app2">  <ul>    <item-list v-for="key in dataList" v-bind:item="key" v-bind:key="key.id">     </item-list>  </ul></div> <script>    Vue.component(‘item-list‘, {        props: [‘item‘],        template: ‘<li>{{item.text}}</li>‘    });    var app2 = new Vue({        el: ‘#app2‘,        data: {            dataList: [{                id: 0,                text: ‘你好‘            }, {                id: 1,                text: ‘我好‘            }, {                id: 2,                text: ‘大家好‘            }]        }    }); </script>

          

Vuejs --01 起步