vue笔记5 vueJS中的内置指令

栏目: JavaScript · 发布时间: 6年前

内容简介：v­-cloak一般与display：none进行结合使用作用：解决初始化慢导致页面闪动的最佳实践定义它的元素和组件只渲染一次，再次修改元素值，不会重新渲染了

一、基本指令

1、v­-cloak

v­-cloak一般与display：none进行结合使用

作用：解决初始化慢导致页面闪动的最佳实践

2、 v-­once

定义它的元素和组件只渲染一次，再次修改元素值，不会重新渲染了

<style>
        [v-cloak]{
            display: none;
        }
    </style>
</head>
<body>
 <div id="app">
    v-cloak：解决初始化慢导致页面闪动<br>
    <!-- 如果网速比较慢的情况，先渲染'{{msg}}'，等一下再出现msg的内容。用v-clock，会等vue实例编译结束后再去渲染vue -->
   <p v-cloak > {{msg}} </p>
   <hr>
   v-once:<br>
  <span v-once> {{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',
        data:{
            msg:'加油我是最帅的程序员',
            oncedata:'也是最有钱的'
        }
    })
</script>

vue笔记5 vueJS中的内置指令

二、条件渲染指令

1、v­-if, v­-eles­-if ,v-­else

例子1

<div id="app">
        <!-- v-if后接的是等号：等号后的内容必须是布尔值 -->
        <p v-if ="6<3" >{{apple}}</p>
        <p v-else-if="9>5"> {{pineapple}}</p>
        <p v-else> {{banana}}</p>
</div>
 var app=new Vue({
        el:'#app',
        data:{
            apple:'apple',
            banana:'banana',
            pineapple:'pineapple'
        }
    })

结果 ：显示pineapple

如果v-if条件成立，v-else和v-else-if都不会执行显示，v-if不成立，再依次执行v-else-if。

例二

实现需求：点击按钮，实现用户名输入框和密码输入框的切换

demo 
<div id="app2">
        <!-- v-if的实例用法:对不想要其复用的元素，加一个唯一的key值 -->
        需求：点击按钮，实现用户名输入框和密码输入框的切换
        <div v-if ="type==='name'">
            用户名： <input type="text" placeholder="请输入用户名" >
        </div>
        <div v-else>
            密码： <input type="text" placeholder="请输入密码" >
        </div>
        <button v-on:click="toggleType">点击切换</button>
    </div>
  
 <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script> 
<script>

    var app2=new Vue({
        el:'#app2',
        data:{
            type:'name'
        },
        methods:{
            toggleType:function(){
               this.type= ( this.type==='name'?'password':'name')
            }
        }
    })
</script>

但是结果出现一个问题，我们在用户名内输入值后切换密码输入框，用户名的值没有清理

vue笔记5 vueJS中的内置指令

vue笔记5 vueJS中的内置指令

原因：

Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染，只会渲染变化的元素。 因此会出现乌龙

解决方案

加key，唯一，提供key值可以来决定是否复用该元素

2、v­-show

只改变了css属性display， v-show ="true/false"和v-if用法差不多 ，但是v­-if和v­-show的比较：

  • v­-if:实时渲染：页面显示就渲染，不显示。我就给你移除
  • v­-show:v­-show的元素永远存在也页面中，只是改变了css的display的属性
<div id="app3">
        v-show的用法和v-if差不多:是否显现，取决于布尔值。
        v-show和v-if的差别：
        v-if是实时渲染，页面显示就渲染，页面不显示，就移除该dom结构
        v-show的元素永远存在于页面，只是改变了css的display的属性
        需要实时渲染用v-if，多次切换用v-show
        <p v-show ="9>a">我被渲染了</p>
    </div>
        var app3=new Vue({
        el:'#app3',
        data:{
            a:3
        }
    })

设置a的值，v-show不显示，但发现v-show只是设置display：none；

vue笔记5 vueJS中的内置指令

三、 列表渲染指令v­-for

v-for用法一：遍历多个对象

  • 不带索引
  • 带索引的用法，注意顺序先是item元素，再是index

