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>

到这里就结束了，祝大家周末愉快。

会左勾拳的螳螂

原创文章 18 获赞 41 访问量 1万+

关注私信

Vue入门学习笔记2 Vue内部指令整理

Vue入门学习笔记2 Vue内部指令整理

猜你喜欢