Vue 学习总结

##将数据渲染进DOM元素

1. {{message}}
2. v-bind:属性= (也可写作 :属性=)

##常用语句
判断 v-if

循环 v-for="todo in todos"

按钮 v-on:click="函数名" (也可写作 @click=)

表单数据和应用数据双向绑定 v-model="数据名"

##组件

Vue.component('todo-item',
  // The todo-item component now accepts a
  // "prop", which is like a custom attribute. 
  // This prop is called todo. 
  props: ['todo'],  
  template: '<li>{{ todo.text }}</li>'
})

• props作为子组件的接口，接收父类的数据，同时解耦

• 组件可以作为自定义标签在HTML中使用

• 所有的 Vue.js 组件其实都是被扩展的 Vue 实例

实质上是一个预定义的Vue实例，在实例app中，app相当于父类，而组件相当于是app中的子类，父类的数据可以通过v-bind:字段名
的方式将父类作用域中的数据传入子类组件中

####用Vue创建的应用的大致结构

<div id="app">
  <app-nav></app-nav>
  <app-view>
    <app-sidebar></app-sidebar>
    <app-content></app-content>
  </app-view>
</div>

###创建实例

var vm = new Vue({
  // 选项
})

传入的选项对象包括：

• 数据

• 模板

• 挂载元素

• 方法

• 生命周期钩子

###属性和方法

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})
//vm.a === data.a
vm.$data === data // -> true
vm.$el === document.getElementById('example') // -> true
// $watch 是一个实例方法
vm.$watch('a', function (newVal, oldVal) {
  // 这个回调将在 vm.a  改变后调用
})

#####注意：

• 所有代理的属性都是响应的，添加新的属性时不会触发视图的更新

• 钩子的this代表着调用它的实例

###插值

####文本

1. 用双大括号{{数据对象 | 过滤器}}

   注意：

   双大括号中也可以是JS表达式可对数据进行运算

   渲染结果解释为纯文本

   若要输出HTML，需要在div中设置

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

##计算属性
用于将复杂的数据运算包含于实例的初始化中

作为其中一个选项对象：

computed: {
    // a computed getter
    reversedMessage: function () {
      // this points to the vm instance
      return            
      this.message.split('').reverse().join('')
    }
  }

reversedMessage作为计算过后的新属性，直接用双大括号进行解释即可得到计算的最终结果

####计算缓存与Method的区别
好处：当数据的值不改变的时候，依然会使用计算缓存而无需像调用Method那样重新计算
前提：计算缓存的使用必须要基于相关依赖，像Date.now()就不行

####计算缓存与$watch

在数据变动时，可以优先考虑用计算缓存，而并非watch回调

注意:计算属性默认为getter，也可设置为setter,setter在内部赋值的时候会被调用

---

##观察者 Watchers

当数据值变动时，相对于计算属性，更加的通用，执行异步操作(ajax访问API)或需要响应不断变化昂贵的数据操作时这很有用,例如限制访问API的频率

##Class 与 Style绑定

###绑定HTML Class
语法：v-bind:class={class1:布尔变量,class2...}

class还可以是数据对象,甚至是计算属性！

#####通过控制布尔变量可以使元素的class动态切换

<div v-bind:class="[activeClass, errorClass]">

###绑定内联样式

v-bind:style="{ color: mycolor}" mycolor在data中定义

复杂内联样式推荐绑定styleObject对象

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

##条件渲染
判断一个标签的输出 v-if="ok" ok值决定是否显示

判断一块标签的显示 用template元素作为包装元素，下面为根据需要显示的标签块

v-else可以和v-if和v-show一起使用

v-show专门用于对渲染元素的CSS属性，且不支持<template>标签

####v-if 和 v-show比较

频繁切换使用的用v-show,条件不大可能改变的v-if

##列表渲染

<template v-for="">

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

index索引，key键，value值

##key(未完)

作用：让Vue标识出节点的身份，检测数组元素的突变
用法：v-bind:key=”item.id”

##数组更新检测

变异方法：一组用来观察数组的方法，可以触发视图更新

• push()
• pop()
• shift()
• unshift()
• splice()
• sort()
• reverse()

非变异方法：不会改变原始数组的数据，但是会返回新的数组，适用于不想改变原值的情况

• filter()
• concat()
• slice()

##事件处理器

###监听事件

v-on:指令，例如点击v-on:click="触发方法名"

###内联事件处理
<button v-on:click="say('hi')">Say hi</button>
say方法名(传入的参数)

如果要访问DOM原生对象,传入的参数要有 特殊符号美元+event

###事件修饰符
添加在click和submit后

• .stop
• .prevent
• .capture
• .self

###按键修饰符
<input v-on:keyup.13="submit">
13表示键值，该按键按下后会触发submit

<input @keyup.enter="submit">

达到直接在HTML中监听事件的效果

##表单控件绑定
略
##组件
###注册全局组件

Vue.component('my-component', { 选项 }) 父组件
``

必须先注册组件，然后再初始化父实例，才能在父实例中使用组件自定义标签

###注册局部组件

var Child = {
  template: '<div>A custom component!</div>'
}
new Vue({
  // ...
  components: {
    // <my-component> 将只在父模板可用
    'my-component': Child
  }
})

子组件
###data

注意：组件的data必须是函数！通过return的方式将data传入组件绑定的元素中

意义：类似接口解耦，使得同一个data在不同的组件中都能有自己不同的状态！

###传递数据
父–>子 props:[‘字段名’]

动态绑定 v-bind:字段名="父数据名"
<child v-bind:my-message="parentMsg"></child>

###props验证

propB: [String, Number],
    // 必须且是字符串
    propC: {
      type: String,
      required: true
    },
    // 数字，有默认值
    propD: {
      type: Number,
      default: 100
    },
    // 数组／对象的默认值应当由一个工厂函数返回

###组件v-model数据双向绑定
表单自定义绑定：

1.绑定value

2.有新的value时触发input事件

###非父子组件的通信
须使用一个空vue实例来当中央

var bus = new Vue()
// 触发组件 A 中的事件
bus.美元emit('id-selected', 1)
// 在组件 B 创建的钩子中监听事件
bus.美on('id-selected', function (id) {
  
})

###内容分发

绑定子组件内的指令到一个组件的根节点，必须在子组件的内部定义模板时进行绑定

<my-component>
    <p>This is some original content</p>
    <p>This is some more original content</p>
  </my-component>

在父模板中放入子组件的标签，其中的内容将会被安插到子组件的<slot></slot>标签中

slot=”名称” 可以定义名字以标识父插入子的何处