Vue内部指令的使用

最新推荐文章于 2022-09-25 21:30:17 发布

偶尔躲躲乌云_0

最新推荐文章于 2022-09-25 21:30:17 发布

阅读量578

点赞数

分类专栏： Vue2.0基础文章标签： vue

本文链接：https://blog.csdn.net/Aurora_1970s/article/details/105745116

版权

Vue2.0基础专栏收录该内容

14 篇文章 1 订阅

订阅专栏

Vue内部指令

1.v-if，v-else

v-if:是vue 的一个内部指令，指令用在我们的html中。v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态，在用户登录后现实用户名称。
示例代码：

<!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>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
               isLogin:true
            }
        })
    </script>
</body>
</html>

因为在data对象中设置了isLogin:true，所以运行这个页面后会显示登陆成功，同样的如果改成isLogin:false，那么就会显示对不起你还没有登陆。

2.v-show

调整css中display属性，DOM已经加载，只是CSS控制没有显示出来。例如：

<div v-show="isLogin">你好：JSPang</div>

注意v-if 和v-show的区别：

v-if：判断是否加载，可以减轻服务器的压力，在需要时加载。DOM不一定会加载。
v-show：调整css dispaly属性，可以使客户端操作更加流畅。DOM已经加载，只是被隐藏了。

3.v-for

示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-for</title>
    <script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
    <h1>v-for</h1>
    <hr>
    <div id="app">
        <ul>
            <li v-for="item in items">{{item}}</li>
        </ul>
        <hr>
        <ul>
            <li v-for="(student,index) in students">{{index}}:技术胖在{{student.age}}岁阶段的昵称是{{student.name}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                items:[
                    //"库里","汤普森","格林","伊戈达拉","杜兰特"
                    53,23,76,14,54,36,28
                ],
                students:[
                    {name:"Jspang",age:33,sex:"man"},
                    {name:"Panda",age:28,sex:"man"},
                    {name:"Panpan",age:33,sex:"man"},
                    {name:"King",age:13,sex:"man"},
                ]
            },
            computed:{
                items:function(){
                    return this.items.sort();
                }
            }
        })
    </script>
</body>
</html>

如果你想对数据进行排序等操作，可以使用computed方法，它会在数据渲染到页面上之前执行：

computed:{
                items:function(){
                    return this.items.sort();
                }
            }

注意，Vue有一个数据保护机制，就是说如果你想对items里面的数据进行排序输出，上面的代码是错误的，为了保护data中的数据，这种机制不允许我们对items直接进行修改，需要重新定义变量并赋值，因此我们可以把items改成sortitems，当然在上面v-for中也要修改：

 <li v-for="item in sortitems">{{item}}</li>

这样改之后还是有一个小问题，但这不是Vue的BUG，所有javascript都有这个问题，就是上面的排序仅仅是根据第一位数字来排序的，就是说你把76改成7，它并没有到第一位去。因此还需要改进，可以自己自定义排序方法：

function sortNumber(a,b){
            return a-b;
        }

computed:{
                sortitems:function(){
                    return this.items.sort(sortNumber);
                }
            }

对data中的students对象数组进行输出的语句如下，其中index就是索引，当然没有强制规定要用index。

<li v-for="(student,index) in students">{{index}}:技术胖在{{student.age}}岁阶段的昵称是{{student.name}}</li>

如果是数组对象排序：

...
<ul>
   <li v-for="(student,index) in sortStudents">{{index}}:技术胖在{{student.age}}岁阶段的昵称是{{student.name}}</li>
</ul>
...
sortStudents:function(){
      eturn sortByKey(this.students,'age');
}
...
//数组对象方法排序:
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));
     });
}
...

4.v-text,v-html

要在html中输出data中的值，我们一般用的是{{...}},但是这种情况也是有弊端的，就是当我们网速很慢或者javascript出错时，会暴露我们的{{xxx}}。因此v-text就可以用来解决这个问题。代码如下：

