Vue.js的基本指令

基本指令

1. v-cloak

使用场景：页面加载慢而出现闪动的问题。
用法：一般是与display:none；一起使用

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

2. v-once

使用场景：想只渲染组件和元素一次

<span v-cloak v-once>{{msg}}</span>

5.2条件渲染指令

5.2.1 v-if、v-else、v-else-if

用法：必须跟着屁股走

<span v-if="6<3">{{apple}}</span>
    <span v-else-if="6<3">{{banana}}</span>
    <span v-else>{{pineapple}}</span>
</div>

v-if有个弊端
就是vue在渲染页面的时候会偷懒，对相同的元素和组件会进行复用而不是重新渲染

<div  v-if="username">
        用户：<input type="text" placeholder="username">
    </div>
    <div v-else>
        密码：<input type="text" placeholder="password" >
    </div>
    <button @click="toggle">切换</button>

解决方法在元素处加个key

    <div  v-if="username">
        用户：<input type="text" placeholder="username" key="username">
    </div>
    <div v-else>
        密码：<input type="text" placeholder="password" key="password">
    </div>
    <button @click="toggle">切换</button>

v-show

v-show后面跟布尔值

v-show和v-if的区别是：
前者存在于页面中，只是display为none。而后者，为值为false时，不存在于文档中。

v-for指令

遍历数组

<ul>
        遍历一个数组的各项元素
        <li v-for="item in mmmsg">{{item['name']}}</li>
    </ul>
    <hr>
    <ul>
        遍历一个数组的各项元素和序号
        <li v-for="(item,index) in mmmsg">第{{index+1}}个名字是{{item['name']}}</li>
    </ul>
----------
data: {
     mmmsg: [
                {name: 'yejianqiang '},
                {name: 'frank'},
                {name: 'Jack'}
            ]
}

遍历对象

<ul>
        遍历一个对象：value
        <li v-for="value in object">{{value}}</li>
    </ul>
    <hr>
    <ul>
        遍历一个对象：value key index
        <li v-for="(value,key,index) in object">第{{index}}的key是{{key}}，value是{{value}}</li>
    </ul>
    -------
    object: {
                username: '叶建强',
                age: 14,
                school: '广东技术师范学院'
            }

数组的各种方法

push() 从后面添加元素
pop() 删除最后一个元素
shift() 从前面添加元素
unshift() 删除第一个元素
splice()

splice(0,1) // 从0个开始数（包括第0个），删除一个元素
splice(2,3) // 从2个开始数（包括第2个），删除三个元素
splice(0,0,'hello') // 从第0个前面，添加一个元素

sort() // sort里面接受一个函数，函数接受两个参数，前面参数减后面的参数就从小到大排列

sort: function(){
                this.array.sort(function(a,b){
                    return a.length - b.length
                })
            }

reverse() // 把数组顺序颠倒

注意：==有两种数据改变vue是不会重新渲染页面的==

数组中的某一项的值发生改变，如：

this.array[0] = 'car'

解决方法：用Vue提供的Set方法

Vue.set(app.array,1,'car')
// 意思是把app里的array数组中的第1项改为car，这样才会触发渲染

改变数组的长度

如果只是单纯的把array.length改为0，那么这是不会触发渲染的。
应该使用splice方法
如：
splice(0) // 从数组的第0项开始删，即数组的长度等于0
splice(1) // 从数组的第一项开始往后删，即数组的长度等于1

method最好写括号

    <div>你的账户余额为{{value}}</div>
    <button @click="plus(1)">加1</button>
    <button @click="plus(5)">加5</button>
    ------------
    methods: {
            plus: function (value) {
                console.log(value)
                var value = value || 1
                this.value += value
            }
        }

如果没有在标签写括号，那么在methods里传入的是事件本身

阻止冒泡和阻止默认事件

.stop

// 点击儿子会有两个弹窗
<div @click="father">
        <button @click="child">child</button>
    </div>

阻止向上冒泡，相当于原生JS的e.stopPropagation

<div @click="father">
        <button @click.stop="child">child</button>
    </div>

.prevent

阻止默认事件，相当于e.preventDefault,阻止刷新页面

<form action="" @submit.prevent>
        <input type="submit">
    </form>

.self

只能在作用于元素本身，而不作用于子元素时被调用

<div @click.self="father">
        <button @click="child">child</button>
</div>

此时也不会出现冒泡

.once

只执行一次的方法

    <button @click="alert">无限次</button>
    <button @click.once="alert">一次</button>

最后编辑于：2019.03.25 22:13:12