当前位置： 移动技术网 > IT编程>开发语言>JavaScript > Vue 2.6 + 补漏

Vue 2.6 + 补漏

2019年06月15日  | 移动技术网IT编程  | 我要评论

vue 2.6 + 补漏

指令

动态参数

<a v-bind:[attributename]="url"> ... </a>
<a v-on:[eventname]="dosomething"> ... </a>

如果你的 vue 实例有一个 data 属性 attributename，其值为 "href"，那么这个绑定将等价于 v-bind:href。

约束

<!-- 这会触发一个编译警告 -->
<a v-bind:['foo' + bar]="value"> ... </a>

<!-- 在 dom 中使用模板时这段代码会被转换为 `v-bind:[someattr]` -->
<a v-bind:[someattr]="value"> ... </a>

计算属性和侦听器

计算属性

计算属性缓存 vs 方法

为什么计算属性有缓存?

<p>reversed message: "{{ reversedmessage() }}"</p>
// 在组件中
methods: {
  reversedmessage: function () {
    return this.message.split('').reverse().join('')
  }
}

可以在模板中直接使用methods中的方法
计算属性是基于它们的响应式依赖进行缓存的

  • 使用methods 访问reversedmessage() ，每一次都会执行一遍
  • 使用computed 访问reversedmessage() ，如果内部依赖的message没有变化，不会执行内部逻辑，会返回上一次计算的结果

注意：计算属性依赖的数据必须是响应式数据（如data内定义的数据）

计算属性 vs 侦听属性

  • 计算属性 依赖变化 依赖数据变化才执行函数逻辑

  • 侦听器 自身变化 自身数据变化才执行逻辑

    计算属性的 setter

    计算属性默认还有getter

computed: {
  fullname: {
    // getter
    get: function () {
      return this.firstname + ' ' + this.lastname
    },
    // setter
    set: function (newvalue) {
      var names = newvalue.split(' ')
      this.firstname = names[0]
      this.lastname = names[names.length - 1]
    }
  }
}

现在再运行 vm.fullname = 'john doe' 时，setter 会被调用，vm.firstname 和 vm.lastname也会相应地被更新。

侦听器

数据变化时执行异步或开销较大的操作时使用

 watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    foo: function (new, old) {
   //...
    },
     list:{
       handler:function(){
       },
         deep:true 
       // 如果list是个数组或对象，改变某一项或属性都会 深度检测到
     }
  },

class和style

class

对象用法

<div class="static" v-bind:class="{ active: isactive, 'text-danger': haserror }"></div>

注意前面已经有class了 
isactive 是bl 值，
也可以直接在data或者计算属性里写 

数组用法

<div v-bind:class="[isactive ? activeclass : '', errorclass]"></div>

or

<div v-bind:class="[{ active: isactive }, errorclass]"></div>

 用在组件上

会被加到组件根元素上

<my-component class="baz boo"></my-component>

<!-- class="之前的 baz boo" -->

style

 对象用法

<div v-bind:style="{ color: activecolor, fontsize: fontsize + 'px' }"></div>

可以直接在data里写或者计算属性也可以
vue-js 可以自动加前缀 如transform 
注意 {直接写，字符串} 不管是在template还是data里 

条件渲染

v-if

2.1 新增

<div v-if="type === 'a'">
  a
</div>
<div v-else-if="type === 'b'">
  b
</div>
<div v-else-if="type === 'c'">
  c
</div>
<div v-else>
  not a/b/c
</div>

key 

vue 会尽可能高效地渲染元素，会复用一些元素（同一dom，不同数据）
使用 key 添加唯一标识，阻止复用

v-show

v-show 只是控制 css display属性
注意，v-show 不支持< template >元素，也不支持 v-else。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好

v-for比v-if 优先级更高  不推荐使用

列表渲染

使用对象

<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

遍历时按object.keys()遍历顺序

维护状态

注意：key 必须是 number和string

数组更新检测

变异方法

  • push()
  • pop()
  • shift()
  • unshift()
  • splice()
  • sort()
  • reverse()

这些方法改变原数组，可以做响应式变化

注意事项

由于 javascript 的限制，vue 不能检测以下数组的变动：

var vm = new vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的
  1. 使用 vm.$set 
vm.$set(vm.items, indexofitem, newvalue)
  1. 使用 splice()

同样对象也是如此

  1. 修改添加单个
//vue.set(object, propertyname, value)
vue.set(vm.userprofile, 'age', 27)
  1. 修改添加多个
vm.userprofile = object.assign({}, vm.userprofile, {
  age: 27,
  favoritecolor: 'vue green'
})

可以在v-for 使用的

<li v-for="n in even(numbers)">{{ n }}</li>  //函数

<div>
  <span v-for="n in 10">{{ n }} </span>
</div>

// 1 2 3 4 5.. 10 


<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

组件上使用 v-for key 是必须的

事件处理

事件修饰符 >>>

  • .stop
  • .prevent
  • .capture
  • .self
  • .once
  • .passive
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="dothis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onsubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="dothat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="dothis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="dothat">...</div>

??? 修饰符 

v-model

v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：

  • text 和 textarea 元素使用 value 属性和 input 事件；
  • checkbox 和 radio 使用 checked 属性和 change 事件；
  • select 字段将 value 作为 prop 并将 change 作为事件。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网