Vue.js 基礎指令實例講解（各類數據綁定、表單渲染大總結）——新手入門、高手進階第一篇

時間 2019-11-09

標籤 vue.js vue 基礎指令實例講解各類數據綁定表單渲染總結新手入門高手進階一篇欄目 JavaScript 简体版

原文原文鏈接

　　Vue.js 是一套構建用戶界面的漸進式框架。他自身不是一個全能框架——只聚焦於視圖層。所以它很是容易學習，很是容易與其它庫或已有項目整合。在與相關工具和支持庫一塊兒使用時，Vue.js 也能完美地驅動複雜的單頁應用。他的語法和 AngularJS特別相像，若是接觸過AngularJS的，上手會更快。並且vue比AngularJS使用簡潔、靈活了不少。javascript

　　那今天，我就給你們詳細的說道說道這個 Vue.js ，如下是咱們此次詳解的目錄，朋友們能夠根據本身的狀況選擇性閱讀，全部操做均附有代碼實現。css

1. Vue.js 如何綁定到頁面中，使用他的功能。html

　　跳轉vue

2. Vue 實例化對象的生命週期。java

　　跳轉jquery

3. Vue 的全部數據綁定指令數組

　　跳轉app

　　那接下來，咱們就開始今天的介紹啦！框架

1. Vue.js 如何綁定到頁面中，使用他的功能。dom

　　先看下面的一段代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>    
        <button id="app1"  onclick="app1.func()">我是app1，點我</button>
    </body>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript">
        //經過Vue.js的構造函數 實例化出一個根實例
        var app1= new Vue({
            el:"#app1",
            data:{
                message:"我在app1中顯示出來了嗎？",
                func:function(){
                    alert(this.message);
                }
            }
        });
        console.log(app1.$data.message);  //這個要知道哈，app1就是一個變量，一個對象類型的變量，鏈式語法直接用便可
        
    </script>
</html>

　　效果以下：

　　上述代碼就是點擊按鈕有彈窗，下面解析一下這段代碼。

 var app1= new Vue({
    el:"#app1",
    data:{
       message:"我在app1中顯示出來了嗎？",
       func:function(){
            alert(this.message);
          }
       }
 });
console.log(app1.$data.message);

　　經過Vue.js的構造函數實例化出一個根實例 app1 ，說白了，這就是咱們面向對象的對象的實例化，直接 new 一個對象。

　　el:"#app1", 這是在掛載咱們實例化對象的元素節點，就是這個app1 對象做用域是那一個標籤裏面的。這裏能夠是 id、class、tagname。可是主要仍是用id，由於他的惟一性。

　　data:{} 是定義這個對象的變量和方法，注意全部在和 app1 有關聯的變量、方法都必須在data中聲明。

　　注意： (1)做用域。js5 只有函數做用域，因此 data 中的函數若是想調用變量，就必須經過 this. 調用，或者直接經過對象名調用。

　　　　　 (2)外部調用。app1.$data.message；在js中直接調用 vue 對象的屬性、方法時，須要鏈式語法，一層層點出來，這裏用 $data ，主要仍是和js的變量做區別

　　　　 (3)與HTML代碼的綁定。這裏我是經過 js 的onclick直接綁定的，固然 vue 有本身的事件綁定，這裏暫且不講，若是用 js 的行內綁定，注意須要帶對象名。這就是純 OOP思想了。相信你們對面向對象也不陌生，若是真的不知道是啥玩意的，趕忙百度學去。

　　以上就是最最最最最最.....基礎的使用 vue 的方法了。

2. Vue 實例化對象的生命週期。

　　接下來，咱們說一下，一個實例化出來的對象，他的生命週期是啥樣的，要經歷那些階段。請看下面一段代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>

        <div id="container">個人聲明週期，你們看吧！</div>
        
    </body>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript">

        //如下代碼時顯示vm整個生命週期的流程
        var vm = new Vue({
            el: "#container",
            data: {
                test : 'hello world'
            },
            beforeCreate: function(){
                console.log(this);
                showData('建立vue實例前',this);
            },
            created: function(){
                showData('建立vue實例後',this);
            },
            beforeMount:function(){
                showData('掛載到dom前',this);
            },
            mounted: function(){
                showData('掛載到dom後',this);
            },
            beforeUpdate:function(){
                showData('數據變化更新前',this);
            },
            updated:function(){
                showData('數據變化更新後',this);
            },
            beforeDestroy:function(){
                vm.test ="3333";
                showData('vue實例銷燬前',this);
            },
            destroyed:function(){
                showData('vue實例銷燬後',this);
            }
        
        });
        function realDom(){
            console.log('真實dom結構：' + document.getElementById('container').innerHTML);
        }
        function showData(process,obj){
            console.log(process);
            console.log('data 數據：' + obj.test)
            console.log('掛載的對象：')
            console.log(obj.$el)
            realDom();
            console.log('------------------')
            console.log('------------------')
        }
        
    </script>
