Vue-Directives

Posted bubu-sourire

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue-Directives相关的知识,希望对你有一定的参考价值。

  1. v-cloak
  2. v-once
  1. v-if(v-else)
  2. v-show
  1. v-for

 

 

一、基本指令

v-cloak

作用:解决初始化慢导致的页面闪动,常与display:none结合使用

*加载缓慢的情况下,页面会出现如msg,加载完之后才会显示对应的内容,影响用户体验。v-cloak解决了这个问题。

 

v-once

作用:定义它的元素只能渲染一次,后续都不会再渲染

 

例:

<style>
  [v-cloak]: 
    display: none
  

</style>

<div id="app">
  <div v-cloak>msg</div>
  <span v-once>word</span>
  <hr>
  <button @click=‘changeEnglish‘>点击修改</button>
</div>
new Vue(
  el: ‘#app‘,
  data: 
    msg: ‘今天周一‘,
    word: ‘Today is Monday.‘
  ,
  methods: 
    changeEnglish() 
      this.msg = ‘今天周二‘ //中文修改
      this.word = ‘Today is Tuesday‘ //v-once 使得英文不会被修改
    
  
)

 

二、条件渲染指令

v-if(v-else)

v-if后面接的是等号,等号后面接的是布尔值;if true显示if后面的内容,if false显示else后面的额内容。

  • 真正的渲染
  • v-else需要紧跟在v-if后面
  • v-else-if(vue.2.1.0新增)
  • key管理可复用的元素(key唯一,提供key值来决定是否复用该元素)

 

例:点击按钮,用户、密码框切换

<div id="app">
  <template v-if="ok === ‘you‘">
    用户名:<input type="text" value="请输入用户名" key="userName">
  </template>
  <template v-else>
    密码:<input type="password" value="" key="userPass">
  </template>
  <button @click=‘clickChange()‘>点击切换</button>
</div>
new Vue(
  el: ‘#app‘,
  data: 
    ok: ‘you‘
  ,
  methods: 
    clickChange() 
      if (this.ok === ‘you‘) 
        this.ok = ‘‘
       else 
        this.ok = ‘you‘
      
    
  
)

这里如果不加key,会有bug

*用v-for更新已渲染过的列表时,它默认采用的是“就地复用”的原则,也就是如果数据项顺序发生了改变,vue将不是移动DOM元素来匹配数据项的顺序,而是简单复用此处的元素。

*如果想跟踪每个节点的身份,从而重用或重新排列现有元素,可使用key。

*在表单或者选框中,加上key,可以使得原先填写的内容或勾选的选项,虽有顺序或切换的变化,但是原先填写的内容或勾选处始终跟着原来对应的项。

 

v-show

  • 简单的切换display属性
  • v-show=‘条件’  当条件为true时,则内容显现
  • v-show不支持template语法
  • v-show不支持v-else
<span v-show=‘3>1‘>num</span>

 

总结:

v-if

  • 当条件不成立时,不会渲染
  • 切换开销较大,适合不太变化的场景
  • 实时渲染:页面显示,元素渲染;不显示,元素移除(切换用户、密码的例子可以看出,当从用户切换到密码时,页面中用户代码会被移除)

v-show

  • 无论成不成立都会渲染
  • 首次渲染开销较大,但切换开销较小,因此适合经常变化的场景
  • 只是改变了display的属性,元素会一直在页面中

应用:

  • 渲染的结果根据时间而变化,推荐v-if
  • 频繁切换页面推荐v-show

 

三、列表渲染指令

v-for

应用:

  • 当需要将一个数组遍历或枚举一个对象属性的时候循环显示时,就会用列表渲染指定v-for。

  • v-for写在要遍历的元素上

 

两种使用场景:

  • 遍历多个对象

遍历多个对象,遍历的一定是数组

这里的fruit值的是  name:‘banana‘ ...

<div id="app">
  <ul>
    <li v-for=‘fruit in fruits‘>fruit.name</li>
  </ul>
</div>
new Vue(
  el: ‘#app‘,
  data: 
   fruits:[
   name:‘banana‘,
   name:‘apple‘,
   name:‘orange‘
   ]
  
)

 

带索引的写法

<div id="app">
  <ul>
    <li v-for=‘(fruit,index) in fruits‘>index---fruit.name</li>
  </ul>
</div>

 

  • 遍历一个对象的多个属性
<div id="app">
  <ul>
    <li v-for=‘value in fruits‘>value</li>
  </ul>
</div>
new Vue(
  el: ‘#app‘,
  data: 
   fruits:
   a:‘banana‘,
   b:‘apple‘,
   c:‘orange‘
   
  
)

 

