Vue.js之深刻淺出

時間 2019-11-10

原文原文鏈接

介紹引言javascript

Vue.js（讀音 /vjuː/，相似於 view）是一套構建用戶界面的漸進式框架。與其餘重量級框架不一樣的是，Vue 採用自底向上增量開發的設計。Vue 的核心庫只關注視圖層，它不只易於上手，還便於與第三方庫或既有項目整合。另外一方面，當與單文件組件和 Vue 生態系統支持的庫結合使用時，Vue 也徹底可以爲複雜的單頁應用程序提供驅動。css

1、Vue的引入html

Vue.js 是極輕量級的前端框架，官方提供了在線地址引入js文件：https://unpkg.com/vue；前端

咱們也能夠經過下載官方的文件到本地，在html頁面進行引入， Vue.js爲開發版本，包含了完整的調試和警告信息；Vue.min.js爲發佈版本不包含警告和調試信息；vue

<head>
    <meta name="viewport" content="width=device-width" />
    <title>MyVue</title>
    <!--引入官方在線js文件-->
    <script src="https://unpkg.com/vue"></script>
    <!--引入本地vue.js文件-->
    <script src="/Scripts/vue.js"></script>
</head>

2、Vue之Hello World！話很少說，直接上Codejava

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MyVue</title>
    <!--引入本地vue.js文件-->
    <script src="/Scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        {{user.message}}
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
           user:{message:'Hello Vue !'}
        }
    });
    </script>
</body>
</html>

寫完這段，不得不爲Vue的數據驅動模式折服，html和js數據完美融合（就像劍法的最高境界：人劍合一），能夠理解爲前端的MVVM模式，而且足夠簡潔，若是使用過Angular.js，那麼Vue的學習將更加容易。git

趕忙來看下剛纔的實例用到的語法吧！github

（1） Vue實例，咱們針對於元素的操做都將依賴於Vue的實例，它經過構造函數的形式，來初始化實例；json

（2） el屬性：el至關於Vue的DOM選擇器屬性，相似jQuery的選擇器。官方稱它爲掛載點，而且不建議直接掛載到html或者body節點，而是實際應該操做的元素；前端框架

（3） data屬性：它表示當前掛載點須要的全部數據，以Json的結構處理，它容許你定義或者傳入任何Json數據（實例中定義了user實體，並給它定義了一個屬性message；

習慣了jQuery的我，老是想着DOM操做。Vue上手的話，必須扭轉這種思惟了，它提供了簡潔的API，並以數據驅動，無需直接操做DOM。它是經過特殊的Vue HTML語法和數據造成雙向綁定；當數據發生變化，DOM將由Vue自動更新。

3、Vue之條件語句，仍是直接上代碼！

不過在代碼以前，此次我不得不先把本段用到的語法贅述清楚：

v-if，條件語法，完整模塊爲：v-if … v-else-if…v-else…；知足條件時，加載條件所在的DOM元素；條件能夠是任意bool表達式，或者data內的任意bool屬性；

v-show，單純的改變css的display屬性來控制是否顯示DOM元素，條件一樣是bool表達式；

v-on:，事件綁定，如v-on:click綁定的是鼠標左鍵單擊事件，值爲methods下的任意方法；

methods，用來定義掛載點下須要的全部方法；

this，能夠理解爲當前掛載點，可獲取到data下的全部內容。

v-bind:，DOM元素的屬性綁定，如v-bind:value綁定的是DOM元素的value屬性，值能夠是data下的任意字段，注意，bind爲單向綁定；

v-model，表單控件的綁定，如文本框上的v-model則會綁定到value屬性，值一樣是支持data的任意字段；

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MyVue</title>
    <!--引入本地vue.js文件-->
    <script src="/Scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" v-bind:value="value" v-on:click="show" />
        <div v-if="showUser">{{user.message}}</div>
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
           user:{message:'Hello Vue !'},
           showUser:false,
           value:'show'
        },
        methods:{
            show:function(){
                this.showUser=!this.showUser;
                this.value=this.showUser?'hide':'show';
            }
        }
    });
    </script>