</html>

　　那接下來看看效果圖：

　　經過控制檯的打印效果能夠看出來，實例化 vue 對象大體分爲建立vue實例、掛載到dom、數據變化更新、vue實例銷燬 4個階段，，注意每一個階段都有對應的鉤子，咱們能夠經過對這些鉤子進行操做，達成一些功能。雖然初學者用不太上，可是提早了解一下仍是好的，到時候碰到實際功能要能想獲得生命週期的鉤子。

3. Vue 的全部數據綁定指令

　　那如今咱們就總結一下 vue 的最大亮點，各類靈活的數據綁定方法。這裏主要列舉實例詳解 {{}} 、 v-once 、 v-html 、 v-bind 和 v-model 。

　　（1）首先是 {{}} 、 v-once 、 v-html 的用法，請看下面的代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>數據綁定篇</title>
    </head>
    <body>
        <!--
            數據綁定篇
        -->
        <div id="app1">
<!--1. {{}}    v-once    v-html-->
            <!--Mustache 標籤，也就是雙大括號,刷新頁面時會顯示出雙大括號-->
            <button onclick="app1.func()">點我，改變變量message的值</button>
            <br /><br />
            <!--即時綁定，div的內容隨變量變化而變化的，綁定內容做純文本處理-->
            <!--雙大括號裏邊也能夠寫表達式，和AngularJs同樣的-->
            <div>{{message}}</div><br />
            <!--只綁定一次，整個div的全部綁定數據，都只會加載一次，再更新就不會變了-->
            <div v-once>{{message}}</div><br />
            <!--雙大括號只能當純文本顯示，v-html 能夠直接綁定HTML標籤的-->
            <div v-html="h1"></div><br />
        </div>    
    </body>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript">
        //經過Vue.js的構造函數 實例化出一個根實例
        var app1= new Vue({
            el:"#app1",            //咱們實例化的 app1 的掛載的 元素節點，通常用 id，class，或者tagname也能夠，可是多了會衝突
            data:{
                message:"我是變量message的內容！",
                h1:"<h1 style='color: fuchsia;'>我是h1標籤</h1>",  //注意單引號
                //message改變函數
                func:function(){
                    if (this.message == "我是變量message的內容！") {
                        this.message = "message的內容改變了！";
                    }else{
                        this.message = "我是變量message的內容！";
                    }
                }
　　　　　　　　}
　　　　　　});

        
    </script>
</html>

　　而後看一下效果：

　　仍是分析一下這個小demo。

　　<div>{{message}}</div> Mustache 標籤，也就是雙大括號,他和 AnjularJs 的雙大括號徹底相同，就是直接將數據動態綁定到標籤中，當變量發生變化的時候，標籤內容也是改變，上大括號裏面也是能夠寫表達式的。上述代碼是作了一個在button中點擊改變變量message的值，而後經過數據綁定使div的text即時變化。

　　<div v-once>{{message}}</div> 他也是數據綁定，可是隻綁定一次。要注意 v-once是加載div上的，因此整個div的全部綁定數據，都只會加載一次，再更新就不會變了，因此點擊 button時，第二個div的數據並無發生改變。

　　<div v-html="h1"></div> 是綁定HTML標籤，注意他能夠直接綁定 HTML模板，可是這一堆HTML標籤不能是多層嵌套的。什麼意思呢，就是你之間綁定一段標籤能夠，綁定一個模板也能夠，可是若是綁定一個模板，那這個模板內部不能再嵌套模板了。不然沒法渲染的。上述代碼就是直接導入了一個加了行內樣式的h1標籤，功能十分強大，比直接操做dom節點強太多了，效率是幾何倍的增加。

