vue笔记-基础篇-v-_指令的语法

1.计算属性

计算属性是可以配置在options中的，因此先来看下官网对它的介绍

通过文档可知它的结构为computed: {},其中对象中可以是key：function或者是key：{get：function，set：function}
它的this执向的是vue实例而不是函数内部，因此在此函数中访问vue中的属性可以直接通过this.属性的方式访问
它的结果会被缓存起来
总结一下，计算属性的作用和普通属性一样，只不过比普通属性多了一些功能，能使用普通属性的地方就可以通过计算属性替换
举个例子，比如在插值时想对每个属性的值后面添加finished字符串，如果按照普通的写法是这样的

<div id="app">
  {{msg}} finished
</div>

 let app = new Vue({
    el: '#app',
    data: {
      msg: 'hello world!'
    }
  })

如果这个表达式计算简单的话没什么影响，但是如果计算逻辑复杂，那么很影响可读性，使用计算属性替换

<div id="app">
  {{msg}}
</div>

let app = new Vue({
  el: '#app',
  data: {

  },
  computed: {
    msg: function(){
      return 'hello world!' + ' finished'
    }
  }
})

效果是一样的，但是它比普通的属性拥有更好的可读性和效率，它还可以使用get和set的方式，当对此属性赋值时会执行set函数，使用此属性时会调用get函数

2.v-bind绑定

此指令可以给html标签动态的绑定属性值、样式值和类值，通过它可以实现响应式功能

属性绑定

最基本的用法就是绑定标签的属性，比如绑定input标签的value属性，在程序中可以动态的切换输入框的值

<div id="app">
  <input v-bind:value="value">
</div>

let app = new Vue({
  el: '#app',
  data: {
    value: 'aaa'
  },
})

使用程序修改value变量后，界面上的值也会实时变化

如果不使用v-bind修饰属性，那么它的值就是value，加了该指令后vue会将属性的值当做变量解析，当变量的值改变后，标签的值也会发生变化

类绑定

除了可以绑定属性的值以外，v-bind指令还可以动态的绑定类，它有两种绑定方式
第一种直接传入一个对象，对象的key会被当做class名称，对象的value会被当做变量进行解析，只有当变量为true时才会在指定标签中添加此class

<div id="app">
  <input v-bind:value="value" v-bind:class="{active: isactive}">
</div>

let app = new Vue({
  el: '#app',
  data: {
    value: 'aaa',
    isactive: true
  },
})

通过控制台动态的修改isactive变量的值后对应标签上的class被移除了


第二种绑定class的方式为传入一个数组，数组中的值会被当做变量解析，最终class的值就是数组中变量的值

<div id="app">
  <input v-bind:value="value" v-bind:class="[class1, class2]">
</div>

let app = new Vue({
  el: '#app',
  data: {
    value: 'aaa',
    isactive: true,
    class1: 'class1val',
    class2: 'class2val',
  },
})

这两种方式也可以进行混用，直接在数组中使用对象方式也可以生效

样式绑定

v-bind指令绑定样式的方式和绑定class相同，存在对象和数组两种方式
在对象中加了单引号以后就会被当做普通字符串处理

<div id="app">
  <input v-bind:value="value" v-bind:style="{fontSize: fontSize + 'px'}">
</div>

let app = new Vue({
  el: '#app',
  data: {
    value: 'aaa',
    fontSize: 20
  },
})

数组绑定和class绑定相同

缩写形式

因为属性绑定太过于常用，因此vue对其提供了缩写形式，直接使用：代替v-bind:，比如像绑定value的值时不需要再写成v-bind:value，而是直接写成:value即可

3.v-on监听事件

v-on指令可以监听发生在标签上的所有事件，只需要指定事件名称即可监听特定的事件并进行处理

<div id="app">
  <span v-on:click="handleClk">aaa</span>
</div>

let app = new Vue({
  el: '#app',
  methods: {
    handleClk(){
      console.log('clicked...')
    }
  }
})

默认当不传参数的时候第一个参数即为事件对象

let app = new Vue({
  el: '#app',
  methods: {
    handleClk(event){
      console.log(event)
      console.log('clicked...')
    }
  }
})

如果想传入多个对象，并且还想使用事件对象的话，监听时第一个参数的写法为$event

<div id="app">
  <span v-on:click="handleClk($event, 'p1')">aaa</span>
</div>

let app = new Vue({
  el: '#app',
  methods: {
    handleClk(event, p){
      console.log(event)
      console.log(p)
      console.log('clicked...')
    }
  }
  })

对于事件该指令还提供了事件修饰符，用于更精细的控制事件处理方式，用法为v-on:click.事件修饰符，目前支持的所有修饰符在api中可以查到

