vuejs基礎玩法（基礎知識，不喜勿噴！）

時間  2019-11-16
標籤 vuejs 基礎 玩法 知識 欄目 悠閒生活 简体版
原文   原文鏈接

前言
Vuejs相關教程，可參閱網站，先熟悉vue.js的基本語法。本文檔講述，以CDN的方式（在頁面上，引入相關的js和css文件），來實現。
本文檔適用於vuejs初學者，以前給公司實習生學習準備的，不少相關知識暫不全，敬請諒解。
[color=#ff0000]1 頁面結構[/color]
Vue.js 使用了基於 HTML 的模版語法，容許開發者聲明式地將 DOM 綁定至底層 Vue 實例的數據。簡單來講,最基本結構以下就是:javascript

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <script src="https://cdn.bootcss.com/vue/2.4.2/vue.min.js"></script>
    </head>
    <body>
        <div id="app">
              {{mes}}
          </div>
    </body>
    <script>
        new Vue({
            el:'#app',
            data:{
                  mes:'hello'
            }
        })
    </script>
</html>

這裏邊body的最外層的div，須要在下邊進行實例化。固然最外層用的是id='app'，實例化的時候，el:'#app'。跟css相似，若是最外層用class來標識的時候，裏邊#換成「點」。可是爲了不重複，統一用「id」來標識。
[color=#ff0000]2 基本模塊[/color]css

上半邊省略，直接上js代碼html

<script>
    new Vue({
        el:'#app',
        data:{
            初始化頁面上綁定的模型，數據
        },
        filters:{
            過濾器，簡單數據處理。
        },
        mounted:function(){
            頁面載入時調用的方法，
        },        
        methods:{
            事件方法
        },
        watch：{
            數據監聽。
        }
    })
</script>

data: 頁面初始化時，定義的元素模塊，也是數據的容器，每個欄位都會用到，相似於以前的普通寫法裏邊的name，id等，可是比那個強大。
filters:這一塊是過濾器，通常是處理數據用的。
mounted：頁面加載是調用的方法，這便涉及到Vuejs的生命週期，你們能夠去了解。根據不一樣狀況調用，我本身遇到過關於圖表方面，家在前後順序的問題。
watch: 用於頁面模塊的數據監聽。數據發生改變的時候，頁面展現進行切換。
methods:事件方法都寫在這個裏邊。例如點擊事件。
正常狀況下，頁面結構就是上邊的屬性，固然順序調換也何嘗不可，看我的習慣。除了data外，其餘模塊用不到的，能夠去掉。
[color=#ff0000]3.vue.js經常使用的指令[/color]vue

[color=#ff0000]文本指令[/color]
經常使用的數據綁定，雙大括號的形式。{{ ··· }}
v-text 純文本的方式展現出來
v-html 會解析你數據裏邊帶的標籤，以及樣式，事件等等
v-model 功能最全，你把v-model放到input裏邊的時候，你會發現，你的input這個欄位，跟其餘幾個，message變成了雙向綁定，你改變input裏邊的值，其餘的值會跟着一塊兒變更java

<body>
<div id="app">
    {{message}}
    <div v-text="message"></div>
    <div v-html="message"></div>
    <input v-model="message" />
</div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:"<h1>Hello World</h1>"
        }
    })
</script>

運行上邊的結果你會發現，{{···}}和「v-text」這種方式，會把message全部的東西輸出,v-html會解析message裏邊的html標籤，而v-model會綁定，message裏邊的數據，當你改變input裏邊的數據，頁面上其餘的數據也會相應改動。數組

[color=#ff0000]v-bind指令[/color]
html中的屬性值，一般會用到這個指令，例如如下的class。v-bind:class=[class1,{‘class2’:A},{‘class3’:B}] 其中，class1爲一直生效，class2和class3必須根據A，B對應的布爾值來展現，true的時候生效，反之不生效。 指令簡寫能夠直接是」：class」，省去前邊的v-bind.app

<style>
    .class1{color:red;}
    .class2{font-size:16px;}
</style>
<body>
    <div id="app">
        <div :class="[class1,{‘class2’:A}]">
            {{message}}
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:"<h1>Hello World</h1>",
            class1:'class1',
            A: true
        }
    })
</script>