</body>
</html>

Word 天！跪服Vue，我只要改變了data.showUser的值，DOM自動變化（並非簡單的操做了css的display屬性，而是改變了DOM元素！），神奇啊！從代碼和操做對比圖能夠看出，我點擊按鈕的時候修改了showUser的值，來斷定是否顯示message消息，並控制按鈕的value屬性；從始至終，我並無關注DOM的任何元素，只須要修改數據值，不得不說，Vue讓前端變成了數據操控DOM。做爲沒有用過Angular.js的我來講，不敢想象原來jQuery的寫法的繁雜程度，簡直是震驚了！若是屏幕前的你尚未從靈魂上感覺到什麼是雙向綁定，再來看下面的例子！

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MyVue</title>
    <!--引入本地vue.js文件-->
    <script src="/Scripts/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" v-model="value" v-on:click="show" />
        <br />
        <br />
        <input type="text" v-model="user.message" />&nbsp;
        <input type="button" v-on:click="change" value="change message" />
        <div v-if="showUser">{{user.message}}</div>
    </div>
    <script type="text/javascript">
    var app = new Vue({
        el: '#app',
        data: {
           user:{message:'Hello Vue !'},
           showUser:true,
           value:'hide'
        },
        methods:{
            show:function(){
                this.showUser=!this.showUser;
                this.value=this.showUser?'hide':'show';
            },
            change:function(){
                this.user.message='I am vue.js .';
            }
        }
    });
    </script>
</body>
</html>

上圖是文本框的初始值，它的value和user.message作了綁定，我如今手動鍵入文本框的值。

奇蹟出現了，原來的div下的message消息自動跟着變化了，靜態圖看不到效果，實際上他是在文本框一邊鍵入，一邊在變化，效果像是onkeydown事件。我如今經過點擊按鈕「change message」來設定message字段的值，繼續看奇蹟。

哇偶，文本框和消息仍是在同步變化。到此處，若是還感覺不到vue雙向綁定的魅力，我只能賣給你一起「智商充電寶」了！

4、最後一節，Vue之http請求

寫到這裏，很遺憾的告訴你們， Vue.js僅僅是View層面的東西，並不包含http請求的模塊，咱們須要藉助jQuery或者vue-rsource.js

Github下載：

GitHub - pagekit/vue-resource: The HTTP client for Vue.js

https://github.com/pagekit/vue-resource

語法：vue-resource的請求API是按照REST風格設計的，它提供了7種請求API：

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])

除了jsonp之外，另外6種的API名稱是標準的HTTP方法。

POST代碼實例：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>MyVue</title>
    <!--引入本地vue.js文件-->
    <script src="/Scripts/vue.js"></script>
    <!--引入vue-resource.js-->
    <script src="/Scripts/vue-resource.js"></script>
</head>
<body>
    <div id="app">
        UserName:<input type="text" name="UserName" v-model="params.name" /><span style="color:red;">*</span>
        <span style="color:red;" v-if="isEmpty">UserName 必填！</span>
        <span v-if="user.UserName">{{user.UserName}}:&nbsp;{{user.Message}}</span>
        <br />
        <input type="button" value="show" v-on:click="show" /> 
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el: '#app',
            data: {
                user: { UserName: null, Message: null },
                params: { name: null },
                isEmpty: false
            },
            methods: {
                show: function () {
                    if (!this.params.name) {
                        this.isEmpty = true;
                        return;
                    }
                    this.isEmpty = false;
                    this.$http.post('/Home/GetUser', this.params).then(
                        function (result) {//success
                            this.user = result.data;
                        },
                        function (result) {//error
                        }
                    );
                }
            }
        });
    </script>
</body>
</html>

後臺代碼（HomeController下的Action：GetUser）：

public JsonResult GetUser(string name)
{
    UserInfo user = new UserInfo()
    {
        Message = "Hello Vue.js !",
        UserName = name
    };
    return Json(user);
}

到此結束，POST代碼在不作任何解析，若是你能所有看完，恭喜你，本篇文章沒有浪費你寶貴的時間，你Vue已經入門了！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。