【VueJs入門】

一、上手步驟

vue.js和jquery一樣，只要引入vue.js就可以了。

1、創建一個Vue實例：先引入Vue.js文件，然后new一個Vue的實例即可。如下面的代碼，通過<script src="./vue.js"></script>引入，然后在<script>標簽中創建實例

2、掛載在Vue的實例里，通過傳遞的el屬性

3、單向/雙向綁定 data屬性里的變量 = html標簽里的{{}} = input標簽里的v-model

<!DOCTYPE html>
<html lang="en">
    <script src="./vue.js"></script>
<body>
<div id="app">
    <input v-model="test"/>
    {{test}}
</div>
<script>
    new Vue({   //創建一個Vue的實例  
        el: "#app", //掛載點是id="app"的地方
        data: {     //數據
            test: "abc"     //變量test
        }
    })
</script>
</body>
</html>

二、案例(DEMO控制)

案例說明：
1. 單個dom的添加/刪除/顯示/隱藏——變量控
2. 多個在顯示上互斥的dom（如登錄時的提示）—— 用１個變量去控制
3. 多個同類型dom（用v-for來動態生成）

示例頁面

代碼：

 1 <html lang="en">
 2     <script src="./vue.js"></script>
 3 <body>
 4 <div id="app">
 5     <p>
 6         點擊按鈕切換顯示的圖標
 7     </p>
 8     <input type="button" v-on:click="set1" v-if="data1" value="【一個圖標】"/>
 9     <input type="button" v-on:click="set1" v-if="!data1" value="另外一個圖標"/>
10     <p>————————————————————————————</p>
11     <p>點擊不同按鈕決定顯示什么</p>
12     <input type="button" @click="set2('baidu')" value="百度">
13     <input type="button" @click="set2('qq')" value="騰訊">
14     <input type="button" @click="set2('taobao')" value="淘寶">
15     <button @click="set2">什么都不顯示</button>
16     <p>
17         <a href="http://www.baidu.com" target="_blank" v-if="data2=='baidu'">百度</a>
18         <a href="http://www.qq.com" target="_blank" v-if="data2=='qq'">騰訊</a>
19         <a href="http://www.taobao.com" target="_blank" v-if="data2=='taobao'">淘寶</a>
20     </p>
21     <p>————————————————————————————</p>
22     <p>
23         同類型dom，典型的是表格，類似的有li。<br>
24         <button @click="set3">點擊添加內容</button>
25     </p>
26     <ul>
27         <li v-for="i in data3">{{i}}</li>
28     </ul>
29 </div>
30 <script>
31     new Vue({   //創建一個Vue的實例
32         el: "#app", //掛載點是id="app"的地方
33         data: {
34             data1: true,
35             data2: "",
36             data3: [1]
37         },
38         methods: {
39             set1: function () {
40                 this.data1 = !this.data1;
41             },
42             set2: function (arg) {
43                 this.data2 = arg;
44             },
45             set3: function (arg) {
46                 this.data3.push(this.data3.length + 1);
47             }
48         }
49     })
50 </script>
51 </body>

三、案例（input相關）

微博的注冊頁面如下圖

案例頁面

代碼：

<!DOCTYPE html>
<html lang="en">
    <script src="./vue.js"></script>
<body>
<div id="app">
    <p>
        郵箱：<input v-model="mail"/>
    </p>
    <p>
        設置密碼：<input type="password" v-model="pw"/>
    </p>
    <p>
        官方注冊微博名：<input v-model="name" placeholder="請參考組織/企業/品牌名稱"/>
    </p>
    <p>
        所在地：
        <select v-model="province">
            <option value="zhejiang">浙江</option>
            <option value="shanghai">上海</option>
        </select>
        <select v-model="city">
            <option v-for="(val,key) in citys" v-bind:value="key">{{val}}</option>
        </select>
    </p>
    <p>
        驗證碼：
        <input v-model="verificationCode">
        請輸入：1234
    </p>
    <p>
        <input type="button" v-on:click="check" value="提交"/>
        <input type="button" v-on:click="inputDefault" value="默認值"/>
    </p>
    <p style="color:green" v-if="error=='success'">提交成功</p>
    <p style="color:red" v-if="error=='less'">缺少內容</p>
    <p style="color:red" v-if="error=='VerificationCode'">驗證碼錯誤</p>
