一、Vue实例

1. el挂载的dom节点
2. data用来存放数据
3. methods方法
4. 生命周期钩子函数
5. component定义局部组件
6. computed计算属性
7. watch侦听属性
8. directives定义局部指令

二、模板

插值

• 双大括号文本插值，将vue实例中data属性中的msg的值插入到span中

<span>{{ msg }}</span>

• 可以使用表达式,控制流要用三元表达式

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

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

<div v-bind:id="'list-' + id"></div>

指令

1. v-if 条件渲染

   • key可管理复用的元素

2. v-else条件渲染

3. v-else-if条件渲染

4. v-on缩写为@绑定事件

5. v-bind缩写为:单向绑定数据

6. v-model双向绑定数据

7. v-for列表渲染

三、绑定class与style

• 绑定class对象语法

  //html
  <div
    class="static"
    v-bind:class="{ active: isActive, 'text-danger': hasError }"
  ></div>
  
  //data
  data: {
    isActive: true,
    hasError: false
  }
  
  //根据属性值的真假决定属性是否添加
  //bindi可以与普通class共存
  //渲染结果如下
  <div class="static active"></div>
  

• 绑定class数组语法

  //html
  <div v-bind:class="[activeClass, errorClass]"></div>
  
  //data
  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
    isActive: true
  }
  
  //数组语法中可以掺杂对象语法
  <div v-bind:class="[{ active: isActive }, errorClass]"></div>
  //渲染结果如下
  <div class="active text-danger"></div>
  

• 绑定style对象语法

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

  也可以直接传入一个对象

  //html
  <div v-bind:style="styleObject"></div>
  
  //data
  data: {
    styleObject: {
      color: 'red',
      fontSize: '13px'
    }
  }
  

• 数组语法

  v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

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

四、组件

全局注册

Vue.component('my-component-name', {
  // ... 选项 ...
})

• props定义一个属性，可以通过该属性向子组件传值
• this.$emit()自定义事件，第一个参数为事件的名称，可以通过第二个参数向父组件传递数据

局部注册

//先定义一个普通的对象
var ComponentA = { /* ... */ }


//然后在components选项中定义你想要使用的组件：
new Vue({
  el: '#app',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

对于 components 对象中的每个 property 来说，其 property 名就是自定义元素的名字，其 property 值就是这个组件的选项对象。

注意局部注册的组件在其子组件中不可用。