带value key index的写法(v--k--i   顺序不可变)

<div id="app">
  <ul>
    <li v-for=‘(value,key,index) in fruits‘>第index个是value,键是key</li>
  </ul>
</div>
new Vue(
  el: ‘#app‘,
  data: 
   fruits:
   a:‘banana‘,
   b:‘apple‘,
   c:‘orange‘
   
  
)

 

四、数组更新检测

<div id="app">
  <div v-for="fruit in arr">fruit</div>
</div>
new Vue(
  el: ‘#app‘,
  data: 
    arr: [‘apple‘, ‘banana‘, ‘orange‘]
  
)

以下代码均在此代码基础上修改

 

  • 变异方法

.push()  往数组的末尾添加一个元素,返回的是添加完元素后整个数组的长度

.pop()  将数组的最后一个元素删除,返回的是删除的那个元素

.shift()  将数组的第一个元素删除,返回的是那个删除的元素

.unshift()  在数组的第一个元素位置添加一个元素,返回的是添加完元素后整个数组的长度

.splice()  

含三个参数:

第一个参数表示开始操作的位置(索引)

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

第三个参数表示可选参数(可以添加一个元素,但是这个元素会自动跳到数组索引为0的位置上)

.sort()  给数组排序

.reverse()  翻转数组

<div id="app">
  <div v-for="fruit in arr">fruit</div>
  <button @click=‘num1‘>点击排序</button>
  <button @click=‘num2‘>点击翻转</button>
</div>
var app = new Vue(
  el: ‘#app‘,
  data: 
    arr: [‘apple‘, ‘banana‘, ‘pizza‘],
  ,
  methods: 
    num1(a, b) 
      this.arr.sort((a, b) => 
        return a.length - b.length
      )
    ,
    num2()
    this.arr.reverse()
    
  
)

 

  • 修改数组的某一项内容

Vue.set(该数组,要修改的那一项的索引,替换的内容)

Vue.set(app.arr,1,"mango")

 

  • 修改数组的长度

.splice(索引) 从哪一项开始删除后面的内容,包括这一项

app.arr.splice(1) //["banana","pizza"] 页面上还有apple 

 

  • 重塑数组(不会改变原来的数组,而是返回一个新的数组)

.filter()过滤

matchpp
computed: 
    matchpp() 
      return this.arr.filter(function(pro) 
        return pro.match(/pp/)
      )
    
  

 

.concat()  合并

......
matchpp() 
      return this.arr.concat(‘water‘,‘juice‘) 
    //[ "apple", "banana", "pizza", "water", "juice" ]
    
......

 

.slice(开始索引,结束索引)  返回选定的元素

......
matchpp() 
      return this.arr.slice(1,2) //[ "banana" ]
    
......

 

五、方法与事件

例:点击按钮数字加1

<div id="app">
  count
  <button @click=‘add1(1)‘>点击加1</button>
</div>
new Vue(
  el: ‘#app‘,
  data: 
    count: 0
  ,
  methods: 
    add1() 
      this.count += 1
    
  ,
  // addNum(count) 
  // count = count || 1
  // this.count += count
  // 
)

*如果方法中带有参数,但是调用时没有加括号,默认传原生事件对象event

 

六、修饰符

.stop

阻止单击事件向上冒泡

<div id=‘app‘>
  <div @click=‘divClick‘ style=‘width:100px;height:100px;background:skyblue‘>
    <button @click.stop=‘btnClick‘>点击</button>
  </div>
</div>
new Vue(
  el: ‘#app‘,
  methods: 
    divClick() 
      alert(‘div被点击了‘)
    ,
    btnClick() 
      alert(‘btn被点击了‘)
    
  
)

 

.prevent

提交事件并且不重载页面

<div id=‘app‘>
  <form action="" @submit.prevent=‘hangle‘>
    <button type=‘submit‘>提交</button>
  </form>
</div>
new Vue(
  el: ‘#app‘,
  methods: 
    hangle() 
      alert(‘sub提交‘)
    
  
)

 

.self

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

<div id=‘app‘>
  <div @click.self=‘divClick‘ style=‘width:100px;height:100px;background:skyblue‘>
    <button @click=‘btnClick‘>点击</button>
  </div>
</div>

 

.once

只执行一次

<button @click.once=‘aaa‘>这个按钮只能执行一次哦</button>

 

可以监听键盘事件:

<input @keyup.13 = ‘submitMe‘>
<input @keyup.enter = ‘submitMe‘>
submitMe()
    alert(‘enter被按了‘)
    

*vue提供了一些如enter,可以直接使用

 

以上是关于Vue-Directives的主要内容,如果未能解决你的问题,请参考以下文章