</div>
<script>
    new Vue({   //創建一個Vue的實例
        el: "#app", //掛載點是id="app"的地方
        created: function () {
            this.changeProvince();
        },
        data: {     //數據
            province: "zhejiang",
            mail: "",
            pw: "",
            name: "",
            city: "",
            citys: {},
            provinceWithCity: {
                zhejiang: {
                    hangzhou: "杭州",
                    shaoxing: "紹興"
                },
                shanghai: {
                    pudong: "浦東區",
                    jingan: "靜安區"
                }
            },
            verificationCode: "",
            error: ""
        },
        methods: {
            changeProvince: function () {
                this.citys = this.provinceWithCity['zhejiang'];
                this.$watch('province', function (newVal, oldVal) {
                    this.citys = this.provinceWithCity[newVal];
                })
            },
            check: function () {    //提交內容檢查
                if (this.mail && this.pw && this.name && this.province && this.city) {
                    if (this.verificationCode === '1234') {
                        this.error = 'success';
                        console.log([this.mail, this.pw, this.name, this.province, this.city]);
                    } else {
                        this.error = 'VerificationCode'
                    }
                } else {
                    this.error = 'less';
                }
            },
            inputDefault: function () {
                this.mail = '123@qq.com';
                this.pw = '123';
                this.name = 'abc';
                this.province = 'zhejiang';
                this.city = 'hangzhou';
                this.verificationCode = '1234';
            }
        }
    })
</script>
</body>
</html>

注冊頁面代碼

四、案例(表格相關)

1.表格的核心特點是：類型重復的大量內容。
2.Vue非常擅長對表格的處理，只需要已知數據，預先設置好格式，即可自動生成數據。
3.常見表格需求是選擇性顯示（比如只顯示符合條件的項），這點Vue也十分擅長，你只需要設置好條件，Vue在渲染的時候會自動幫你完成

案例頁面

<!DOCTYPE html>
<html lang="en">
    <script src="./vue.js"></script>
    <style>
        table {
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid #000;
        }
    </style>
<body>
<div id="app">
    <input type="button" v-on:click="randomData" value="隨機生成數據"/>
    <input type="button" v-on:click="yearAbove20" v-if="yearLimit!==20" value="只顯示年齡大於20的人"/>
    <input type="button" v-on:click="all" v-if="yearLimit>0" value="顯示全部"/>
    <p></p>
    <table>
        <tr>
            <td>序號</td>
            <td>姓名</td>
            <td>年齡</td>
        </tr>
        <tr v-for="(val,key) in datas" v-if="val.year > yearLimit">
            <td>{{val.index}}</td>
            <td>{{val.name}}</td>
            <td v-if="val.year<30">{{val.year}}</td>
            <td v-else>年齡太大了，不告訴你喔</td>
        </tr>
    </table>
