Vue.js 创建一个 CNODE 社区

Posted 2021-01-09 小粒旬

Vue 中的内置指令 demo

通过 demo 了解 Vue 中一些常用的内置指令。

涉及到 v-cloack / v-once / 条件循环指令(v-if / v-else-if / v-else) / v-show / 列表遍历渲染 (v-for) / 数组更新、过滤排序 / 方法和事件 (修饰符) 等...

以下是全部的 demo：

JSbin

---

v-cloak

作用：解决初始化慢导致页面闪动的最佳实践（初始化慢时会显示未渲染好的页面，而 v-cloak 则让没有渲染好的部分隐藏起来，渲染好之后再去掉 v-cloak，让页面正常显示）

常与 display：none 搭配

<style>
    [v-cloak]{
        display:none;
    }
</style>
<div v-cloak>{{ msg }}</div>

v-once

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

<div v-once>{{ msg }}</div>

v--if / v--else-if / v--else

条件循环指令：

<div v-if=‘isActive‘>{{ msg }}</div>
<div v-else-if=‘6>3‘>{{ oncedata }}</div>
<div v-else>如果前面两个都是 false，那就显示这个</div>
<button @click=‘changeMsg‘>点我切换</button>

JS:

data:{
    msg:‘this‘,
    oncedata:‘is‘,
    isActive:true
},
methods:{
    changeMsg:function(){
        this.isActive = !this.isActive
    }
}

v-if的弊端 :
Vue 在渲染元素时 ，出于效率考虑，会尽可能地复用已有的元素而非重新渲染， 因
此会出现乌龙
只会渲染变化的元素，也就是说，input元素被复用了

解决方法：提供key值可以来决定是否复用该元素

<div v-if=‘type==="name"‘>
    用户名 ：<input type="text" placeholder="Username" key=‘username‘>
</div>
<div v-else>
    密码 ：<input type="text" placeholder="Password" key=‘password‘>
</div>
    <button @click=‘changeInput‘>点击切换输入栏</button>

JS:

data:{
    type:‘name‘
},
methods:{
    changeInput:function(){
        this.type = (this.type===‘name‘?‘password‘:‘name‘)
    }
}

v-show

作用：控制元素是否显示

<div v-show=‘isActive‘>{{ msg }}</div>

data:{
    isActive:true
}

v-show 和 v-if 的区别

v-show 和 v-if 的作用同样是控制元素的显示，但是：

v-if 是将元素给移除，即 DOM 树中并不会渲染这个元素

v-show 是将元素给隐藏，即 DOM 树中渲染了这个元素，只是改变了 css 的 display 的属性

v-for

列表渲染指令

• 遍历多个对象

<ul>
    <li v-for=‘item in objs‘>{{ item.name}}</li>
</ul>

data:{
    objs:[
        {name:‘Li‘},
        {name:‘Wang‘},
        {name:‘Chen‘}
    ]
}

添加索引：

<ul>
    <li v-for=‘(item,index) in objs‘>{{index}}-{{ item.name}}</li>
</ul>

• 遍历对象属性

直接打印属性的值：

<ul>
    <li v-for=‘value in obj‘>{{ value }}</li>
</ul>

data:{
    obj:{
        name:‘zhangsan‘,
        age:23,
        gender:‘male‘
    }
}

添加键和索引：

<ul>
    <li v-for=‘(value,key,index) in obj‘>{{ index }}-{{ key }}-{{ value }}</li>
</ul>

---

数组更新、过滤和排序

<ul>
    <li v-for=‘value in arr‘>{{ value }}</li>
</ul>

data:{
    arr:[213,345,3465,67,457,6,7,687,]
}

• push() 在末尾添加元素

methods:{
    arrpush:function(){
        this.arr.push(2334)
    }
}

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

methods:{
    arrpop:function(){
        this.arr.pop()
    }
}

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

methods:{
    arrshift:function(){
        this.arr.shift()
    }
}

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

methods:{
    arrunshift:function(){
        this.arr.unshift(234234)
    }
}

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

这个方法接受三个参数：

第一个参数 表示开始操作的位置

第二个参数表示：要操作的长度

第三个为可选参数：

methods:{
    arrsplice:function(){
        this.arr.splice(1,1,2)
    }
}
// 操作数组的下标为 1 的数组成员之后的 1 个数组成员，把他的数值变为 2

• sort() ：排序

methods:{
    arrsort:function(){
        this.arr.sort(function(a,b){
            return a > b
        })
    }
}
// 数组成员由大到小排列

• reverse()

数组翻转

methods:{
    arrreverse:function(){
        this.arr.reverse()
    }
}

注意

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

1. 改变数组的指定项

2. 改变数组长度

解决方法：

set :

改变指定项： Vue.set(app.arr,1,”car”)

splice :

改变数组长度: app.arr.splice(1)

---

方法和事件

基本用法：

记得：如果方法中带有参数，但是你没有加括号，默认传原生事件对象event

data:{
    cout:0
},
methods:{
    handle:function(cout){
        count = count || 1
        this.cout = this.cout + count
    }
}

html:

<button @click=‘handle(4)‘>点击 +4</button>

修饰符：

多用于事件中：

• stop 阻止事件向上冒泡

不然他会执行完点击按钮的事件后，继续执行父元素的事件

正确做法：添加修饰符 stop：

<div @click=‘divClick‘ style=‘background-color:red;width:100px;height:100px‘>
    <button @click.stop=‘buttonClick‘>点击就送</button>
</div>

• prevent 提交事件并且不重载页面

当我们页面中有表单，点击表单提交按钮 submit 时，要阻止页面重载：

<form action=‘‘ @submit.prevent=‘handle‘>
    <button type=‘submit‘>提交表单</button>
</form>

methods:function(){
    handle:function(){
        alert(‘不需重载页面‘)
    }
}

• self 只是作用在元素本身而非子元素的时候调用

<div @click.self=‘divClick‘ style=‘background-color:red;width:100px;height:100px‘>
    <button @click.stop=‘buttonClick‘>点击就送</button>
</div>

• once 只执行一次的方法

<div @click.once=‘changeNum‘>{{ num }}</div>

data:{
    num:0
}
methods:{
    changeNum:function(){
        this.num = this.num + 1
    }
}

还可以使用 enter 等方法监听键盘事件：

<div @enter=‘xxx()‘>{{ num }}</div>

关于 Vue 的一些常用内置指令就整理到这里了，等接触到新的再添加~。