閱讀51 返回首頁    go 阿裏雲 go 技術社區[雲棲]

vue初步介紹

vue.js是什麼

Vue.js（讀音類似於view） 是一套構建用戶界麵的漸進式框架。與其他重量級框架不同的是，Vue 采用自底向上增量開發的設計。Vue 的核心庫隻關注視圖層，它不僅易於上手，還便於與第三方庫或既有項目整合。另一方麵，當與單文件組件和 Vue 生態係統支持的庫結合使用時，Vue 也完全能夠為複雜的單頁應用程序提供驅動

聲明式渲染

Vue.js 的核心是一個允許采用簡潔的模板語法來聲明式的將數據渲染進 DOM：

<div >
    <p>{{message}}</p> //Hello Vue.js!
</div>
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            message:'Hello Vue.js!'
        }
    })
</script>

現在數據和 DOM 已經被綁定在一起，所有的元素都是響應式的

除了文本插值，我們還可以采用這樣的方式綁定 DOM 元素屬性：

<div >
    <p>{{message}}</p>
    <span v-bind:title="message">鼠標懸停幾秒鍾查看此處動態綁定的提示信息！</span>
</div>      
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#appa',
        data:{
            message:'Hello Vue.js!'
        }
    })
</script>

這裏我們遇到點新東西。你看到的 v-bind 屬性被稱為指令。指令帶有前綴 v-，以表示它們是 Vue 提供的特殊屬性。可能你已經猜到了，它們會在渲染的 DOM 上應用特殊的響應式行為。簡言之，這裏該指令的作用是：“將這個元素節點的 title 屬性和 Vue 實例的 message 屬性保持一致”

條件與循環

控製切換一個元素的顯示也相當簡單：

<div >
    <p>{{message}}</p>
    <span v-bind:title="message">鼠標懸停幾秒鍾查看此處動態綁定的提示信息！</span>
    <p v-if="seen">現在你看到我了</p>
</div>      
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#appa',
        data:{
            message:'Hello Vue.js!',
            seen: true
        }
    })
</script>

繼續在控製台設置 appa.seen = false，你會發現 “現在你看到我了” 消失了

這個例子演示了我們不僅可以綁定 DOM 文本到數據，也可以綁定 DOM 結構到數據。而且，Vue 也提供一個強大的過渡效果係統，可以在 Vue 插入/更新/刪除元素時自動應用過渡效果

還有其它很多指令，每個都有特殊的功能。例如，v-for 指令可以綁定數組的數據來渲染一個項目列表：

<div >
    <p>{{message}}</p>
    <span v-bind:title="message">鼠標懸停幾秒鍾查看此處動態綁定的提示信息！</span>
    <p v-if="seen">現在你看到我了</p>
    <ol>
        <li v-for="todo in todos">{{ todo.text }}</li>
    </ol>
</div>      
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#appa',
        data:{
            message:'Hello Vue.js!',
            seen: true,
            todos: [
                { text: '學習 JavaScript' },
                { text: '學習 Vue' },
                { text: '整個牛項目' }
            ]
        }
    })
</script>

處理用戶輸入

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

<div >
    <p>{{message}}</p>
    <span v-bind:title="message">鼠標懸停幾秒鍾查看此處動態綁定的提示信息！</span>
    <p v-if="seen">現在你看到我了</p>
    <ol>
        <li v-for="todo in todos">{{ todo.text }}</li>
    </ol>
    <button v-on:click="reverseMessage">逆轉消息</button>
</div>      
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#appa',
        data:{
            message:'Hello Vue.js!',
            seen: true,
            todos: [
                { text: '學習 JavaScript' },
                { text: '學習 Vue' },
                { text: '整個牛項目' }
            ]
        },
        methods:{
            reverseMessage:function(){
                this.message = this.message.split('').reverse().join('');
            }
        }
    })
</script>

注意在 reverseMessage 方法中，我們更新了應用的狀態，但沒有觸碰 DOM —— 所有的 DOM 操作都由 Vue 來處理，我們編寫代碼隻需要關注底層邏輯

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

