vue2.0學習筆記（第一講）（經常使用指令及vue製做簡易留言本）

時間  2019-12-05
標籤 vue2.0 vue 學習 筆記 第一 經常 使用 指令 製做 簡易 留言本 简体版
原文   原文鏈接

vue是一個mvvm的框架，和angular相似，但比較小巧，容易上手，尤爲適用於移動端的項目。vue的一般用法爲一片html代碼配合上json，再new出來vue實例便可。vue與angular的共同點是均不兼容低版本的IE瀏覽器（如IE6,7,8）。css

1、vue的下載及引包

vue的官網地址爲：https://cn.vuejs.org/。在官網首頁，選擇點擊"起步",在跳轉的頁面的左側邊欄當中，選擇"教程"爲"2.x"，接下去點擊下面的"安裝"，在安裝選擇界面下，選擇直接由<script>標籤引入，接下去選擇點擊"開發版本"，把vue.js文件下載到本地的項目文件夾當中。接下去咱們在html頁面當中經過<script src="vue.js"></script>引入便可。html

2、vue的起步使用

vue使用的基本骨架以下所示：vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:"#box",
                data:{
                    msg:"hello world!"
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <h1>{{msg}}</h1>
    </div>
</body>
</html>

圖片描述

咱們在入口函數內部，使用new Vue({})來生成一個vue實例，使用變量vm來接收，該變量名可任取。在該vue實例內部接收一個json對象，該對象的el屬性是爲了肯定該vue實例的適用範圍。el的屬性值相似於jquery當中的選擇器，能夠選擇#id、.class、tagname的形式。該對象的data屬性值爲一個json對象，能夠給出多組數據鍵值對。咱們在html所選擇的容器內使用{{msg}}便可顯示data當中msg對應的屬性值。jquery

3、vue的經常使用指令

指令擴展了html標籤的功能，或者說是擴展了html標籤的屬性，由於指令通常都是做爲html標籤的屬性出現，直接加在html標籤當中。json

一、v-model

該指令通常用於表單元素，如input標籤。該指令值一般爲vue實例當中data的某個屬性名，即對應該數據屬性值。bootstrap

<div id="box">
    <input type="text" v-model="msg">
    <h1>{{msg}}</h1>
</div>

圖片描述

vue支持雙向數據綁定，即當用戶改變文本框當中的值時，至關於改變了msg的屬性值，則頁面當中全部與msg數據有關的模板數據都會發生同步的改變。數組

圖片描述

二、v-for

該指令通常用於實現vue當中數組數據的循環。咱們給要循環生成的標籤對加上指令v-for="(value,index) in arr"，便可根據arr的數組長度，循環生成多對標籤對。其中arr對應data當中給定的數組名，value與index爲變量名，可任取，不過參數順序不可變，第一個參數對應該數組當中的值，第二個參數對應索引號。咱們在html標籤對當中使用{{value}}和{{index}}能夠獲取並顯示。瀏覽器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:"#box",
                data:{
                    msg:"hello world!",
                    arr:['apple','banana','pear','tomato']
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <ul>
            <li v-for="(val,key) in arr">{{key}}--{{val}}</li>
        </ul>
    </div>
</body>
</html>

圖片描述

當咱們不須要使用該數組的索引號時，能夠把指令簡寫爲v-for="value in arr"，此時value對應爲數組的值。該指令也能夠實現對json對象的循環，如v-for=(val,key) in json"，其中json對應data當中json屬性名，第一個參數對應遍歷到的value值，第二個參數對應遍歷到的key值。app

三、v-on

該指令通常用於對頁面當中的DOM元素進行事件綁定。如v-on:click="show()"即表明當單擊該元素時執行show這個事件函數，該函數名必須事先在vue實例的methods對象當中聲明定義過。new Vue({})實例對象當中data:{}對象的數據，能夠看作是這個示例對象的屬性。而methods:{}對象當中羅列的事件函數，能夠看作是這個實例對象的方法。框架

<script>
        window.onload = function(){
            var vm = new Vue({
                el:"#box",
                data:{
                    msg:"hello world!",
                    arr:['apple','banana','pear','tomato']
                },
                methods:{
                    show:function(){
                        alert(1);
                    }
                }
            });
        }
   </script>

   <div id="box">
       <button v-on:click="show()">按鈕</button>
   </div>

不過咱們在給某個DOM標籤元素進行事件綁定時，v-on:click="show()"等價於@click="show()"，咱們通常都採用簡寫的方式。
咱們在vue實例對象的方法函數體內使用this能夠獲取該實例對象當中的數據屬性值，即data當中定義的數據。

<script>
    window.onload = function(){
        var vm = new Vue({
            el:"#box",
            data:{
                arr:['apple','banana']
            },
            methods:{
                add:function(){
                    this.arr.push('tomato');
                }
            }
        });
    }
</script>
<div id="box">
    <button v-on:click="add()">add</button>
    <ul>
        <li v-for="(value,index) in arr">{{index}}--{{value}}</li>
    </ul>
</div>

圖片描述

即每次點擊按鈕，arr數組當中都會追加一項，因爲vue具備雙向數據綁定的特性，故當數據發生改變時，在頁面當中與該數據有關的模板也會相應的發生改變。

四、v-show

該指令能夠控制DOM元素的顯示與隱藏。咱們給DOM元素加上指令v-show="true"則能夠控制該元素顯示，若加上指令v-show="false"則能夠控制該元素隱藏。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.js"></script>
    <style>
        .test{
            margin:20px;
            width:100px;
            height:100px;
            background-color: skyblue;
        }
    </style>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:"#box",
                data:{
                    a:true
                },
                methods:{
                    
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <button @click="a=false">change</button>
        <div class="test" v-show="a"></div>
    </div>
</body>
</html>

在@click=""內部能夠直接由屬性名來獲取vue實例對象的數據屬性，並對其進行賦值操做。

五、v-once

該指令用於明確只綁定一次數據，當數據更新以後，模板不會隨之變化。

<script>
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            data:{
               msg:'hello world!'
            }
        });
    };
