温故而知新——vue常用语法(一)
目录

v-if 和 v-show 有什么区别

常用指令

v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值使用。

模板语法

缩写

计算属性

计算属性的 setter

侦听器watch

绑定 HTML Class

绑定内联样式

条件渲染v-if

v-for用法

事件处理

事件修饰符

按键修饰符

表单绑定

v-if 和 v-show 有什么区别

1、

v-if 是真正的条件渲染

v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性display

2、

性能消耗： v-if有更高的切换消耗。v-show有更高的初始渲染消耗。
应用场景： v-if适合运行时条件很少改变时使用。v-show适合频繁切换

常用指令
- v-if:根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定/组件被销毁并重建。
- v-show：根据表达式之真假值，切换元素的 display CSS 属性。
- v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值使用。
- v-bind：动态地绑定一个或多个特性，或一个组件 prop 到表达式。
- v-on：用于监听指定元素的DOM事件
- v-model:用于实现表单输入和应用状态间的双向绑定
- v-pre:跳过这个元素和它的子元素的编译过程。可以用来显示原始 Mustache 标签。跳过大量的没有指令的节点加快编译
- v-once:只渲染元素和组件一次。随后重新渲染，元素组件及其所有的子节点将被视为静态的内容并跳过。可以用于性能的优化。
模板语法

1、模板语法
Message: {{ msg }}
2、执行一次性地插值，当数据改变时，插值处的内容不会更新
这个将不会改变: {{ msg }}

缩写

...

...

计算属性

背景：模板内的表达式非常便利，在模板中放入太多的逻辑会让模板过重且难以维护。例如：

{{ message.split('').reverse().join('') }}

适用场景：任何复杂逻辑，你都应当使用计算属性。

Original message: "{{ message }}"

Computed reversed message: "{{ reversedMessage }}"

var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})

对比：在表达式中调用方法来达到同样的效果

Reversed message: "{{ reversedMessage() }}"

// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}

与计算属性对比：

不同点：

1）只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数

2）在表达式中调用方法，每次都会重新计算

例子：

这也同样意味着下面的计算属性将不再更新，因为 Date.now() 不是响应式依赖：

computed: {
now: function () {
return Date.now()
}
}

计算属性(缓存)适用场景：计算属性的计算逻辑特别复杂耗时；

计算属性的 setter

计算属性默认只有 getter，不过在需要时你也可以提供一个 setter：
```
// ...
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

与computed相同点：可以根据数据的变化而变化，而watch也具备同样的功能

两者区别：

1）dom加载完成后将立即执行computed再watch

2）触发事件后，若有methods则先执行再watch

适用场景： watch是更通用的响应数据变化的属性，如果数据变化是异步的，用watch较合适

 绑定 HTML Class

写法一：

当有如下模板：
```
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
>
```

和如下 data：


data: {
  isActive: true,
  hasError: false
}

结果渲染为：

<div class="static active">div>

当 isActive 或者 hasError 变化时，class 列表将相应地更新。例如，如果 hasError 的值为 true，class 列表将变为 "static active text-danger"。

写法2：

<div v-bind:class="classObject">div>


data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

写法3：绑定一个返回对象的计算属性

data: {
isActive: true,
error: null
},
computed: {
classObject: function () {
return {
active: this.isActive && !this.error,
'text-danger': this.error && this.error.type === 'fatal'
}
}
}

写法4：数组

绑定内联样式

写法1：

data: {
activeColor: 'red',
fontSize: 30
}

写法2：

data: {
styleObject: {
color: 'red',
fontSize: '13px'
}
}

条件渲染v-if

例子1：

Vue is awesome!

Oh no 😢

例子2：

v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用：

Not A/B/C

v-for用法

vue-常见用法for_多则惑少则明的博客-CSDN博客_vue的for

事件处理

例子1：

var example2 = new Vue({
el: '#example-2',
data: {
name: 'Vue.js'
},
// 在 `methods` 对象中定义方法
methods: {
greet: function (event) {
// `this` 在方法里指向当前 Vue 实例
alert('Hello ' + this.name + '!')//Hello Vue.js!
// `event` 是原生 DOM 事件
if (event) {
alert(event.target.tagName)//BUTTON
}
}
}
})

例子2：

new Vue({
el: '#example-3',
methods: {
say: function (message) {
alert(message)
}
}
})

事件修饰符

.stop
.prevent
.capture
.self
.once
.passive

按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

例如：

Do something

温故而知新——vue常用语法(一)

v-if 和 v-show 有什么区别

常用指令

v-for：循环指令，基于一个数组或者对象渲染一个列表，vue 2.0以上必须需配合 key值 使用。

模板语法

缩写

计算属性

计算属性的 setter

侦听器watch

绑定 HTML Class