Vue.js初體驗

時間 2019-11-30

標籤 vue.js vue 體驗欄目 JavaScript 简体版

原文原文鏈接

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

1) 準備工做

開發環境：Win七、Chrome、WebStorm等
實現功能：在網頁的input輸入框裏輸入一段文字，點一個button按鈕，而後疊加顯示在textarea控件上。相似一個聊天窗口的樣子。

2) 最原始的實現方法

界面 css

代碼html

<!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 + "\r\n" + " " + 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樣式的寫法

界面前端

代碼vue

<!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() + "\r\n" + " " + $("#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樣式的寫法

界面 java

代碼jquery

<!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 + "\r\n" + " " + 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) 改進後的寫法

界面 bootstrap

代碼bash

<!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 += "\r\n" + " " + 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>
複製代碼