v-for用法二：遍历一个对象内多个相同的属性

  • 不带索引
  • 带value，key，index，注意顺序
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        v-for的用法:v-for一定是写在要遍历的元素，v-for后接等号<br>
        (1)遍历多个对象<br>
        学好vue的方法是<br>
        <ul>
            <li v-for ="vueMth  in vueMethods">{{vueMth.name}}</li>
            <!-- vueMth代表是 vueMethods里面的变量，vueMethods是要遍历的数组，类似于item in items -->
        </ul>
        <ul>
            <!-- 带索引的写法，带括号（），第一个参数代表的item，第二个参数的是对象item下标 index-->
            <li v-for ="(vueMth,index) in vueMethods">{{index}}---{{vueMth.name}}</li>
        </ul>
        <hr>
        （2）遍历一个对象的多个属性
         <span v-for=" value in nvshen"> {{ value}}</span><br>
         拿到value，key，index的写法, value是对象的值(高圆圆)，key对象的属性（girl1），index是对象的下标（1，2，3，4）
         <div v-for="(value,key,index) in nvshen ">第{{index}}个女神：{{key}}: {{value}}</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:{
            //每个对象对应一个li
          vueMethods:[
              {name:'多思考'},
              {name:'多练习'},
              {name:'多听课'}
          ],
          nvshen:{
              girl1:'高圆圆',
              girl2:'新垣结衣',
              girl3:'佐佐木希',
              girl4:'天海佑希',
          }
        }
    })
  
</script>  
</body>
</html>

结果

vue笔记5 vueJS中的内置指令

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

1、改变数组的基础方法：

• push() 在末尾添加元素

• pop() 将数组的最后一个元素移除

• shift() 删除数组的第一个元素

• unshift（）：在数组的第一个元素位置添加一个元素

• splice() ：可以添加或者删除函数—返回删除的元素

三个参数：

  • 第一个参数 表示开始操作的位置
  • 第二个参数表示：要操作的长度
  • 第三个为可选参数：

vue笔记5 vueJS中的内置指令

vue笔记5 vueJS中的内置指令

vue笔记5 vueJS中的内置指令

vue笔记5 vueJS中的内置指令

2、举例说明sort，reverse，改变数组指定项和长度

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

  1. 改变数组的指定项，解决方案是 Vue.set(app.arr,1,”car”); 参数一数组，参数二指定项下标，参数三修改的内容
  2. 改变数组长度，解决方案是app.arr.splice(1),代表从下标为1的元素开始剪切掉，原数组发生变化

过滤：filter

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <div v-for="study in arr"> {{ study }}</div>
        <button @click="sortArr">点击排序</button>
        <button @click="reverseArr">点击翻转</button>
        <hr>
        <button v-on:click="changeOne">改变数组的指定项</button>
        <hr>
        <button v-on:click="changeArrLength">改变数组的长度</button>
        <hr>
        <button v-on:click="pop">数组后方去除</button>
        <hr>
        {{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']
        },
        methods:{
            sortArr:function(){
                this.arr.sort(function(a,b){
                    return a.length- b.length
                })
            },
            reverseArr:function(){
                this.arr.reverse()
            },
            changeOne:function(){
                // this.arr[0]='car'  //在vue中直接改变数组指定项，vue不能检测到。解决方法是vue提供了一个set方法，
                Vue.set(app.arr,1,'car') //第一个参数就是选定要修改的元素，第二个是选定元素的下标，第三是要替换的内容
            },
            changeArrLength:function(){
                this.arr.length=1   //在vue中直接改变数组长度，vue也不能检测到，解决方法用splice
                this.arr.splice(3)
            },
            pop:function(){
                this.arr.pop()
            }
        },
        computed:{
            matchoo:function(){
                return this.arr.filter(function(book){
                    return book.match(/e/);  //目的是通过计算属性，返回arr数组内符合要求的元素
                })
            }
        }
    })
  
</script>  
</body>
</html>

五、方法和事件

v-­on绑定的事件类似于原生 的onclick等写法。主要是绑定事件时，还传递了参数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    </style>
</head>
<body>
    <div id="dateApp">
        点击次数：{{count}}
        <button @click="handle()">点击每次加一</button>
        <button @click="handle(8)">点击每次加八</button>
    </div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>    
<script>
  
    var app =new Vue({
        el:"#dateApp",
        data:{
           count:0
        },
        methods:{
            handle:function (countnum) {
                countnum = countnum || 1
                this.count +=countnum 
            }
            
        }
    })
   