缩写形式

和v-bind类似，对于事件监听也是非常频繁的操作，因此vue提供了缩写形式，v-on:click缩写形式为@click

4.v-if、v-else、v-else-if判断

为了让页面上的元素根据条件动态的显示或隐藏，vue提供了v-if指令，它的作用和普通的控制语句块一样，当条件满足时渲染指定标签

<div id="app">
  <span v-if="name == 'zhangsan'">zhangsan</span>
  <span v-else-if="name == 'lisi'">lisi</span>
  <span v-else="">wangwu</span>
</div>

let app = new Vue({
  el: '#app',
  data:{
    name: 'zhangsan'
  }
})

将name值改变后

只有当指令的表达式为真时，指令所在的标签或被指令包含的所有标签才会显示

v-show和v-if的区别

v-show指令和v-if指令的作用相同，都是通过表达式来判断是否显示指定标签，唯一的区别在于，v-show指令的隐藏是基于样式的方式，元素并不会消失，而v-if的隐藏会将元素删除

<div id="app">
  <span v-if="show">zhangsan</span>
  <span v-show="show">lisi</span>
</div>

let app = new Vue({
  el: '#app',
  data:{
    show: false
  }
})

5.v-for遍历

语言的三个基本结构，顺序、选择、循环，v-if实现了选择，v-for实现了循环，使用v-for可以遍历数组或者对象，被v-for指令包围的所有标签都会被循环生成

遍历数组

v-for指令可以依次遍历数组中的每个元素，它支持单个参数或两个参数，第一个表示数组中当前正在遍历的元素，另一个表示当前的索引值

  let app = new Vue({
    el: '#app',
    data:{
      items: ['aaa', 'bbb', 'ccc', 'ddd']
    }
  })
  
 <div id="app">
  <ul>
    <li v-for="(item, index) in items">{{index}} - {{item}}</li>
  </ul>
</div>

当使用数组中的部分方法对数组进行增删改时，页面上的数据也会实时变化，具体的方法有以下几种

遍历对象

遍历对象的方式和数组基本类似，它支持三个参数，第一个为value值，第二个为key值，第三个为索引值

  let app = new Vue({
    el: '#app',
    data:{
      items: ['aaa', 'bbb', 'ccc', 'ddd'],
      obj: {
        name: 'zhangsan',
        age: 18,
        addr: 'china'
      }
    }
  })
  
  <div id="app">
  <ul>
    <li v-for="(item, index) in items">{{index}} - {{item}}</li>
  </ul>
  <ul>
    <li v-for="(value, key, index) in obj">{{index}} - {{key}} - {{value}}</li>
  </ul>
</div>

给对象动态的增加属性并不会引起页面的实时更新，但是修改已有属性的值则会引起页面实时更新

指定key

当在组件中使用v-for指令时，必须给每个组件指定key值，此key值必须是唯一的

6.过滤器

过滤器的作用就是通过管道对vue变量的值进一步处理，写在app实例的options中的称为局部过滤器，使用Vue直接注册的称为全局过滤器，优先使用局部的

<div id="app">
  <h3>{{val | lower}}</h3>
</div>

let app = new Vue({
  el: '#app',
  data:{
    val: 'TEST'
  },
  filters:{
    lower(data){
      return data.toLowerCase()
    }
  }
})

代码的含义是当输出val变量的值时先调用lower函数，进过处理后输出lower函数的返回值
过滤器还可以多个同时使用，只需要使用|连接即可，返回的结果为最后一个过滤器返回的值

7.v-model

v-model指令可以实现表单的双向绑定功能
在没有v-model时可以使用v-bind绑定值

<div id="app">
  <input :value="val">
  <h3>val is: {{val}}</h3>
</div>

let app = new Vue({
  el: '#app',
  data:{
    val: 'aaa'
  }
})

直接通过控制台修改值，页面可以实时的更新

但是当在页面上修改时，实例中的变量值并没有变化

v-model指令可以实现双向的改变，首先使用v-model替换v-bind

<div id="app">
  <input v-model="val">
  <h3>val is: {{val}}</h3>
</div>

此时通过输入框就可以改变实例中变量的值了

双向绑定原理

v-bind提供了实例对象到页面的绑定，v-on可以监听输入框的输入事件，并在实例中处理，因此将v-bind和v-on结合后就可以实现双向绑定了

<div id="app">
  <input :value="val" @input="clk">
  <h3>val is: {{val}}</h3>
</div>

let app = new Vue({
  el: '#app',
  data:{
    val: 'aaa'
  },
  methods:{
    clk(event){
      this.val = event.target.value
    }
  }
})

修饰符

同事件指令一样，v-model指令也提供了一些修饰符，用法同v-on指令