vuejs的功能有哪些

這篇文章主要介紹“vuejs的功能有哪些”，在日常操作中，相信很多人在vuejs的功能有哪些問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”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:'#app_2',
            data:{
                message:'You loaded this page on '+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:'#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: '新項目' })，你會發現列表中添加了一個新項。

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

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

到此，關于“vuejs的功能有哪些”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！