vueJS中的内置指令

1、基本指令

1.1、v-cloak

v-cloak作用：解决初始化慢导致页面闪动的指令,简单点来说防止页面加载时出现 vue.js 的变量名而设计的，这个指令通常与display：none进行结合使用。

（1）、 v-cloak 的用法：

 <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        [v-cloak] {
            display: none;  //结合使用
        }
    </style>
    </head>
    <body>
        <div id="app">
            <p v-cloak>{{msg}}</p>    //vue.js的变量名
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    msg: "我是某某"
                }
            })
        </script>
</body>

但有时添加完毕后仍有部分变量会显示，通过控制台查看，原来是 v-cloak 的display属性被优先级别高的样式覆盖所导致，处理方案是可以添加 !important ，新css样式如下：

[v-cloak] {
  display:none !important;
}

1.2、v-once

定义它的元素和组件只渲染一次

（1）、v-once的用法：

<div id='app'>
    <span>{{oncedata}}</span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",    //注意id对应的要加个#
        data: {
            oncedata: "我想吃苹果"
        }
    })
</script>

通过浏览器控制台修改app.oncedata="我想运动"，发现不能重新渲染，说明once属性只能渲染一次。

2、条件渲染指令

2.1、 v-if, v-else-if ,v-else

条件判断语句，<div v-if='6<3'>{{apple}}</div>，注意v-if后面接的是等号（=）,等号内容是一个布尔值。其中v-if, v-else-if ,v-else三者可以结合使用。

（1）、 v-if, v-else-if ,v-else的用法：

<div id='app'>
    <!-- 判断6<3的真假，返回一个布尔值,如为真则执行
    该语句后面else的表达式不执行，否则跳到一条表达式 -->
    <div v-if='6<3'>{{apple}}</div>   
    <div v-else-if='9>5'>{{banana}}</div>
    <div v-else>{{peach}}</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",    
        data: {
            apple:'apple',
            banana:'banana',
            peach:'peach'
        }
    })
</script>

实例如下：

<div id='app'>
    <div v-if="type==='name'">
        用户名：<input type='text' placeholder="请输入用户名" key='123'>
    </div>
    <div v-else>
        密码：<input type='text' placeholder="请输入密码" key='456'>
    </div>
    <button v-on:click="switchType">点我，切换</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            type: "name"  //初始化用户名输入框值
        },
        methods: {
            switchType: function () {
                // 三元运算符优先级要高于赋值预算符
                this.type = (this.type === 'name' ? 'password' : 'name')
            }
        }
    })
</script>

v-if的弊端 :Vue 在渲染元素时，出于效率考虑，会尽可能地复用已有的元素而非重新渲染，因此会出现乌龙只会渲染变化的元素，也就是说，input元素被复用了。
解决方法：加key，提供key值可以来决定是否复用该元素，key值不重复就行，值随意定义。

2.2、v-show

条件判断语句，<p v-show='9>5'>我被渲染了</p>，注意v-show后面接的是等号（=）,等号内容是一个布尔值。v-show的用法几乎和v-if用法一样

 <div id='app'>
   <p v-show='9>5'>我被渲染了</p>
</div>

v-if和v-show的具体比较：
1、v-if: 实时渲染：页面显示就渲染，不显示。我就给你移除
2、v-show: v-show的元素永远存在也页面中，只是改变了css的display的属性

举个例子，当你的页面需要实时渲染的效果，就要用到v-if指令，但当你只需要频繁切换页面的话，就用v-show指令即可。

3 列表渲染指令v-for

当需要将一个数组遍历或枚举一个对象属性的时候循环显示时，就会用到列表渲染指令 v-for。
两种使用场景：
1、遍历多个对象
2、遍历一个对象的多个属性

（1）、遍历多个对象

用法：<li v-for='value in VueMethods'>{{value.name}}</li>

v-for一定是写在要遍历的元素上（如要遍历列表的对象，就要写在li标签上）v-for后接等号，写法类似于item in items,其中value是变量，VueMethods是遍历的数组，注意遍历多个对象一定是遍历的数组。

示例1：

