VUE

Posted 2020-11-24 helloyoyo

v-bind ： 基本用途是动态更新html元素上的属性，比如id、class、src、href、style等

v-on : 绑定事件监听器，做事件交互。v-on+click‘‘、dbclick、keyup、mousemove等

 

“语法糖”是指在不影响功能的情况下，添加某种方法实现同样的效果，从而方便程序开发。

v-bind         ---->      :

v-on           ---->      @

<a v-bind:href="url"> 链接 </a>
<img v-bind:src=”imgUrl”>
<!-- 缩写为 -->
<a :href="url">链接</a>
<img :src=”imgUrl”>



<!--v- on 可以直接用"@"来缩写-->
<button v-on:click="handleClose">点击隐藏</button>
<!--缩写为-->
<button @click="handleClose">点击隐藏</button>

 

 

计算属性

写在computed中。

<div id=”app” >
  <div :class=”classes”></div> 
</div> 
<script> 
  var app =new Vue({ 
    el :‘#app‘, 
    data : {
      isActive : true , 
      error : null
  },
  computed: { 
    classes : function () { 
      return { 
        active:this.isActive&&!this.error, 
        ‘text-fail‘:this.error&&this.error.type ===‘fail‘
      }
    }
  }
})
</script>

 

计算属性还有两个很实用的小技巧容易被忽略：一是计算属性可以依赖其他计算属性；计算属性不仅可以依赖当前 Vue 实例的数据，还可以依赖其他实例的数据。

 

计算属性 是基于它的依赖缓存的。一个计算属性所依赖的数据发生变化时，它才会重新取值，所以text 只要不改变，计算属性也就不更新

methods 只要重新渲染，他就会被调用，因此函数也会重新执行。

 

使用计算属性还是methods取决于你是否需要缓存，当遍历大数组和做大计算时，应当使用计算属性，除非你不希望得到缓存。

 

数组语法

当需要应用多个class时，可以使用数组语法，给class绑定一个数组，应用一个class列表。

<div id="app">
  <div :class="[activeCls,errorCls]">
</div>
<script>
  var app = new Vue({
    el:‘#app‘,
    data:{
      activeCls:‘active‘,
      errorCls:‘error‘
    }
  })
</script>

<!--渲染后的结果为：-->
<div class="active error"></div>

<!--三元表达式切换class-->
<div class="[isActive?activeCls:‘‘,errorCls]"></div>

<!--对象语法-->
<div class="[{‘active‘:isActive},errorCls]"></div>

 

绑定内联样式

v-bind:style (即 :style) 可以给元素绑定内联样式，方法与:class类似，也有对象语法和数组语法，直接在元素上写CSS

CSS属性名称使用驼峰命名（fontSize）或短横分割命名（font-size）

 

内置指令

v-cloak: