小生博客：http://xsboke.blog.51cto.com

創(chuàng)新互聯(lián)自2013年起，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元老城做網(wǎng)站,已為上家服務(wù),為老城各地企業(yè)和個人服務(wù),聯(lián)系電話:13518219792

            -------謝謝您的參考，如有疑問，歡迎交流

---

目錄:

1. 簡單的將數(shù)據(jù)渲染到DOM
2. Vue的"v-"指令
3. "v-if"指令的使用
4. "v-for"指令的使用
5. Vue的事件處理
6. "v-model:value"實(shí)現(xiàn)雙向數(shù)據(jù)綁定
7. Vue實(shí)現(xiàn)逆轉(zhuǎn)字符串
8. Vue 動態(tài)添加class屬性,以及三目運(yùn)算.
9. "v-bind:style"指令定義內(nèi)聯(lián)樣式
10. 指令支持?jǐn)?shù)組
11. Vue實(shí)例各個生命周期的鉤子函數(shù)

1. 簡單的將數(shù)據(jù)渲染到DOM

        <div id="app">
            {{message}}                             -- 使用"{{}}"將數(shù)據(jù)渲染到DOM
        </div>
        <script type="text/javascript">
            var app = new Vue({                     -- 創(chuàng)建Vue實(shí)例
                el: '#app',                         -- 通過屬性綁定元素
                data:{
                    message: 'Hello Vue!',          -- 設(shè)置上下文
                }
            })
        </script>

2. Vue的"v-"指令

    通過"v-"用來綁定屬性,然后對屬性值進(jìn)行操作
        <div id="app" v-bind:title='vueTitle'>      -- 使用"v-"時不需要再使用"{{}}"渲染
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data:{
                    vueTitle: 'vue data vueTitle'
                }
            })

3. "v-if"指令的使用

    只用來判斷真假(true|false)
        <div id="app">
            <p v-if="seen">如果是true則可以顯示</p>         -- 如果seen的值為true則顯示p標(biāo)簽,如果為false則不顯示
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data:{
                    seen:true,
                }
            })
        </script>

4. "v-for"指令的使用

        <div id="app">
            <ul>
                <li v-for="item in list">       -- item就是for從list中取出來的變量,仔細(xì)看看其實(shí)和普通的for循環(huán)一樣
                    {{item}}                    -- 如果循環(huán)的是一個字典類型數(shù)據(jù),通過 "item." 獲取value
                </li>
                </ul>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data:{
                    list:["Item A","Item B","Item C"]
                }
            })
        </script>

5. Vue的事件處理

    通過"v-on"指令,處理click的事件
    所有的事件觸發(fā)時執(zhí)行的函數(shù),都需要寫到Vue實(shí)例的的methods選項(xiàng)中,
        <div id="app">
            <p>{{message}}</p>
            <button v-on:click="showmessage">顯示消息</button>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data:{
                    message: 'Hello Vue!'
                },
                // 所有的函數(shù)都定義在methods
                methods:{
                    showmessage:function(){
                        this.message = "Hello World!"
                    }
                }
            })
        </script>

6. "v-model:value"實(shí)現(xiàn)雙向數(shù)據(jù)綁定(就是不同標(biāo)簽中的內(nèi)容是相同的)

        <div id="app">
            <p>{{message}}</p>
            <input v-model:value="message" />       -- input標(biāo)簽和p標(biāo)簽互相隨對方改變
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data:{
                    message: 'Hello Vue!'
                },
            })
        </script>

7. Vue實(shí)現(xiàn)逆轉(zhuǎn)字符串

        <div id="app">
            <p>{{message}}</p>
            <button v-on:click="reverse">逆轉(zhuǎn)消息</button>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data:{
                    message: 'Hello Vue!'
                },
                methods:{
                    reverse:function(){
                        this.message = this.message.split('').reverse().join('')        -- Vue逆轉(zhuǎn)字符串,類似python中,先將字符串轉(zhuǎn)換為序列,然后翻轉(zhuǎn)列表,最后在join為字符串
                    }
                }
            })
        </script>

