Vue入門學習筆記2 Vue內部指令整理

上一篇整理總結了Vue的準備知識和運行環境、IDE的介紹以及以一個hello world介紹了Vue的基礎語法及應用，這篇將介紹Vue的內部指令。

1、Vue內部指令概覽

指令	描述
v-if	條件渲染，就像平常寫的if語句一樣的道理
v-else	必須與v-if搭配使用，如同普通的else語句，意爲否則
v-show	與if類似，如果布爾值爲true就顯示
v-for	循環遍歷渲染
v-text	綁定文本
v-html	綁定HTML標籤
v-on	綁定事件，如點擊事件、鼠標鍵盤事件等
v-model	數據源綁定
v-bind	用於綁定標籤屬性
v-pre	原樣輸出
v-cloak	渲染完成後才顯示
v-once	第一次渲染的時候渲染，既僅渲染一次

2、v-if & v-else & v-show 實例

v-if和v-else通常是組合使用的，就像我們平常在js中寫的if-else一樣的作用。
v-show同樣通過boolean修改標籤的css的display屬性來進行顯示或異常
v-if與v-show的區別：v-if判斷真假，如果爲真繼續加載執行後面的內容，如果爲假則不再加載後面的內容，大大減少服務器壓力。而v-show則不一樣，不管真假都會加載全部內容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-if & v-else & v-show</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-if & v-else & v-show</h1>
    <hr>
    <div id="app">
        <div v-if="isLogin">你好主人，歡迎回來~</div>
        <div v-else>不好意思，請您先登錄！</div>
        <!-- v-if判斷是否加載，true加載，false不加載，簡輕服務器壓力 -->
        <div v-show="isLogin">v-show怎樣都會加載，修改的是display屬性</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                isLogin:true
            }
        })
    </script>
</body>
</html>

3、v-for 實例

v-for循環遍歷，通常用在遍歷數組渲染頁面。下面這個例子介紹了便利數組和對象的使用，以及排序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hello world</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>hello world!</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for="item in sortItmes">
                {{item}}
            </li>
        </ul>
        <hr>
        <ul>
            <li v-for="(item,index) in sortStudents">
                {{index}}_{{item.naem}}-{{item.age}}
            </li>
        </ul>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                itmes:[35,25,8,56,61,10,63],
                students:[
                    {naem:"panruihe",age:"24"},
                    {naem:"ruihe",age:"15"},
                    {naem:"潘總",age:"35"},
                    {naem:"小老弟",age:"18"},
                    {naem:"會左勾拳的螳螂",age:"22"},
                ]
            },
            computed:{
                sortItmes:function(){
                    return this.itmes.sort(sortNunber);
                },
                sortStudents:function(){
                    return sortByKey(this.students,'age')
                }
            }
        });
        // sort() 默認是按照首位進行排序的，所以需要寫一個sortNunber函數傳進去才能正常進行排序
        function sortNunber(a,b){
            return a-b;
        }

        //數組對象排序的方法
        function sortByKey(array,key){
            return array.sort(function(a,b){
                var x=a[key];
                var y=b[key];
                return ((x<y)?-1:((x>y)?1:0));
            });
        }
    </script>
</body>
</html>

4、v-text & v-html 實例

v-text通常用於綁定文本信息，而v-html用於綁定HTML標籤。
Tip: 實際開發中儘量不使用v-html , 這有可能導致網站遭到xss攻擊，尤其在表單裏絕對不能使用。除非你們這個部分不重要，或者絕對安全。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-text & v-html</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-text & v-html 實例</h1>
    <hr>
    <div id="app">
        <span>{{mes}}</span> >> <span v-text="mes"></span> <br>
        <!-- 實際開發中儘量不使用v-html , 這有可能導致網站遭到xss攻擊，尤其在表單裏絕對不能使用 -->
        <span>{{tip}}</span>>> <span v-html="tip"></span>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                mes:"hello world",
                tip:"<span>hello world</span>"
            }
        })
    </script>
</body>
</html>

5、v-on 實例
v-on用於綁定事件，如click、keyup等。下面這個例子用v-on指令做了一個簡易計分器。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on實例</title>
    <script  type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-on實例</h1>
    <hr>
    <div id="app">
        <p>本場得分：{{fenshu}}</p>
        <p>
            <button v-on:click="jiafen">加分</button>
            <button v-on:click="jianfen">減分</button> <br>
            <input v-on:Keyup.enter="onEnter" v-model="fenshu2">
        </p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                fenshu:0,
                fenshu2:0
            },
            methods:{
                jiafen:function(){
                    this.fenshu++
                },
                jianfen:function(){
                    this.fenshu--
                },
                onEnter:function(){
                    this.fenshu=this.fenshu+parseInt(this.fenshu2)
                }
            }
        })
    </script>
</body>
</html>

6、v-model 數據源綁定實例

