Vue.js初體驗

sinkinka發表於2019-02-25
Vue.js

這篇文章的目的：通過一個簡單的小例子，體驗最近常看到的Vue.js基本用法。暫時不去理解那些前端的概念、設計思想等。就圍繞我想實現的小功能，直奔主題去實踐，體驗一下。

1) 準備工作

  • 開發環境：Win7、Chrome、WebStorm等
  • 實現功能：在網頁的input輸入框裡輸入一段文字，點一個button按鈕，然後疊加顯示在textarea控制元件上。類似一個聊天視窗的樣子。

2) 最原始的實現方法

介面

第一種

程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>原始寫法</title>
    <script type="text/javascript">
    function send() {
        var msg = document.getElementById("msg").value;
        var result = document.getElementById("msglist").value + "
" + "   " + msg;
        document.getElementById("msglist").value = result;
    }
    </script>
</head>
<body>
    <div id="app">
        <input type="text" id="msg" placeholder="請輸入聊天內容"/></br>
        <button onclick="send()">傳送</button></br>
        <textarea id="msglist" rows="20" cols="60">聊天記錄：</textarea>
    </div>
</body>
</html>
複製程式碼
  • 使用原始的html和js程式碼，把使用者輸入的文字疊加顯示在另一個控制元件textarea上
  • 程式碼上需要每次手動把更新後的內容賦給控制元件的屬性，觸發控制元件顯示新的內容

3) 依賴jquery和bootstrap樣式的寫法

介面

第二種

程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>依賴jquery和bootstrap樣式的寫法</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){

            $("#btnSend").click(function(){
                var result = $("#msglist").val() + "
" + "   " + $("#msg").val();
                $("#msglist").val(result);
            });

        });
    </script>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <input type="text" id="msg" class="form-control" placeholder="請輸入聊天內容"/>
            </div>
            <div class="form-group">
                <button id="btnSend" class="btn btn-primary">傳送</button>
            </div>
            <div class="form-group">
                <textarea id="msglist" rows="6" cols="100" class="form-control">聊天記錄：</textarea>
            </div>
        </div>
    </div>
</div>
</body>
</html>
複製程式碼
  • 第二種寫法和第一種沒有本質區別，就當前頁面而言，僅僅是控制元件外觀變得稍微漂亮點，js程式碼寫起來更加整齊、便捷吧
  • 利用現成的庫，能夠提高寫程式碼的效率，增強程式碼的可讀性、維護性等等

4) 依賴vue.js和bootstrap樣式的寫法

介面

第三種

程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>依賴vue.js和bootstrap樣式的寫法</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/vue/2.2.6/vue.js"></script>
    <script type="text/javascript">

        window.onload = function() {
            var app = new Vue({
                el:"#divApp",
                data:{
                    btnText:"傳送",
                    msg:"請輸入聊天內容",
                    msglist:"聊天記錄："
                },
                methods:{
                    send:function () {
                        //點選傳送按鈕後，只需要關注資料之間的處理，不用操心顯示
                        this.msglist = this.msglist + "
" + "   " + this.msg;
                    }
                }
            });
        }
        
    </script>
</head>
<body>
<div id="divApp" class="container">
    <div class="row">
        <div class="col-md-6">
            <div class="form-group">
                <input type="text" v-model="msg" class="form-control" placeholder="請輸入聊天內容"/>
            </div>
            <div class="form-group">
                <button v-on:click="send" class="btn btn-warning">{{btnText}}</button>
            </div>
            <div class="form-group">
                <textarea v-model="msglist" rows="6" cols="100" class="form-control"></textarea>
            </div>
        </div>
    </div>
</div>
</body>
</html>
複製程式碼
  • 與html的內容（DOM）結合起來，new出一個Vue的例項
  • v-model、v-on等程式碼，是vue.js的東西,
  • 分別建立了繫結兩個控制元件的變數msg、msglist
  • 變數的值改變後會自動重新整理控制元件的展示、使用者從介面上改變了控制元件的值，繫結的變數也會自動被更新
  • 所以，send方法只要聚焦兩個變數之間的處理即可

5) 改進後的寫法

介面

第三種改進

程式碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>改進後的寫法</title>
    <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/vue/2.2.6/vue.js"></script>
    <script type="text/javascript">

        window.onload = function() {
            var app = new Vue({
                el:"#divApp",
                data:{
                    msg:"輸入聊天內容後按Enter鍵",
                    msglist:"聊天記錄："
                },
                methods:{
                    send:function () {
                        this.msglist += "
" + "   " + this.msg;
                    }
                }
            });
        }

    </script>
</head>
<body>
<div id="divApp" class="container">
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <input v-model="msg" v-on:keyup.enter="send" class="form-control"/>
            </div>
        </div>
        <div class="col-md-6">
            <div class="form-group">
                <textarea rows="10" class="form-control">{{msglist}}</textarea>
            </div>
        </div>
    </div>
</div>
</body>
</html>
複製程式碼
  • v-on:keyup.enter的含義是監聽該input控制元件上的Enter鍵事件

6) 總結

vue.js給我最直觀的體驗就是：頁面初始化時，控制元件（檢視層）繫結資料變數（資料層）後，以後就專注處理資料上的事情就可以了，資料變化後的介面表現或者介面變化後的資料調整，vue.js框架已經都幫我們處理好了。

借用一個網上的圖：

MVVM框架

相關文章