8. Vue 動態(tài)添加class屬性,以及三目運(yùn)算.

    動態(tài)添加class屬性

        <style type="text/css">
            .active{
                background-color: #0f0;
            }   
        </style>

        <body>
            <div id="app">
                <!-- 支持三目運(yùn)算符 -->
                <p v-bind:class="{Vactive:isActive}">我是P標(biāo)簽</p>      -- 當(dāng)isActive為true時,class屬性才會等于"Vactive",然后將引用上面style定義的CSS樣式
            </div>

            <script type="text/javascript">
                var app = new Vue({
                    el: '#app',
                    data:{
                        isActive:true,
                        Vactive:'active'
                    }
                })
            </script>
        </body>

    三目運(yùn)算
        <style type="text/css">
            .active{
                background-color: #0f0;
            }
            .error{
                background-color: #f00;
            }

        </style>

        <body>
            <div id="app">
                <!-- 支持三目運(yùn)算符 -->
                <p v-bind:class="isActive ? Vactive:Verror">我是P標(biāo)簽</p>       -- 當(dāng)isActive為true時,引用Vactive的值,為false時,引用Verror的值
            </div>

            <script type="text/javascript">
                var app = new Vue({
                    el: '#app',
                    data:{
                        isActive:true,
                        Vactive:'active',
                        Verror:'error',
                    }
                })
            </script>
        </body>

9. "v-bind:style"指令定義內(nèi)聯(lián)樣式

    "v-bind"可以簡寫為":",所以"v-bind:style"可以寫為":style"

        <body>
            <div id="app">
                <p :>我是P標(biāo)簽</p>
            </div>

            <script type="text/javascript">
                var app = new Vue({
                    el: '#app',
                    data:{
                        /* Vue的內(nèi)聯(lián)樣式采用的json格式,而且要使用駝峰命名法,
                         * 和CSS以"-"命名";"結(jié)尾是不一樣的
                        */
                        styleObject:{
                            backgroundColor: '#00f',
                            fontSize: '20px',
                        }
                    }
                })
            </script>
        </body>

10. 指令支持?jǐn)?shù)組

    <style type="text/css">
        .active{                                            -- 11.1
            background-color: red;
        }
        .error{                                             -- 因?yàn)?.error"在".active"后面,所以:".error"的優(yōu)先級最高.
            background-color: blue;
        }
    </style>

    <body>
        <div id="app">
            <p :class="items">我是P標(biāo)簽</p>
        </div>
        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data:{
                    items:['active','error'],           -- 如果數(shù)組中多個變量的CSS屬性沖突,則按照DOM從上往下讀的原則,后面的CSS樣式優(yōu)先級高,此例".error"的優(yōu)先級高,
                }                                       -- 注意,優(yōu)先級與數(shù)組的順序無關(guān),而是標(biāo)簽<style>中的CSS順序,因?yàn)闉g覽器是不會識別Vue的,Vue最終還是轉(zhuǎn)換為了html語言
            })
        </script>
    </body>

11. Vue實(shí)例各個生命周期的鉤子函數(shù)

    通俗講,就是在Vue實(shí)例運(yùn)行的各個階段可以使用的函數(shù)
    比如:
        在Vue實(shí)例創(chuàng)建時可以執(zhí)行created函數(shù)
        在Vue實(shí)例被掛載到DOM時可以執(zhí)行mounted函數(shù)
        在Vue實(shí)例更新時,可以執(zhí)行updated函數(shù)

        <div id="app">
            {{message}}
            <button @click="change">單擊更新message</button>            -- "v-on"指令可以簡寫為"@",所以這里的"v-on:click"簡寫為了"@click"
        </div>

        <script type="text/javascript">
            var app = new Vue({
                el: '#app',
                data:{
                    message:'hello vue!'
                },
                methods:
                    change:function(){                              -- 點(diǎn)擊button按鈕時執(zhí)行change函數(shù) 
                        this.message = 'hello world!'               -- 更改message的值
                    }
                },
                // 鉤子函數(shù),不用寫在methods中
                created:function(){
                    console.info('Vue對象創(chuàng)建時被調(diào)用!');           -- 信息被輸入到console控制臺
                },
                mounted:function(){
                    console.info('Vue對象掛載到dom元素時執(zhí)行！');
                },
                updated:function(){
                    console.info('data數(shù)據(jù)被更新的時候執(zhí)行');
                }
            })
        </script>

本文標(biāo)題：Vue快速入門-1-Vue的簡單使用
分享URL：http://www.chinadenli.net/article6/gpcoig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、小程序開發(fā)、網(wǎng)站改版、響應(yīng)式網(wǎng)站、、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)