Vue基礎語法

七格格永不服輸 發表於2019-08-14
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>
View Code

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>
View Code
<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>
View Code
<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>
View Code

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>
View Code

四、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>
View Code

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>
View Code

監聽計算屬性的改變

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

五、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>
View Code

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>
View Code

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>
View Code

迴圈時候使用: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>
View Code

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

 

 

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