专栏首页bamboo前端学习记录vue笔记5 vueJS中的内置指令

vue笔记5 vueJS中的内置指令

一、基本指令

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> 

二、条件渲染指令

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 在渲染元素时 ,出于效率考虑,会尽可能地复用已有的元素而非重新渲染,只会渲染变化的元素。 因此会出现乌龙

解决方案 加key,唯一,提供key值可以来决定是否复用该元素

2、v­-show

只改变了css属性displayv-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;

三、 列表渲染指令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>

结果

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

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

• push() 在末尾添加元素 • pop() 将数组的最后一个元素移除 • shift() 删除数组的第一个元素 • unshift():在数组的第一个元素位置添加一个元素 • splice() :可以添加或者删除函数—返回删除的元素 三个参数:

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

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Object.freeze( ) 阻止Vue无法实现 响应式系统

    做了一个vue项目,总是边百度边写,知识体系不能系统起来,准备在浏览下vue.js官网基础知识。

    honey缘木鱼
  • Vue 自定义弹出框组件(类似淘宝选择规格)

    demo下载地址:https://github.com/dt8888/selectRulesAlter

    honey缘木鱼
  • 35 个最好用的 Vue 开源库!送与每一位开发者

    无论是开发新手还是经验丰富的老手,我们都喜欢开源软件包。对于开发者来说,如果没有这些开源软件包,很难想象我们的生活会变得多么疲惫不堪,而且靠咖啡度日也会成为家常...

    一墨编程学习
  • php工程狮感知的前端工作流程

    最近做了一些总结,之前都是迷迷糊糊,搞不清楚前端之前的相关定位。好好梳理了一下。错误之处请各位指正。

    用户3160618
  • Vue的生命周期函数和beforeRouteEnter()/beforeRouteLeave()函数

    用Vue开发了一个项目,虽然项目做完了,但心中却没有一个完整的知识体系,不能称之为会Vue,也许只能称之为了解,这段时间闲剩下来,找到Vue.js 的官网,简直...

    honey缘木鱼
  • 记录vue组件el-upload踩过的几个坑

    星痕
  • Vue cli安装命令(笔记)

    用户3056046
  • vue配合elementUI开发中...( 值与址的问题?)

    但是,数据是在data里构造的,但是业务需求里并不知道表格的数据,只是知道表格的列的内容,即 data里的contents,

    天天_哥
  • Vue---导航守卫使用方法详解

    正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。

    半指温柔乐
  • 快速配置webpack多入口脚手架

    当我们基于vue开发单个项目时,我们会init一个vue-cli,但当我们想在其他项目里共用这套模板时,就需要重新init一个,或者clone过来,这非常不方便...

    吴裕超

扫码关注云+社区

领取腾讯云代金券