<span>{{message}}</span>
<span v-text="message"></span>

又例如当变量值中还含有HTML标签时dodo:'<h2>hello world</h2>'，用{{}}的方式输出会把标签当作字符串给输出，这并不符合我们的要求，这个时候就需要用到v-html，代码如下：

<span>{{dodo}}</span><br/>
//{{}}方法
<span v-html="dodo"></span>
//v-html方法

但是在实际的项目开发中，v-html方法的安全性不够容易引起黑客的攻击，除非在保证页面安全的情况下，才能使用，尽量还是减少使用或者使用其他可以提高代码安全性的方法。

5.v-on

v-on就是监听事件，可以用v-on指令监听DOM事件来触发javascript代码。
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">
        本场得分：{{score}}
        <p>
            <button v-on:click="faqiu">罚球加1分</button>
            <button v-on:click="zhongtou">中投加2分</button>
            <button v-on:click="sanfen">三分加3分</button>
            <button @click="jianfen">殴打裁判减1分</button><br/>
            <input type="text" v-on:keyup.enter="onEnter" v-model="addscore">
        </p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                score:0,
                score2:1
            },
            methods:{
                faqiu:function(){
                    this.score+=1;
                },
                zhongtou:function(){
                    this.score+=2;
                },
                sanfen:function(){
                    this.score+=3;
                },
                jianfen:function(){
                    this.score-=1;
                },
                onEnter:function(){
                    this.score=this.score+parseInt(this.addscore);
                     //强制转换Int类型
                }
            }
        })
    </script>
</body>
</html>

其中，绑定用到的方法写在method里面，v-on:可以用@来代替，另外在input框中的v-on:keyup.enter="onEnter"中的enter代表着回车键，整句话也就是按下键盘回车键响应，当然enter可以用数字13来代替，下面是键盘的键值表(来源于网络)：
键盘键值表

6.v-model

v-model绑定数据源指令，就是把数据绑定在特定的表单元素上，可以很容易的实现双向数据绑定。所谓双向数据绑定就是，通过v-model既能获得input框中的内容，又能将input框中的内容设置为v-model的值。
示例代码如下：

<!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>hello world</h1>
    <hr>
    <div id="app">
        <p>原始文本信息:{{message}}</p>
        <h3>文本框</h3>
        <p>v-model:<input type="text" v-model="message"></p>
        <p>v-model.lazy:<input type="text" v-model.lazy="message"></p>
        <p>v-model.number:<input type="text" v-model.number="message"></p>
        <p>v-model.trim:<input type="text" v-model.trim="message"></p>
        <hr>
        <h3>文本域</h3>
        <textarea cols="30" rows="10" v-model="message"></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="Curry" value="Curry" v-model="player_names">
                <label for="Curry">Curry</label>
                <input type="checkbox" id="Thompson" value="Thompson" v-model="player_names">
                <label for="Thompson">Thompson</label>
                <input type="checkbox" id="Durant" value="Durant" v-model="player_names">
                <label for="Durant">Durant</label>
            </p>
            <p>
                {{player_names}}
            </p>
        <hr>
        <h3>单选框绑定</h3>
        <p>
            <input type="radio" id="man" value="男" v-model="sex">
            <label for="man">男</label>
            <input type="radio" id="woman" value="女" v-model="sex">
            <label for="woman">女</label>
        </p>
        <p>你的性别是{{sex}}，对吗？</p>
    </div>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                message:"Hello World",
                isTrue:true,
                player_names:[],
                sex:'男'
            }
        })
    </script>
</body>
</html>

其中v-model="message"就是数据源绑定指令，
下面介绍一下v-model的三个修饰符：