</script>
<div id="box">
    <input type="text" v-model="msg">
    <h2 v-once>{{msg}}</h2>
</div>

示例代碼如上所示，當給標籤加上v-once指令後，則該標籤只綁定一次數據，以後當用戶改變文本框當中的值，從而改變vue實例的data當中的msg的屬性值時，h2標籤內的模板數據不會隨之發生改變。

圖片描述

六、v-html

該指令能夠用於將數據內容進行html轉義輸出。

<script>
    window.onload = function(){
        var vm = new Vue({
            el:'#box',
            data:{
               msg:'<h1>welcome</h1>'
            }
        });
    };
</script>
<div id="box">
    <input type="text" v-model="msg">
    <div v-html="msg"></div>
</div>

示例代碼如上所示，當給標籤加上v-html指令，而且指令值爲數據的屬性名，能夠將數據內容進行html轉義輸出後，呈如今該標籤對當中。此時再也不須要寫{{msg}}。

圖片描述

七、v-cloak

因爲咱們在模板當中用{{}}這種標記內方式數據，因此當數據請求慢的時候，用戶可能會看到花括號標記，使用v-cloak指令能夠防止閃爍，防止用戶看到花括號標記。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        [v-cloak]{
            display:none;
        }    
    </style>
    <script src="vue.js"></script>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:'#box',
                data:{
                   msg1:'welcome',
                   msg2:'hello',
                   msg3:'world'
                }
            });
        };
    </script>
</head>
<body>
    <div id="box">
        <div v-cloak>
            <h1>{{msg1}}</h1>
            <h2>{{msg2}}</h2>
            <h3>{{msg3}}</h3>
        </div>
    </div>
</body>
</html>

示例代碼如上所示，咱們須要在style標籤對內對v-cloak屬性選擇器進行樣式設定。該指令通常用在一個比較大的段落當中，單個標籤標記不用這個指令，即當一個div的子代有多處用到花括號標記，則咱們只需給父級div標籤加上v-cloak指令便可。

八、v-text

該指令也是爲了防止閃爍，防止用戶看到花括號標記，上述的v-cloak指令通常用於比較大的段落，但對於單個標籤來講，可使用v-text這個指令。
即以前咱們使用的<h1>{{msg}}</h1>與<h1 v-text="msg"></h1>數據呈現的效果等價，但使用第二種寫法時，即便網速再慢，也看不到花括號標記，能夠達到防止閃爍的目的。

4、vue製做簡易留言本

咱們使用bootstrap進行簡單的頁面佈局，留言本頁面以下所示：

圖片描述

當沒有留言時，顯示暫無數據。當用戶輸入姓名和留言以後，點擊提交按鈕，則留言列表區就能夠顯示留言信息，暫無數據的提示消失，出現一個刪除所有的按鈕，留言序號從1開始增長，後添加的留言顯示在上面，每一行留言的右側都有一個刪除按鈕，選擇點擊刪除按鈕便可刪除對應的留言，點擊所有刪除按鈕就能夠刪除所有的留言，此時再次出現暫無數據的提示。

圖片描述

示例源代碼爲：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="vue.js"></script>
    <style>
        h2{
            text-align: center;
        }
        .board ul{
            list-style: none;
        }
        .board li{
            margin-left: 110px;
            padding-left: 40px;
            height: 50px;
            line-height: 50px;
            border-bottom: 1px solid #ccc;
            font-size: 18px;
            position: relative;
        }
        .board li button{
            top:10px;
            position: absolute;
            right: 50px;
        }
    </style>
    <script>
        window.onload = function(){
            var vm = new Vue({
                el:"#box",
                data:{
                    name:'',
                    message:'',
                    list:[]
                },
                methods:{
                    submit:function(){
                        if(this.name==''||this.message=='') return;
                        this.list.unshift({name:this.name,message:this.message});
                        this.name = '';
                        this.message = '';
                    },
                    deleteMsg:function(index){
                        if(index == -1){
                            this.list = [];
                        }else{
                            this.list.splice(index,1);
                        };
                    }
                }
            });
        }
    </script>
</head>
<body>
    <div id="box">
        <h2>個人留言本</h2>
        <div class="container">
            <form class="form-horizontal">
                <div class="form-group">
                    <label for="name" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                    <input type="text" class="form-control" id="name" v-model="name">
                    </div>
                </div>
                <div class="form-group">
                    <label for="message" class="col-sm-2 control-label">留言</label>
                    <div class="col-sm-10">
                    <textarea class="form-control" rows="3" id="message" v-model="message"></textarea> 
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-success" @click="submit()">提交</button>
                    </div>
                </div>
            </form>
            <div class="board">
                <h2>留言列表區</h2> 
                <ul>
                    <li v-for="(item,key) in list">【序號】：{{list.length-key}}【姓名】：{{item.name}}【留言】：{{item.message}}
                     <button type="button" class="btn btn-danger" @click='deleteMsg(key)'>刪除</button>
                    </li>
                    <li v-show="list.length==0">暫無數據......</li>
                    <li v-show="list.length!=0"><button type="button" class="btn btn-danger" @click='deleteMsg(-1)'>刪除所有</button></li>
                </ul>
            </div>
        </div>
    </div>
</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程