Vue.js 基本功能了解一下~

一、寫在前面

　　隔了這么久才來出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>

　　<script type="text/javascript">
        var app=new Vue({
            el:"#app",
            data:{
                message:"hello vue"
            }
        })
    </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>

    <script type="text/javascript">
        var app_2=new Vue({
            el:'#app_2',
            data:{
                message:'You loaded this page on '+new Date()
            }
        })
    </script>

　　例子2涉及到了Vue的特殊屬性 v-bind 指令，也會在相應的DOM元素上渲染！

四、條件與循環

　　Vue不僅可以綁定DOM文本到數據，也可以綁定DOM結構到數據！

　　1.條件

　　　　我們可以使用其中的 v-if 指令達到條件設置，而在實際應用中控制切換一個元素的顯示也很簡單。

　　　　例3：

    <div id="app_3">
        <p v-if="flags">Now you see me</p>
    </div>

    <script>
        var app_3=new Vue({
            el:'#app_3',
            data:{    
                flags:true
            }
        })
    </script>

　　　　同樣的可以修改data屬性來達到響應。

　　2.循環

　　　　每個指令都有特殊的功能，v-for 指令可以綁定數組的數據來渲染一個列表!

　　　　例4：

    <div id="app_3_2">
        <ul>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ul>
    </div>

    var app_3_2=new Vue({
            el:'#app_3_2',
            data:{
                todos:[
                    { text:'Learn JavaScript' },
                    { text:'Learn Vue' },
                    { text:'Learn Other ' }
                ]
            }
        })

　　打開控制台，輸入 app_3_2.todos.push({ text: '新項目' })，你會發現列表中添加了一個新項。

五、雙向綁定

　　Vue 提供了一個  v-model 指令，它能輕松實現表單輸入和應用狀態之間的雙向綁定。

　　例5：

    <div id="app5">
        <input type="text" v-model="msg2" />
        <p>{{msg2}}</p>
    </div>

    var app5 = new Vue({
        el: '#app5',
        data: {
        　　msg2: '# hello '
     　　}
    })

六、界面交互

　　為了讓用戶和你的應用進行互動，我們可以用  v-on  指令綁定一個事件監聽器，通過它調用我們 Vue 實例中定義的方法!

　　例6：

    <div id="app6">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">Reverse Message</button>
    </div>

    var app6=new Vue({
            el:'#app6',
            data:{
                message:'Hello Vue.js!'
            },
            methods:{
                reverseMessage:function(e){
                    this.message=this.message.split('').reverse().join('');
                }
            }
        })

　　注意：在methods方法中，只更新了狀態，沒有觸動到DOM!

七、組件構建（簡單版）

　　一定要先注冊完組件，再來實例化！

　　一定要確保在初始化根實例之前注冊了組件！

　　否則未注冊就使用會報錯的！　　

　　組件比較強大，可以擴展，封裝可重用代碼，就是比較膩害(*@ο@*) 哇～一定要好好的熟悉熟悉它！

　例7：

    <div id="app_7">
        <ol>
            <todo-item v-for="list in itemsList" v-bind:todo="list"></todo-item>
        </ol>
    </div>

    Vue.component('todo-item',{
            props:['todo'],
            template:'<li>{{todo.text}}</li>'
        });
        var app_7=new Vue({
            el:'#app_7',
            data:{
                itemsList:[
                    {text:'Vegetables'},
                    {text:'Cheese'},
                    {text:'Whatever else humans are supposed to eat'}
                ]
            }
        })

　　組件是很重要的一部分，當你熟悉完以上的內容后要好好研究組件系統，其中涉及到許多內容需要更詳細的掌握。

　　在實際項目中使用時，多個頁面有相同的part，組件復用簡直厲害的不要不要~O(∩_∩)O~~

 ---------------------------------------------------------------

vue的基本功能介紹就到這里了，謝謝思密達O(∩_∩)O~~

多多指教n(*≧▽≦*)n