vuejs有什麼功能

vuejs的功能：1、採用簡潔的模板語法來聲明式的將資料渲染進DOM；2、利用「v-if」和「v-for」指令實現條件與循環結構；3、利用「v-model」指令實現資料雙向綁定；4、利用事件監聽器，實現介面互動；5、元件式開發等等。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

Vue.js 基本功能了解~

#1、資料的渲染

　　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:&#39;#app_2&#39;,
            data:{
                message:&#39;You loaded this page on &#39;+new Date()
            }
        })
    </script>

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

2、條件與循環

　　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:&#39;#app_3&#39;,
            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: '新項目' })，你會發現清單中新增了一個新項目。

3、雙向綁定

　　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 '
     　　}
    })

4、介面互動

　　為了讓使用者和你的應用程式互動，我們可以用  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!

5、元件建置（簡單版）

　　一定要先註冊完元件，再來實例化！

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

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

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

　例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:&#39;<li>{{todo.text}}</li>&#39;
        });
        var app_7=new Vue({
            el:&#39;#app_7&#39;,
            data:{
                itemsList:[
                    {text:&#39;Vegetables&#39;},
                    {text:&#39;Cheese&#39;},
                    {text:&#39;Whatever else humans are supposed to eat&#39;}
                ]
            }
        })

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

在實際專案中使用時，多個頁面有相同的part，元件重複使用簡直厲害的不要不要~O(∩_∩)O~~

相關推薦：《vue.js教學》

以上是vuejs有什麼功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！