v-model.lazy="message"：加上了lazy属性之后，在文本框改变值，原始文本信息处不会改变，只有当我们鼠标焦点离开文本框时才会发生改变。如下图：
v-model.number="message"：当先输入数字再输入字母时，原始文本信息框不会被双向绑定。其它像先输入字母再数字，先字母再数字再字母都能正常双向绑定。如下图：
v-model.trim="message"：去掉前后的空格，具体效果如下图：

另外，关于文本域，多选框绑定一个值，多选框绑定数组，单选框绑定等这些的运行结果以及演示如下图：
v-model其它应用演示

7.v-bind

v-bind用来绑定标签上的属性值，包括src，url，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>
    <hr>
    <div id="app">
        <p><img v-bind:src="imgSrc"/></p>
        <p><a :href="webUrl" target="_biank">百度</a></p>
        <hr>
        <div :class="className">1.绑定Class</div>
        <div :class="{classA:isOK}">2.绑定Class中的判断</div>
        <div :class="[classA,classB]">3.绑定Class中的数组</div>
        <div :class="isOK?classA:classB">3.绑定Class中的三元运算符</div>
        <hr>
        <div>
            <input type="checkbox" id="isOK" v-model="isOK"/>
            <label for="isOK">isOK={{isOK}}</label>
        </div>
        <hr>
        <div :style="{color:red,fontSize:font}">5.绑定style属性</div>
        <div :style="styleObject">5.绑定style整个对象</div>
    </div>
    <style>
        .classA {
            color:red;
        }
        .classB {
            font-size: 150%;
        }
    </style>
    <script type="text/javascript">
        var app = new Vue({
            el:'#app',
            data:{
                imgSrc:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1587446420529&di=c4de567967c1c44964c47460f3de1f5a&imgtype=0&src=http%3A%2F%2Fp2.ifengimg.com%2Fweb%2F2017_23%2Ffb591b2c273c135_w300_h300.jpg",
                webUrl:"http://www.baidu.com",
                className:"classA",
                isOK:true,
                classA:"classA",
                classB:"classB",
                red:"red",
                font:"20px",
                styleObject:{
                    color:"green",
                    fontSize:"24px"
                }
            }
        })
    </script>
</body>
</html>

最终实现效果如下：
v-bind演示

图片的地址可以自己找一个短一点的，这里我也是随便找的，上面的代码中通过data中的某个值来判断特定的地址是什么，特定的属性是否要添加上去等等。另外还有一个注意避免踩坑💣💥的点：在Vue中，class样式的属性名不支持-，例如font-size这样的写法是会报错的，必须写成fontSize。

8.v-pre，v-cloak，v-once

先上代码(部分代码，其它的都跟helloworld.html一样，懒得复制了不然文章太长le🙄🙄🙄)：

...
<div id="app">
        <span>{{message}}</span>
        <span v-text="message"></span>
![v-once.gif](https://upload-images.jianshu.io/upload_images/21727303-74ff5eadbca76478.gif?imageMogr2/auto-orient/strip)
        <span v-pre>{{message}}</span>
        <span v-cloak>
            渲染完成后才显示
        </span>
        <div v-once>{{message}}</div>
        <div><input type="text" v-model="message"/></div>
        <div>{{message}}</div>
    </div>
...

页面实现效果如下：
v-once演示

1.v-pre

作用：输出标签中的文本内容，不取data中的值，也就是原模原样输出{{message}}。

2.v-cloak

作用：渲染完成后才显示，不过渲染速度很快这里看不出来，知道原理就行。

3.v-once

作用：只渲染一次，避免后面当改变message时同步发生变化。

偶尔躲躲乌云_0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
Vue内部指令的使用

Vue内部指令1.v-if，v-else2.v-show3.v-for4.v-text,v-html5.v-on6.v-model7.v-bind8.v-pre，v-cloak，v-once1.v-pre2.v-cloak3.v-once1.v-if，v-elsev-if:是vue 的一个内部指令，指令用在我们的html中。v-if用来判断是否加载html的DOM，比如我们模拟一个用户登录状态...
复制链接

扫一扫