v-bind

作用

动态绑定属性

基本使用

v-bind:后面跟要绑定的属性

  1. <body>
  2.   <div id="app">
  3.     <img v-bind:src="imgUrl" alt="">
  4.   </div>
  6. <script src="vue.js"></script>
  7. <script>
  8.   const app = new Vue({
  9.     el: '#app',
  10.     data: {
  11.       msg: 'Lv',
  12.       imgUrl: 'https://img9.doubanio.com/view/subject/l/public/s27063255.jpg'
  13.     }
  14.   })
  15. </script>
  17. </body>

**

花样绑定

绑定布尔值
例如，点击按钮变为红色
绑定对象

Vue会自动合并class

计算属性的setter和getter

一般不写set
计算属性的缓存

let和var对比

块级作用域

const的使用

开发中优先使用const

对象增强写法

  1. const Obj = {
  2.   name,
  3.   age,
  4. }
  7. fullName() {
  8.   return this.firstName + this.lastName
  9. }

事件监听 v-on

  1. <button @click="btnClick">
  2. +
  3. </button>
  5. <script>
  6.   methods: {
  7.     btnClick() {
  9.     }
  10.   }
  11. </script>

在事件定义时，如果方法本身需要一个参数，写方法时省略了小括号，Vue会将event时间对象作为参数传入方法。

v-on 修饰符

.stop

.prevent

自定义组件的监听
.native

.once

条件判断 v-if/v-else-if/v-else

判断是否需要渲染出来