v-model應用數據源的綁定情景。其中它的屬性有以下幾個：
lazy 懶加載
number 數字判斷
trim 去空格
這3個屬性在下面的例子中都有應用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-model實例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-model實例 雙向數據綁定</h1>
    <hr>
    <div id="app">
        <p>原始文本信息：{{mes}}</p>
        <hr>
        <h3>文本框</h3>
        <p>
            v-model：<input type="text" v-model="mes"> <br> <br>

            v-lazy(懶加載)：<input type="text" v-model.lazy="mes"><br> <br>

            v-number(只有是數字才起作用)：<input type="text" v-model.number="mes"><br> <br>

            v-trim(去首尾空格)：<input type="text" v-model.trim="mes"><br> <br>
        </p>
        <hr>
        <h3>文本域</h3>
        <textarea cols="30" rows="10" v-model="mes"></textarea>
        <hr>
        <h3>多選框綁定一個值</h3>
        <input type="checkbox" id="isTrue" v-model="isTrue"> 
        <label for="isTrue">{{isTrue}}</label>
        <hr>
        <h3>多選框綁定多個值</h3>
        <p>
            <input type="checkbox" id="ruihe" value="ruihe" v-model="web_name" >
            <label for="ruihe">ruihe</label>
            <input type="checkbox" id="panruihe" value="panruihe" v-model="web_name" >
            <label for="panruihe">panruihe</label>
            <input type="checkbox" id="panzong" value="潘總" v-model="web_name" >
            <label for="panzong">潘總</label>
            <input type="checkbox" id="panboss" value="潘老闆" v-model="web_name" >
            <label for="panboss">潘老闆</label>
        </p>
        <p>
            <label>{{web_name}}</label>
        </p>
        <hr>
        <h3>單選框綁定一個值</h3>
        <p>
            <input type="radio" id="one" value="男" v-model="sex">
            <label for="one">男</label>
            <input type="radio" id="two" value="女" v-model="sex">
            <label for="two">女</label>
        </p>
        <p>你選擇的是：{{sex}}</p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                mes:"hello world",
                isTrue:true,
                web_name:[],
                sex:"男"
            }
        })
    </script>
</body>
</html>

7、v-bind 實例

v-bind是用於綁定標籤屬性的，如我們經常要在前端綁定一個class屬性或者style屬性對象等，以及三目運算動態調整頁面樣式等。更多內容可以參照下面的例子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-bind 實例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-bind 實例</h1>
    <!-- v-bind用於綁定標籤的屬性 -->
    <hr>
    <div id="app">
        <p><img v-bind:src="imgSrc" alt="青蛙"></p>
        <!-- v-bind可以簡寫成 :（冒號） -->
        <p><a :href="webUrl" target="_blank">新開始博客網</a></p>
        <hr>
        <div :class="calssName">1、綁定class</div>
        <div :class="{calssA:isOK}">2、綁定class中的判斷</div>
        <div :class="[classA,classB]">3、綁定class中的數組</div>
        <div :class="isOK?classA:classB">4、綁定class中的數組</div>
        <hr>
        <div>
            <input type="checkbox" id="isOK" v-model="isOK">
            <label for="isOK">isOK={{isOK}}</label>
        </div>
        <hr>
        <!-- vue的坑1 font-size 凡是橫杆（-）隔開的都有大寫字母代表如下fontSize -->
        <div :style="{color:red,fontSize:font}">5、綁定style</div>
        <div :style="styleObject">6、綁定style對象</div>
    </div>
    <style>
        .calssA{
            color: red;
        }
        .classB{
            font-size: 150%;
        }
    </style>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc:'http://img5.imgtn.bdimg.com/it/u=1089874897,1268118658&fm=26&gp=0.jpg',
                webUrl:'http://www.fivewalking.cn/',
                calssName:'calssA',
                isOK:true,
                classA:'calssA',
                classB:'classB',
                red:'red',
                font:'20px',
                styleObject:{
                    color:'green',
                    fontSize:'24px%'
                }
            }
        })
    </script>
</body>
</html>

8、v-pre & v-cloak & v-once 實例
v-pre 原樣輸出
v-cloak 渲染完成後顯示
v-once 頁面第一次渲染時渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-pre & v-cloak & v-once 實例</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-pre & v-cloak & v-once 實例</h1>
    <hr>
    <div id="app">
        <!-- v-pre 原樣輸出 -->
        <div v-pre>{{mes}}</div>

        <div v-cloak>渲染完成後，才顯示！</div>

        <!-- v-once 只在第一次渲染的時候渲染 -->
        <div v-once>{{mes}}</div>
        <div><input type="text" v-model="mes"></div>
        <div>{{mes}}</div>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:"#app",
            data:{
                mes :'hell world!'
            }
        })
    </script>
</body>
</html>

到這裏就結束了，祝大家週末愉快。

Vue入門學習筆記2 Vue內部指令整理

Vue入門學習筆記2 Vue內部指令整理

我的第一個ASP.NET項目總結

學習筆記(01):Node.js進階教程第一步(基礎篇)-node.js教程0_課程介紹

例子演示，詳解ASP.NET上傳控件FileUpload應用

java 淺析面向對象以及對象和類的思想概念

微信小程序雲開發快速上手1

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結