<div id='app'>
   <ul>
       <li v-for='value in VueMethods'>{{value.name}}</li>
   </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            VueMethods:[
                {name:'多思考'},
                {name:'多练习'},
                {name:'多做题'}
            ]
        },
       
    })
</script>

效果图

带索引的写法：括号的第一个变量，代表遍历对象,第二个是index

示例2：

<div id='app'>
    <!-- 带索引的写法：括号的第一个变量，代表遍历对象,第二个代表index -->
    <ul>
        <li v-for='(value,index) in VueMethods'>{{index}}--{{value.name}}</li>
    </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            VueMethods: [
                { name: '多思考' },
                { name: '多练习' },
                { name: '多做题' }
            ]
        },
    })
</script>

效果图

（2）、遍历一个对象的多个属性

示例1：

<div id='app'>
    <span v-for='value in nvshen'> {{value}} </span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            nvshen: {
                girl1: '李冰冰',
                girl2: '范诗诗',
                girl3: '赵婷婷'
            }
        },
    })
</script>

效果图

带索引的写法：括号的第一个是变量，代表遍历对象,第二个是key值，第三个是index，顺序不能弄乱。

<div id='app'>
    <span v-for='(value,key,index) in nvshen'> 第{{index}}女神
    --{{key}}--{{value}} </span>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            nvshen: {
                girl1: '李冰冰',
                girl2: '范诗诗',
                girl3: '赵婷婷'
            }
        },
    })
</script>

效果图

4、数组更新，过滤与排序

改变数组的一系列方法：
• push（）在末尾添加元素
• pop（）将数组的最后一个元素移除
• shift（）删除数组的第一个元素
• unshift（）在数组的第一个元素位置添加一个元素
• splice() ：可以添加或者删除函数—返回删除的元素

splice三个参数：
第一个参数表示开始操作的位置；
第二个参数表示：要操作的长度（如果是0表示要添加，否则就是删除操作）
第三个为可选参数（第二个参数是0，第三参数就是要添加内容）

• sort（）：排序

<div id="app">
    <div v-for='study in arr'>{{study}}</div>
    <button @click='sortArr'>点我排序</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            arr: ['book', 'pen', 'pencil']
        },
        methods: {
            sortArr: function () {
                this.arr.sort(function (a, b) {
                    return a.length - b.length
                })
            }
        }
    })
</script>

JS 数组sort方法升序是a-b详解点击查看
• reverse（）：翻转

<div id="app">
    <div v-for='study in arr'>{{study}}</div>
    <button @click='reverseArr'>点我翻转</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            arr: ['book', 'pen', 'pencil']
        },
        methods: {
            reverseArr:function(){
                this.arr.reverse()
            }
        }
    })
</script>

两个数组变动vue检测不到:

改变数组的指定项（常规做法是检测不到，如下例）

<body>
<div id="app">
    <div v-for='study in arr'>{{study}}</div>
    <button @click='changeOne'>改变数组指定项</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            arr: ['book', 'pen', 'pencil']
        },
        methods: {
            changeOne: function () {
                this.arr[0] = 'car'   //Vue这样是不能实现改变数组的指定项
            },
        }
    })
</script>
</body>

解决方法：改变指定项：Vue.set(app.arr,1,”car”)--Vue相当于全局变量，利用set方法，参数1是对象，参数2是改变位置下标，参数3是替换内容

<body>
<div id="app">
    <div v-for='study in arr'>{{study}}</div>
    <button @click='changeOne'>改变数组指定项</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            arr: ['book', 'pen', 'pencil']
        },
    })
    Vue.set(app.arr,1,'car')  //Vue相当于全局变量
</script>

</body>

改变数组长度（常规做法是检测不到，如下例）

<body>
<div id="app">
    <div v-for='study in arr'>{{study}}</div>
    <button @click='changeArrLength'>改变数组长度</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            arr: ['book', 'pen', 'pencil']
        },
        methods:{
        changeArrLength:function(){
            this.arr.length=1
        }
    }
    })
</script>
</body>

解决方法：
上述例子中的this.arr.length=1改成this.arr.splice(1)数组长度将变成1，或者在浏览器控制台调试代码为app.arr.splice(1)