(這種狀況，可用於，按鈕點擊，更換狀態，樣式等)
[color=#ff0000]v-if(v-else-if,v-else)指令[/color]
主要是在頁面上給出相應的條件，例如框架

<style>
    p{font-size:30px;}
</style>
<body>
    <div id="app">
        <input v-model="message">
        <p v-if="message<12" style="color:red;"></p>
        <p v-else-if="message>20" style="color:green;"></p>
        <p v-else style="color:yellow;"></p>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:"<h1>Hello World</h1>",
            A: true
        }
    })
</script>

跟普通的if..else..語句的寫法基本相似，也能夠進行嵌套。
v-for指令,數據循環，基本寫法學習

<body>
    <div id="app">
        <div v-for="item in message">
            {{item.name}}
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:[
                {name:"張三"},
                {name:"李四"}
            ]
        }
    })
</script>

也能夠加嵌套，二維數組使用，限定結構一致網站

<body>
    <div id="app">
        <div v-for="item in message">
            {{item.name}}
            {{item.age}}
            <div v-for="it in item.study">
                {{it.yuwen}}
                {{it.shuxue}}
            </div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:[
                {
                name:"張三",
                age:"24",
                study:[
                    {
                        yuwen:"95",
                        shuxue:"80"
                    }
                ]
                },
            ]
        }
    })
</script>

vuejs,2.0中，v-for循環也能夠加鍵名和索引，例如：

<body>
    <div id="app">
        <div v-for="(item,key,index) in message">
            {{index}}{{key}}{{item.name}}
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            message:[
                {name:"張三"},
                {name:"李四"}
            ]
        }
    })
</script>

value爲對應字段行。key爲鍵名，index爲索引。這三個只是順序，不帶表真實參數，你寫ABC下邊雙括號也寫ABC也能夠
。
循環的時候，咱們能夠寫在v-model,或者有圖片的時候，咱們能夠寫在:src上
例如：<input v-model="item.name">
<img :src="item.name">
標籤中不容許帶雙括號。例如，如下這種寫法
<img :src="{{item.name}}">
[color=#ff0000]4.vue.js經常使用事件[/color]

[color=#ff0000]點擊事件[/color]
經常使用事件聲明爲v-on:click=」hello()」，無參數，能夠不帶括號，有參數寫括號中。簡寫方式@click=」hello()」，事件寫在methods：{ ~~~ }裏邊。格式以下

<body>
    <div id="app">
        <input type="button" @click="demo()">
        <input type="button" @change="hello('aaa')">
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
        },
        methods:{
            demo:function(){
            },
            hello:function(a){
            }
        }
    })
</script>

事件是能夠繼承的，簡單來講，好比一個事件，咱們須要在頁面上調用屢次，咱們能夠直接進行事件繼承。

<body>
    <div id="app">
        <input type="button" @click="demo()">
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
        },
        mounted:function(){
            this.hello();
            頁面載入時調用hello方法，
        },
        methods:{
            demo:function(){
                this.hello();
                點擊時調用到了hello方法
            },
            hello:function(a){
}
    }
})

</script>

[color=#ff0000]監聽事件[/color]
監聽事件，當欄位值發生改變的時候，使用。，原來的js採用的是change事件，vuejs也能夠用@change=」」的方式來寫，這樣的話寫在，跟點擊事件同樣，寫在methods：{ ~~~ }裏邊。

可是部分框架，@change這種方式不兼容，因此咱們通常直接用v-model進行綁定，寫在watch:{ }裏邊，例如：

<body>

<div id="app">
    <input type="text" v-model="message">
</div>

</body>
<script>

new Vue({
    el:'#app',
    data:{
        message:'20'
    },
    watch:{
        message:function(val,oldval){
            自帶兩個參數,其中val爲當前值，oldval爲改變後的值
        }
    },
    methods:{
    }
})

</script>

[color=#ff0000]過濾器[/color]
過濾器寫在filters:{}裏邊，通常對數據進行處理的時候會用獲得。直接在文本後邊加上「|」，而後跟這寫，事件名。例如

<body>

<div id="app">
    {{message | demo}}
</div>

</body>
<script>

new Vue({
    el:'#app',
    data:{
        message:'20'
    },
    filters:{
        demo:function(val){
            return "$"+val+".00";
        }
    }
})

</script>

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程