<div >
    <p>{{message}}</p>
    <span v-bind:title="message">鼠標懸停幾秒鍾查看此處動態綁定的提示信息！</span>
    <p v-if="seen">現在你看到我了</p>
    <ol>
        <li v-for="todo in todos">{{ todo.text }}</li>
    </ol>
    <button v-on:click="reverseMessage">逆轉消息</button>
    <input v-model="message"/>
</div>      
<script src="js/vue.js"></script>
<script>
    new Vue({
        el:'#appa',
        data:{
            message:'Hello Vue.js!',
            seen: true,
            todos: [
                { text: '學習 JavaScript' },
                { text: '學習 Vue' },
                { text: '整個牛項目' }
            ]
        },
        methods:{
            reverseMessage:function(){
                this.message = this.message.split('').reverse().join('');
            }
        }
    })
</script>

組件化應用構建

組件係統是 Vue 的另一個重要概念，因為它是一種抽象，允許我們使用小型、自包含和通常可複用的組件構建大型應用。仔細想想，幾乎任意類型的應用界麵都可以抽象為一個組件樹：

在 Vue 裏，一個組件本質上是一個擁有預定義選項的 Vue 實例，在 Vue 中注冊組件很簡單：

Vue.component('todo-item', {   // 定義名為 todo-item 的新組件
    template: '<li>這是個待辦項</li>'
})

現在你可以用它構建另一個組件模板：

<ol>     
    <todo-item></todo-item>     <!-- 創建一個 todo-item 組件的實例 -->
</ol>

但是這樣會為每個待辦項渲染同樣的文本，這看起來並不炫酷，我們應該能將數據從父作用域傳到子組件。讓我們來修改一下組件的定義，使之能夠接受一個屬性：

<div >
    <p>{{message}}</p>
    <span v-bind:title="message">鼠標懸停幾秒鍾查看此處動態綁定的提示信息！</span>
    <p v-if="seen">現在你看到我了</p>
    <ol>
        <li v-for="todo in todos">{{ todo.text }}</li>
    </ol>
    <button v-on:click="reverseMessage">逆轉消息</button>
    <input v-model="message"/>
    <ol><!-- 現在我們為每個todo-item提供待辦項對象;待辦項對象是變量，即其內容可以是動態的 -->
        <todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
    </ol>
</div>      
<script src="js/vue.js"></script>
<script>
        Vue.component('todo-item',{
            props:['todo'],
            template:'<li>{{ todo.text }}</li>'
        })
        var appa = new Vue({
            el:'#appa',
            data:{
                message:'Hello Vue.js!',
                seen: true,
                todos: [
                  { text: '學習 JavaScript' },
                  { text: '學習 Vue' },
                  { text: '整個牛項目' }
                ],
                groceryList:[
                    { text: '蔬菜' },
                    { text: '奶酪' },
                    { text: '隨便其他什麼人吃的東西' }
                ]
            },
            methods:{
                reverseMessage:function(){
                    this.message = this.message.split('').reverse().join('');
                }
            }
        })
    </script>

這隻是一個假設的例子，但是我們已經設法將應用分割成了兩個更小的單元，子單元通過 props 接口實現了與父單元很好的解耦。我們現在可以進一步為我們的 todo-item 組件實現更複雜的模板和邏輯的改進，而不會影響到父單元

在一個大型應用中，有必要將整個應用程序劃分為組件，以使開發可管理。在後續教程中我們將詳述組件，不過這裏有一個（假想的）使用了組件的應用模板是什麼樣的例子：

與自定義元素的關係

Vue 組件非常類似於自定義元素——它是 Web 組件規範的一部分，這是因為 Vue 的組件語法部分參考了該規範。例如 Vue 組件實現了 Slot API 與 is 特性。但是，還是有幾個關鍵差別：

1.Web 組件規範仍然處於草案階段，並且尚無瀏覽器原生實現。相比之下，Vue 組件不需要任何補丁，並且在所有支持的瀏覽器（IE9 及更高版本）之下表現一致。必要時，Vue 組件也可以包裝於原生自定義元素之內。

2.Vue 組件提供了純自定義元素所不具備的一些重要功能，最突出的是跨組件數據流，自定義事件通信以及構建工具集成。

最後更新：2017-06-09 11:01:53

  上一篇：go  給你1000萬你可以把生活過的更好嗎？
  下一篇：go  如何避免網站收錄低和收錄周期長