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属性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；

三、列表渲染指令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检测不到:

改变数组的指定项，解决方案是 Vue.set(app.arr,1,”car”); 参数一数组，参数二指定项下标，参数三修改的内容
改变数组长度，解决方案是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()之类的。

stop:阻止单击事件向上冒泡
prevent::提交事件并且不重载页面
self:只是作用在元素本身而非子元素的时候调用
once: 只执行一次的方法，和v-once不一样，v-once是内置指令，代表元素只渲染一次
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中的内置指令

一、基本指令

1、v-cloak

2、 v-once

二、条件渲染指令

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

2、v-show

三、列表渲染指令v-for

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

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

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

五、方法和事件

六、修饰符

bamboo

引用和评论

Oracle exp导出数据【转】

开发插件集合

Vue.js-方法与事件

Vue使用mixins

这个前端神器，竟让滴滴、美团都爱不释手？！

使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据

vue笔记5 vueJS中的内置指令

一、基本指令

1、v­-cloak

2、 v-­once

二、条件渲染指令

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

2、v­-show

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

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

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

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

五、方法和事件

六、修饰符

bamboo

引用和评论

Oracle exp导出数据【转】

开发插件集合

Vue.js-方法与事件

Vue使用mixins

这个前端神器，竟让滴滴、美团都爱不释手？！

使用基于 WebRTC 的 JavaScript API 在浏览器环境里调用本机摄像头

推荐一个国产的 vue 中最好用的高性能表格 vxe-table grid 在线编辑表格，流畅渲染上万条数据

1、v-cloak

2、 v-once

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

2、v-show

三、列表渲染指令v-for

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