　　（2） 其次是 v-bind

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>數據綁定篇</title>
        <style type="text/css">
            .aaa{
                margin: 10px;
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .bbb{
                margin: 10px;
                width: 50px;
                height: 50px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <!--
            數據綁定篇
        -->
        <div id="app1">
<!--2.    v-bind-->        
            <!--v-bind 他是專門用來綁定屬性的 ，主要用來操做元素的 class 列表和它的內聯樣式-->
            <!--這個和用 js 直接操做dom節點功能同樣，不過簡單特別多-->
            <div v-bind:style = "{backgroundColor:myColor,width: myWidth+'px',height: myHeight+'px'}" onclick="app1.func1()"></div>
            <!--還能夠直接綁定更改 class-->                
            <div v-bind:class="myClass"  onclick="app1.func2()"></div>
            -------------------------------------------------------------------------------------
            <div class="img" style="width: 100px;height: 100px;">
                <img style="width: 100%;" v-bind:src="mySrc" onclick="app1.func3()"/>
            </div>
            
        </div>
    
    </body>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript">
        //經過Vue.js的構造函數 實例化出一個根實例
        var app1= new Vue({
            el:"#app1",    
            data:{
                myColor:"blue",
                myWidth:100,
                myHeight:100,
                myClass:"aaa",
                mySrc:"img/2.png",
                func1:function(){
                    if (this.myColor == "blue") {
                        this.myColor = "red";
                        this.myWidth = 50,
                        this.myHeight = 50
                    }else{
                        this.myColor = "blue";
                        this.myWidth = 100,
                        this.myHeight = 100
                    }
                },
                func2:function(){
                    if (this.myClass == "aaa") {
                        this.myClass = "bbb";
                    }else{
                        this.myClass = "aaa";
                    }
                },
                func3:function(){
                    if (this.mySrc == "img/2.png") {
                        this.mySrc = "img/u=1622626696,1630096734&fm=23&gp=0.jpg";
                    }else{
                        this.mySrc = "img/2.png";
                    }
                }
            }
        });
        
    </script>
</html>

　　而後看一下效果：

　　那咱們解析一下上面的代碼。

　　v-bind 他是專門用來綁定屬性的，主要用來操做元素的 class 列表和它的內聯樣式。這一點和AnjularJs的 ng-bind 是徹底不一樣的，要注意！！！

　　<div v-bind:style = "{backgroundColor:myColor,width: myWidth+'px',height: myHeight+'px'}" onclick="app1.func1()"></div> 這是在直接綁定行內樣式style。而後經過綁定點擊函數，爲各個比那兩賦值，達到點擊更改div樣式的目的。

　　<div v-bind:class="myClass" onclick="app1.func2()"></div> 這個是直接綁定修改 class類名，在頁內樣式表中有我定義的 .aaa 和 .bbb 兩個類名，經過動態修改class名修改樣式，這也比 JQuery 直接操做dom節點快捷很多。

　　<img style="width: 100%;" v-bind:src="mySrc" onclick="app1.func3()"/> 這是直接綁定屬性，動態修改 img 的src 屬性。達到點擊圖像顯示不一樣的圖像的效果。

這裏要特別強調一下，v-bind 直接綁定的是屬性，而不是樣式，對於 img ，他的src是屬性，可是對於 div ，width 啥的是樣式，不是屬性，因此 v-bind:width="100+'px'" 很差使.

　　至於 v-bind 屬性綁定，也就經常使用用法也就這麼多了。

　　（3） v-model

　　用 v-model 指令在表單控件元素上建立雙向數據綁定。它會根據控件類型自動選取正確的方法來更新元素。它負責監聽用戶的輸入事件以更新數據，並特別處理一些極端的例子。v-model 並不關心表單控件初始化所生成的值。由於它會選擇 Vue 實例數據來做爲具體的值。在默認狀況下， v-model 在 input 事件中同步輸入框的值與數據，但你能夠添加一個修飾符 lazy ，從而轉變爲在 change 事件中同步

　　下面咱們看一段代碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>數據綁定篇</title>
        <style type="text/css">
            .aaa{
                margin: 10px;
                width: 100px;
                height: 100px;
                background-color: red;
            }
            .bbb{
                margin: 10px;
                width: 50px;
                height: 50px;
                background-color: blue;
            }
        </style>
    </head>
    <body>
        <!--
            數據綁定篇
        -->
        <div id="app1">
<!--3. v-model-->    
            <input type="text" v-model="myText" placeholder="請輸入："/>
            <div >{{ myText }}</div><br /><br />
            -------------------------------------------------------------------------------------
            <!--綁定單選按鈕-->
            <input type="radio" id="one" name="aa" value="男" v-model="picked">
            <label for="one">男</label>
            <br>
            <input type="radio" id="two" name="aa" value="女" v-model="picked">
            <label for="two">女</label>
            <br>
            <span>您選擇了: {{ picked }}</span>
            <br><br>
            -------------------------------------------------------------------------------------
            <!--綁定複選按鈕-->
            <div onclick="app1.funcCheckedNames()">
                <input type="checkbox" id="jack" value="好帥！" v-model="checkedNames">
                <label for="jack">好帥！</label>
                <input type="checkbox" id="john" value="你是個人男神！" v-model="checkedNames">
                <label for="john">你是個人男神！</label>
                <input type="checkbox" id="mike" value="我愛你，飛哥！" v-model="checkedNames">
                <label for="mike">我愛你，飛哥！</label>
            </div>
            <br>
            <span>您對飛哥的評價: {{ names }}</span><br><br>
            --------------------------------------------------------------------------
            <!--綁定單選列表--><br>
            <select v-model="selected1">  
                <option>親飛哥</option>  
                <option>向飛哥表白</option>  
                <option>請飛哥吃飯</option>
            </select><br>
            <span>真心話大冒險: {{ selected1 }}</span><br><br>
            ------------------------------------------------------------------------------
            
            <div onclick="app1.funcselected22()">
                <select v-model="selected2" multiple>  
                    <option>親親</option>  
                    <option>抱抱</option>  
                    <option>舉高高</option>
                </select>
            </div><br>
            <span>你想和飛哥偷偷幹些啥: {{ selected22 }}</span><br>
            
        </div>
        
        
    </body>
    <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
    <script type="text/javascript" src="js/vue.js" ></script>
    <script type="text/javascript">
        //經過Vue.js的構造函數 實例化出一個根實例
        var app1= new Vue({
            el:"#app1",
            data:{
                myText:"",
                picked:"",
                selected1:"",
                //這是複選列表的變量，函數
                selected2:[],
                selected22:"",
                funcselected22:function(){
                    this.selected22 = this.selected2.join("　");
                },
                //複選框的函數,及其相關變量
                checkedNames:[],
                names:"",
                funcCheckedNames:function(){
                    this.names = this.checkedNames.join("　");
                }
　　　　　　　　}
　　　　　　})

    </script>
</html>

　　而後看一下效果：

　　而後解析一下這段代碼。這裏就不一一詳細解釋代碼了，挑幾個典型的詳解，其餘的便很簡單了。

　　咱們就以多選按鈕爲例：

<div onclick="app1.funcCheckedNames()">
      <input type="checkbox" id="jack" value="好帥！" v-model="checkedNames">
      <label for="jack">好帥！</label>
      <input type="checkbox" id="john" value="你是個人男神！" v-model="checkedNames">
      <label for="john">你是個人男神！</label>
      <input type="checkbox" id="mike" value="我愛你，飛哥！" v-model="checkedNames">
      <label for="mike">我愛你，飛哥！</label>
 </div>

//這是複選列表的變量，函數
   selected2:[],
   selected22:"",
   funcselected22:function(){
       this.selected22 = this.selected2.join("　");
   },

　　這裏要強調一下，v-model 動態綁定這種多選框之類的，會以數組的形式存取，因此，咱們用 selected2:[], 變量接收選擇框的數據，可是咱們又不能直接用雙大括號顯示數據，朋友們能夠試驗一下，雙大括號是純文本顯示，他會把整個數組的中括號，引號，逗號都顯示出來，太醜了。因此這裏，我用了JQuery的數組分割爲字符串的函數 join("　")，把選中的數據分割成字符串，再用一個字符串類型的變量接收數據，這樣打印出來就好多了。注意，這裏 join("　") 我用的分隔符是空白字符，它佔一個漢字的空間，可是不會顯示出來。

　　好啦，以上這些就是Vue.js 的基礎內容，至於後續的各類渲染，以及組件 API等等，等咱們下週再分享。若是感受個人博客還不錯請記得關注我，以前的博客也有精品吆！