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>
复制代码

v-on:keyup.enter的含义是监听该input控件上的回车键事件

6) 总结

vue.js给我最直观的体验就是：页面初始化时，控件（视图层）绑定数据变量（数据层）后，之后就专一处理数据上的事情就能够了，数据变化后的界面表现或者界面变化后的数据调整，vue.js框架已经都帮咱们处理好了。app

借用一个网上的图：

Vue.js初体验

1) 准备工做

2) 最原始的实现方法

使用原始的html和js代码，把用户输入的文本叠加显示在另外一个控件textarea上

代码上须要每次手动把更新后的内容赋给控件的属性，触发控件显示新的内容

3) 依赖jquery和bootstrap样式的写法

第二种写法和第一种没有本质区别，就当前页面而言，仅仅是控件外观变得稍微漂亮点，js代码写起来更加整齐、便捷吧

利用现成的库，可以提升写代码的效率，加强代码的可读性、维护性等等

4) 依赖vue.js和bootstrap样式的写法

与html的内容（DOM）结合起来，new出一个Vue的实例

v-model、v-on等代码，是vue.js的东西,

分别建立了绑定两个控件的变量msg、msglist

变量的值改变后会自动刷新控件的展现、用户从界面上改变了控件的值，绑定的变量也会自动被更新

因此，send方法只要聚焦两个变量之间的处理便可

5) 改进后的写法

v-on:keyup.enter的含义是监听该input控件上的回车键事件

6) 总结