• filter（）：过滤
需求：找到数组中含有字符串OO的项

<body>
<div id="app">
    {{matchOO}}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            arr: ['book', 'pen', 'pencil']
        },
        computed: {
            matchOO: function () {
                return this.arr.filter(function (book) {
                    return book.match(/oo/)
                })
            }
        }
    })
</script>
</body>

match() 方法可在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

5.5 方法和事件

1 、基本用法
v-on绑定的事件类似于原生的onclick等写法

<body>
<div id="app">
    点击次数：{{count}}
    <button @click='handle()'>每次点击加1</button>
    <button @click='handle(8)'>每次点击加8</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            count: 0
        },
        methods: {
            handle: function (count) {  //方法带有参数count
                count = count || 1;
                this.count += count
            }
        }
    })
</script>
</body>

注意如果方法中带有参数，但是你没有加括号，默认传原生事件对象event，所以当方法带有参数时要带上括号。

2、修饰符

（1）、stop:阻止单击事件向上冒泡

<body>
<div id="app">
    <div @click='divButton' style="width:100px;height:100px;background-color:blue">
        <button @click.stop='btn'>button</button>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            divButton: function () {
                alert('div被点击了')
            },
            btn: function () {
                alert('button被点击了')
            },
        }
    })
</script>
</body>

当我们点击子元素btn时候，如果没有加上stop，事件就会向上冒泡导致父元素也会出现弹框。我们可以通过添加和删去stop来测试具体效果。

（2）、self:只是作用在元素本身而非子元素的时候调用

<body>
<div id="app">
    <div @click.self='divButton' style="width:100px;height:100px;background-color:blue">
        <button @click='btn'>button</button>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            divButton: function () {
                alert('div被点击了')
            },
            btn: function () {
                alert('button被点击了')
            },
        }
    })
</script>
</body>

self一定是写在父元素身上，当点击父元素还是子元素都会只作用自身，不会发生向上冒泡情况。

（3）、prevent:提交事件并且不重载页面

<body>
<div id="app">
    <form action="" @submit.prevent>
        <button type='submit'>提交表单</button>
    </form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        },
    })
</script>
</body>

效果图

当我们表单提交时不想，进行刷新页面，就需要添加prevent，因为是不想表单刷新，所有应该写在form标签中。

（4）、once: 只执行一次的方法

<body>
<div id="app">
    <button @click='onceButton'>多次点击</button>
    <button @click.once='onceButton'>一次点击</button>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            onceButton: function () {
                alert('可以进行多少次点击')
            },
        }
    })
</script>
</body>

image.png

点击多次点击按钮，可以一直出现弹框，点击一次点击按钮（添加了once）只出现一次，后面再次点击就会起作用了。

（5）、监听鼠标事件

<body>
<div id="app">
    <input @keyup.13='submitMe'>   //13就是代表enter键，常规写法
    <input @keyup.enter='submitMe'>  //vueJS提供便捷方式写法
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
        },
        methods: {
            submitMe: function () {
                alert('你按下了enter键')
            }
        }
    })
</script>
</body>

当我们按下enter键，就能监听该事件发生了。但是vueJS给我们提供很多便捷方式写法如直接就可以.enter、.tab 、.delete等这样写法就行。

最后编辑于：2021.03.16 16:48:11

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 217,509评论 6赞 504
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,806评论 3赞 394
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 163,875评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,441评论 1赞 293
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,488评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,365评论 1赞 302
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,190评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,062评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,500评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,706评论 3赞 335
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,834评论 1赞 347
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,559评论 5赞 345
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,167评论 3赞 328
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,779评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,912评论 1赞 269
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,958评论 2赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,779评论 2赞 354

vueJS中的内置指令

1、基本指令

1.1、v-cloak

1.2、v-once

2、 条件渲染指令

3 列表渲染指令v-­for

4、 数组更新，过滤与排序

5.5 方法和事件

推荐阅读更多精彩内容

2、条件渲染指令

3 列表渲染指令v-for

4、数组更新，过滤与排序