Vue基礎語法

一、掛載點，模版和例項

二、Vue例項中的資料，事件和方法

1、v-html指令和v-text指令

v-html ：不轉義

v-text :轉義過後的內容

    <div id="root">
        <div v-html="content"></div>
        <div v-text="content"></div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            content:"<h1>hello</h1>"
        }
    })
    </script>

2、v-on指令

<div v-on:click="()=>{alert(123)}">
{{content}}
</div>

正確做法：

        <div v-on:click="handleClick">
            {{content}}
        </div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            content:"hello",
        },
        methods:{
            handleClick:function(){
                alert(123);
            }
        }
    })
    </script>

<div id="root">
        <div v-on:click="handleClick">
            {{content}}
        </div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            content:"hello",
        },
        methods:{
            handleClick:function(){
                this.content="world" //面向資料程式設計
            }
        }
    })
    </script>

<div v-on:click="handleClick">簡寫<div @click="handleClick">

三、Vue中的屬性繫結和雙向資料繫結 

1、屬性繫結v-bind:title簡寫:bind

    <div id="root">
        <div v-bind:title="title">helloworld</div>
        <div :title="title">縮寫</div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            title:"this is hello world"
        }
    })
    </script>

2、雙向資料繫結v-model

<div id="root">
        <div>{{content}}</div>
        <input type="text" v-model="content">
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            content:"this is content"
        }
    })
    </script>

四、Vue中的計算屬性和偵聽器

1、計算屬性 computed

和react中的reselect特別像

好處：firstName，lastName都沒改變，fullName會取上一次的快取值，效能高。

<div id="root">
        姓：<input type="text" v-model="lastName">
        名：<input type="text" v-model="firstName">
        <div>{{firstName}}{{lastName}}</div>
        <div>{{fullName}}</div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            firstName:'starof',
            lastName:'liu'
        },
        computed:{
            fullName:function(){
                return this.firstName+this.lastName;
            }
        }
    })
    </script>

2、偵聽器 watch

監聽資料的變化

監聽fistName和lastName，每次變化加一。

<div id="root">
        姓：<input type="text" v-model="lastName">
        名：<input type="text" v-model="firstName">
        <div>{{firstName}}{{lastName}}</div>
        FullName: <span>{{fullName}}</span>
        <div>{{count}}</div>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            firstName:'starof',
            lastName:'liu',
            count:0
        },
        computed:{
            fullName:function(){
                return this.firstName+this.lastName;
            }
        },
        watch:{
            firstName:function(){
                this.count++
            },
            lastName:function(){
                this.count++
            }
        }
    })
    </script>

監聽計算屬性的改變

new Vue({
        el:"#root",
        data:{
            firstName:'starof',
            lastName:'liu',
            count:0
        },
        computed:{
            fullName:function(){
                return this.firstName+this.lastName;
            }
        },
        watch:{
            fullName:function(){
                this.count++
            }
        }
    })

五、v-if、v-show和v-for指令 

1、v-if

值為false直接從DOM中移除。

<div id="root">
        <div v-if="showHello">hello world</div>
        <button @click="handleToogle">toogle</button>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            showHello:true
        },
        methods:{
            handleToogle:function(){
                this.showHello=!this.showHello;
            }
        }
    })
    </script>

2、v-show 

處理上例這種頻繁顯示隱藏使用v-show更好。

<div id="root">
        <div v-show="showHello">hello world</div>
        <button @click="handleToogle">toogle</button>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            showHello:true
        },
        methods:{
            handleToogle:function(){
                this.showHello=!this.showHello;
            }
        }
    })
    </script>

3、v-for

<div id="root">
        <ul>
            <li v-for="item of list">{{item}}</li>
        </ul>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            list:[1,2,3]
        }
    })
    </script>

迴圈時候使用:key可以提高效率。key值不能重複。

 <li v-for="item of list" :key="item">{{item}}</li>

可以這麼寫：

<div id="root">
        <ul>
            <li v-for="(item,index) of list" :key="index">{{item}}</li>
        </ul>
    </div>
    <script>
    new Vue({
        el:"#root",
        data:{
            list:[1,2,2,3]
        }
    })
    </script>

但是頻繁對列表進行變更，排序等操作時，index作為key值是有問題的。

 

 

本文作者starof,因知識本身在變化，作者也在不斷學習成長，文章內容也不定時更新，為避免誤導讀者，方便追根溯源，請諸位轉載註明出處：http://www.cnblogs.com/starof/p/9061617.html 有問題歡迎與我討論，共同進步。