</script>
</body>
</html>

六、修饰符

Vue.js 为 v-on 提供了 事件修饰符，通过由点(.)表示的指令后缀来调用修饰符。有点类似于原生js内event对象的属性，如e.preventDefault()和e.stopPropagation()之类的。

  1. stop:阻止单击事件向上冒泡
  2. prevent::提交事件并且不重载页面
  3. self:只是作用在元素本身而非子元素的时候调用
  4. once: 只执行一次的方法，和v-once不一样，v-once是内置指令，代表元素只渲染一次
  5. vuejs监听键盘事件：
如用keyup事件监听按键<input @keyup.13 ="submitMe">

（1）keyup后面可以接指定的keyCode码，如13对应enter。 查看详细keycode

（2）但是记keycode码比较不便， Vue 为最常用的按键提供了别名 ：

enter tab delete esc space up down left right

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        stop的用法<br>
        <div @click="divClick" style="background: blue;border:1px solid black;width: 100px;height:100px;">
            <button @click.stop="btnClick">点击</button>
            <!-- 停止向上冒泡 -->
        </div>
        prevent的用法，每次提交表单都会重载(刷新)页面,用prevent阻止提交表单的重载<br>
        <form action="#" @click.prevent="handle">
            <button type="submit" >提交表单</button>
        </form>
        self的用法，只作用于元素本身而非子元素的时候调用
        <div @click.self="divClick" style="background: blue;border:1px solid black;width: 100px;height:100px;">
            <button @click="btnClick">点击</button>
        </div>
        once的用法，只执行一次<hr>
        <button @click="onceMethod">执行无限次</button>
        <button @click.once="onceMethod">执行一次</button>
        <hr>
        可以监听键盘事件
        <input type="text" @keyup.esc="submitEsc"  placeholder="您按下了Esc键">
        <input type="text" @keyup.space="submitSpace" placeholder="您按下了Space键">
        <input type="text" @keyup.delete="submitDelete"  placeholder="您按下了Delete键">
        <input type="text" @keyup.up="submitUp" placeholder="您按下了Up键">
        <input type="text" @keyup.down="submitDown" placeholder="您按下了Down键">
        <input type="text" @keyup.right="submitRight" placeholder="您按下了Right键">
        <input type="text" @keyup.left="submitLeft" placeholder="您按下了Left键">
        <input type="text" @keyup.enter="submitMe" placeholder="您按下了enter键">
        <input type="text" @keyup.tab="submittab" placeholder="您按下了tab键">
    </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:{
            divClick:function(){
                alert('div被点击了')
            },
            btnClick:function(){
                alert('btn被点击了')
            },
            handle:function(){
                alert('我不重载')
            },
            onceMethod:function(){
                alert('执行多少次') 
            },
            submitMe:function(){
                alert('您按下了enter键')
            },
            submittab:function(){
                alert('您按下了tab键')
            },
            submitEsc:function(){
                alert('您按下了Esc键')
            },
            submitSpace:function(){
                alert('您按下了Space键')
            },
            submitDelete:function(){
                alert('您按下了Delete键')
            },
            submitUp:function(){
                alert('您按下了Up键')
            },
            submitDown:function(){
                alert('您按下了Down键')
            },
            submitRight:function(){
                alert('您按下了Right键')
            },
            submitLeft:function(){
                alert('您按下了Left键')
            }

        }
    })
</script>       
</body>
</html>

以上所述就是小编给大家介绍的《vue笔记5 vueJS中的内置指令》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍
Think Python

Think Python

Allen B. Downey / O'Reilly Media / 2012-8-23 / GBP 29.99

Think Python is an introduction to Python programming for students with no programming experience. It starts with the most basic concepts of programming, and is carefully designed to define all terms ......一起来看看 《Think Python》 这本书的介绍吧!

码农工具
在线进制转换器
在线进制转换器

各进制数互转换器

MD5 加密
MD5 加密

MD5 加密工具

  • New
  • 文章
  • 话题
  • 教程
    • 关注 码农网 公众号
    版权所有，保留一切权利！© 2018-2026 码农网 粤ICP备17054400号-3