vue基础

控制切换一个元素是否显示 
v-if="seen"  //seen: true/false
可以把一个 <template> 元素当做不可见的包裹元素，并在上面使用 v-if。最终的渲染结果将不包含 <template> 元素。
提供了一种方式来表达“这两个元素是完全独立的，不要复用它们”。只需添加一个具有唯一值的 key 属性即可

v-show 不支持 <template> 元素，也不支持 v-else。

渲染一个项目列表
为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有的唯一 id。
渲染数组 
<li v-for="(item, index) in items">
渲染对象
<div v-for="(value, key, index) in object">
v-for 也可以循环整数
 <li v-for="n in 10">
 
交互 v-on/@
v-on:click="reverseMessage"

表单输入和应用状态之间的双向绑定v-model
<p>{{ message }}</p>
  <input v-model="message">
  生命周期
beforecreate  构造之前，方法和数据还没加载好
created   方法和数据已经加载完毕
判断对象是否有el选项 或者调用vm.$mount(el)
beforemounte 没有挂载之前，但虚拟dom已配置
mounted  挂载好，页面出现
beforeupdated 更新前，页面还没更新
updated  更新后，页面也更新了
beforedestory  组件销毁前
destoryed 组件销毁

模板语法
<span v-once>这个将不会改变: {{ msg }}</span>
v-html 可以解析data里传递的数据的html标签
插值 {{ message }}   
Mustache 语法不能作用在 HTML 特性上
可以插入JavaScript 表达式，但不能使用语句
{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
绑定 v-bind:title="message"
从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告
<a v-bind:[attributeName]="url"> ... </a>

计算属性和侦听器
算属性是基于它们的依赖进行缓存的,只在相关依赖发生改变时它们才会重新求值
相比之下，每当触发重新渲染时，调用方法将总会再次执行函数。
当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch，常更好的做法是使用计算属性而不是watch
在数据变化时执行异步或开销较大的操作时 watch更有用。。
<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>

data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
计算属性默认只有 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]
    }
  }
}

Class 与 Style 绑定
v-bind 用于 class 和 style 时，表达式结果的类型除了字符串之外，还可以是对象或数组。
<div
  class="static"
  v-bind:class="{ active: isActive, 'text-danger': hasError }"
></div>
data: {
  isActive: true,
  hasError: false
}
也可以为对象取个名字，这样不用内联在html里，也可以在这里绑定一个返回对象的计算属性
<div v-bind:class="classObject"></div>
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}
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'
}

事件修饰符
@click.stop 阻止单击事件继续传播
@click.prevent 阻止默认行为
@click.capture 捕获事件模式（设置事件触发顺序为从外到里）
@click.self 只有点击当前元素才能触发事件，不受冒泡控制（只阻止自己的）
@click.prevent.once 使用once只触发一次事件设置
用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

按键修饰符
提供了一些默认案件.enter等
通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
.exact 修饰符
<!-- 即使 ctrl 和 Shift 被一同按下时也会触发 -->
<button @click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button @click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button @click.exact="onClick">A</button>
鼠标按钮修饰符
.left
.right
.middle