vue学习笔记（一）

1. 插值表达式(也可以是简单的表达式或者三元表达式)

<span>message: {{ msg }}</span>

2. 插入原始HTML

<p v-html="rawHtml"></p>

3. 插入html属性

<div v-bind:id="dynamic"></div>

4. 指令：带有v-前缀
（1）v-if：条件渲染，这块内容只会在指令的表达式返回 truthy 值的时候被渲染。

<h1 v-if="awesome">Vue is awesome!</h1>
<h1 v-else>Oh no </h1>
//v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，但不推荐同时使用。
（2）v-show：根据条件展示元素，带有 v-show 的元素始终会被渲染并保留在 DOM 中，v-show 只是简单地切换元素的 CSS property display。

v-if 与 v-show区别：
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块，相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

（3）v-for：列表渲染，为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key attribute；建议尽可能在使用 v-for 时提供 key attribute。
v-for 渲染数组：还支持一个可选的第二个参数，即当前项的索引。

<ul id="example-1">
  <li v-for="item in items" :key="item.message">  //也可以用 of 替代 in 作为分隔符
    {{ item.message }}
  </li>
</ul>
var example1 = new Vue({
  el: '#example-1',
  data: {
    items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
  }
})
//结果：
Foo
Bar

v-for 渲染对象：可选的第二个的参数为 property 名称 (也就是键名)，可选的第三个参数作为索引。

<ul id="v-for-object" class="demo">
  <li v-for="value in object">
    {{ value }}
  </li>
</ul>

new Vue({
  el: '#v-for-object',
  data: {
    object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
  }
})
//结果：
How to do lists in Vue
Jane Doe
2016-04-10

也可以利用带有 v-for 的 来循环渲染一段包含多个元素的内容。
（4）v-on：监听DOM事件

<button v-on:click="counter += 1">Add 1</button>

（5）v-model：指令在表单 、 及 元素上创建双向数据绑定

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

修饰符：

//lazy 修饰符，从而转为在 change 事件之后进行同步
<input v-model.lazy="msg">

//自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">

//如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">

6. 计算属性：是一个属性，本质是一个方法

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

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

//结果：
Original message: "Hello"
Computed reversed message: "olleH"

computed计算属性和methods方法区别：
（1）两种方式的最终结果确实是完全相同的；
（2）不同的是计算属性是基于它们的响应式依赖进行缓存的，只在相关响应式依赖发生改变时它们才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。
（3）相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
（4）如果你不希望有缓存，请用方法来替代。

计算属性默认只有 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]
    }
  }
}
// ...

6. 侦听器：侦听数据的变化，当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

var vm= new Vue({
  el: '#watch-example',
  data: {
    question: '',
    answer: 'question!'
  },
  watch: {  //watch用来监听数据的变化
    // 如果 `question` 发生改变，这个函数就会运行
    question: function (newQuestion, oldQuestion) {
      this.answer = 'Waiting for you to stop typing...'
    }
  }
  //......

7. class绑定
第一种方式：

<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
</div>
//和如下 data：
data: {
  isActive: true,
  hasError: false
}
//结果渲染为：
<div class="static active"></div>

第二种方式：

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

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

第三种方式：使用计算属性

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

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

第四种方式：使用数组

<div v-bind:class="[activeClass, errorClass]"></div>
data: {
  activeClass: 'active',
  errorClass: 'text-danger'
}
//渲染为：
<div class="active text-danger"></div>

//如果你也想根据条件切换列表中的 class，可以用三元表达式：
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
//当有多个条件 class 时这样写有些繁琐。所以在数组语法中也可以使用对象语法：
<div v-bind:class="[{ active: isActive }, errorClass]"></div>

当在一个自定义组件上使用 class时，这些 class 将被添加到该组件的根元素上面。这个元素上已经存在的 class 不会被覆盖。

8. style绑定
第一种方式：

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

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

第二种方式：

<div v-bind:style="styleObject"></div>

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

第三种方式：数组语法可以将多个样式对象应用到同一个元素上

<div v-bind:style="[baseStyles, overridingStyles]"></div>

9. 事件修饰符：修饰符是由点开头的指令后缀来表示的。
.stop ：阻止单击事件继续传播（阻止冒泡）
.prevent ：提交事件不再重载页面（阻止默认行为）
.capture ：添加事件监听器时使用事件捕获模式
.self ：只当在 event.target 是当前元素自身时触发处理函数
.once ：事件将只会触发一次
.passive ：滚动事件的默认行为 (即滚动行为) 将会立即触发

10. 按键修饰符：为 v-on 在监听键盘事件时添加按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：

// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112