</div>
<script>
    new Vue({   //創建一個Vue的實例
        el: "#app", //掛載點是id="app"的地方
        data: {
            datas: [],
            yearLimit: 0
        },
        methods: {
            getName: function () {
                var familyNames = new Array(
                    "趙", "錢", "孫", "李", "周", "吳", "鄭", "王", "馮", "陳",
                    "褚", "衛", "蔣", "沈", "韓", "楊", "朱", "秦", "尤", "許",
                    "何", "呂", "施", "張", "孔", "曹", "嚴", "華", "金", "魏",
                    "陶", "姜", "戚", "謝", "鄒", "喻", "柏", "水", "竇", "章",
                    "雲", "蘇", "潘", "葛", "奚", "范", "彭", "郎", "魯", "韋",
                    "昌", "馬", "苗", "鳳", "花", "方", "俞", "任", "袁", "柳",
                    "酆", "鮑", "史", "唐", "費", "廉", "岑", "薛", "雷", "賀",
                    "倪", "湯", "滕", "殷", "羅", "畢", "郝", "鄔", "安", "常",
                    "樂", "於", "時", "傅", "皮", "卞", "齊", "康", "伍", "余",
                    "元", "卜", "顧", "孟", "平", "黃", "和", "穆", "蕭", "尹"
                );
                var givenNames = new Array(
                    "子璇", "淼", "國棟", "夫子", "瑞堂", "甜", "敏", "尚", "國賢", "賀祥", "晨濤",
                    "昊軒", "易軒", "益辰", "益帆", "益冉", "瑾春", "瑾昆", "春齊", "楊", "文昊",
                    "東東", "雄霖", "浩晨", "熙涵", "溶溶", "冰楓", "欣欣", "宜豪", "欣慧", "建政",
                    "美欣", "淑慧", "文軒", "文傑", "欣源", "忠林", "榕潤", "欣汝", "慧嘉", "新建",
                    "建林", "亦菲", "林", "冰潔", "佳欣", "涵涵", "禹辰", "淳美", "澤惠", "偉洋",
                    "涵越", "潤麗", "翔", "淑華", "晶瑩", "凌晶", "苒溪", "雨涵", "嘉怡", "佳毅",
                    "子辰", "佳琪", "紫軒", "瑞辰", "昕蕊", "萌", "明遠", "欣宜", "澤遠", "欣怡",
                    "佳怡", "佳惠", "晨茜", "晨璐", "運昊", "汝鑫", "淑君", "晶瀅", "潤莎", "榕汕",
                    "佳鈺", "佳玉", "曉慶", "一鳴", "語晨", "添池", "添昊", "雨澤", "雅晗", "雅涵",
                    "清妍", "詩悅", "嘉樂", "晨涵", "天赫", "玥傲", "佳昊", "天昊", "萌萌", "若萌"
                );
                var ran1 = parseInt(100 * Math.random());
                var ran2 = parseInt(100 * Math.random());
                return familyNames[ran1] + givenNames[ran2];
            },
            randomData: function () {
                var data = [];
                for (var i = 1; i < (5 + 10 * Math.random()); i++) {
                    var obj = {
                        index: i,
                        name: this.getName(),
                        year: parseInt(1 + Math.random() * 50)
                    }
                    data.push(obj)
                }
                this.datas = data;
                console.log(this.datas);
            },
            yearAbove20: function () {
                this.yearLimit = 20;
            },
            all: function () {
                this.yearLimit = -1;
            }
        }
    })
</script>
</body>
</html>

table相關

五、其它Vue常見功能

1、過濾器功能：

1. 主要用於文本轉換；
2. 例如獲得一個日期對象后，通過過濾器命令自動轉為我們要求的日期格式。
3. {{ message | capitalize }}  message變量被過濾器函數capitalize所處理

2、計算屬性：

1. 更加高級的功能，可以視為過濾器功能的進階版，適用的方向更多（不僅僅是文本）
2. 獲取一個變量（輸入內容）→通過計算函數轉換→顯示轉換結果（輸出內容）
3. 當輸入內容變更時，輸出內容也會自動隨之變更
4. 利用ES5的getter和setter特性來實現，有緩存特點

3、$watch方法：

1. 監控變量，當變量改變時觸發回調函數；
2. 例如之前的微博注冊demo中，通過檢測表示省份的變量的變化，來動態設置表示市的dom

4、class/style綁定：

1. 通過改變變量，來設置dom的樣式的類，或者直接設置樣式的屬性
2. <div v-bind:class="{ active: isActive }"></div>
3. isActive值為true時，dom獲得active這個類

5、事件監聽：

1. 通過$emit觸發事件和$on響應事件，只在當前Vue實例內有效，因此不會帶來干擾；
2. 用起來非常舒服，適用於一對多和多對一的場景；
3. 跨組件響應（父子組件通信）時，可以使用global event bus來實現，或者使用插件實現

6、路由功能：

1. 簡單來說，按需加載，而不是一次性全部加載；
2. 有官方推薦支持使用的的vue-router庫；

通過本篇文章先全局了解下vue.js后期會繼續學習。

參考

原文博客地址：https://blog.csdn.net/column/details/12809.html

非常感謝原文作者提供這么寶貴的文章。

想的太多，做的太少，中間的落差就是煩惱，要么去做，要么別想 中尉【6】

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 uView——快速上手 ElasticJob 快速上手 SqlServer快速上手教程 mybatis 注解快速上手 Vue：實戰快速上手 Debussy---快速上手（2） Markdown 語法的超快速上手【Jenkins系列】-快速上手安裝 C/ C++ 快速上手 python爬蟲框架之scrapy的快速上手