Vue2.0-模板语法

Vue组件：
包含三个部分：

• template:视图

• 只能存在一个根元素

script:逻辑

style:样式

• scoped:样式只在当前组件内生效，App.vue内不建议加scopted

Mustache:模板

• 表现形式：{{语法}}

  {{hello}}
  {{1+1}}//表达式
  {{“哈哈”}}
  {{0<10?‘对的’:‘错的’}}

注意：只能存在单行语句，并且不能用在html 标签的属性上

Vue 基本指令：

• v-html：渲染文本

• v-text：渲染文本

• v-bind：绑定（可以绑定所有的html 标签属性）简写（：）

条件渲染：

• v-if

• v-else

• v-else-if

• v-show

问题：v-if与v-show有什么区别？

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

列表渲染：
用 v-for 把一个数组对应为一组元素

• v-for

<ul id="example-1">
  <li v-for="item in items">
    {{ item.message }}
  </li>
</ul>在这里插入代码片

  <ul id="example-2">
      <li v-for="(item, index) in items">
        {{ parentMessage }} - {{ index }} - {{ item.message }}
      </li>
    </ul>

• 每个列表要尽可能添加key，否则会引起警告
• 也可以是一个对象一个对象的 v-for
• 三个参数

<div v-for="(value, key, index) in object">
  {{ index }}. {{ key }}: {{ value }}
</div>

• 事件监听：

  v-on:
  methods:
  事件参数
  有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：

<button v-on:click="warn('Form cannot be submitted yet.', $event)">
  Submit
</button>

// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) event.preventDefault()
    alert(message)
  }
}

修饰符：
.stop
.prevent
.capture
.self
.once
.passive
按键修饰符：

• 数组更新检测：
  变异方法：引起视图更新(push() ,pop(), shift(), unshift(),splice(),sort(),reverse())会改变原始数组。
  替换数组：不会引起视图更新(filter(),concat(),slice()),不会改变原始数组，但是总是返回一个新数组。