vue 2.0之基础

Vue

Vue实例

1. 创建实例:

var vm = new Vue({ //code })

1. 数据与方法:

只有当实例被创建时 data 中存在的属性才是响应式的;

Vm.b = ‘h1’ 是不会触发视图的变化的; Object.freeze()，这会阻止修改现有的属性

1. 生命周期:

created:实例被创建后执行的代码

mounted:模板编译/挂在之后

update:组件更新之后

destoryed:组件销毁之后

不要在选项属性或回调上使用箭头函数

模板语法

1. 文本：{{ }}双括号文本插值,或者用v-once 一次性的插值，后面将不能改变。
2. 原始Html：输出真正的 HTML，你需要使用 v-html 指令
3. 特性：不能使用Mustache 语法，遇到这种情况应该使用 v-bind 指令。
4. 使用javascript表达式：每个绑定只能单个表达式
5. 指令：是带有V-的特殊指令
6. 参数：v-bind用于相应式的更新html; v-on用于监听dom变化
7. 缩写：v-bind  -->:  v-on  -->@

计算属性和侦听器

1. 计算属性和调用方法

计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。这就意味着只要 message 还没有发生改变，多次访问 reversedMessage 计算属性会立即返回之前的计算结果，而不必再次执行函数。调用方法每当触发重新渲染时总会再次执行函数，如果你不希望有缓存，请用方法来替代。

Class  和 Style绑定

绑定html class

1. 对象语法  <div v-bind:class=”{active:isActive}”></div> 动态切换。
2. 数组语法  <div v-bind:class=”[activeClass,errorClass]”></div>  传一组class过去(也可以按条件，使用三元)

绑定内联样式

1. 对象语法  <div v-bind:style=”styleObject”></div>  绑定一个样式对象
2. 数组语法  <div v-bind:style=”[activeClass,errorClass]”></div>
3. 多重值<div :style=”{display:[‘-webkit-box’,’-ms-flexbox’,’flex’]}”></div> 渲染数组中最后一个被浏览器支持的属性

条件渲染

v-if  v-else  v-else-if  (v-if 与  v-for 一起使用的时候 v-for优先级高)

v-show 切换display属性  不支持template 和 v-else

列表渲染

1. v-for 进行遍历(item of items)   在使用的时候提供key,

在遍历一个对象的时候支持三个参数 key  value 和index

1. 数组的更新监测

会引起视图的变化：pop(),push(),shift(),unshift(),splice(),sort(),reverse()

非变异方法：filter(),concat(),slice()会产生一个新数组

Vue不会监测到变化的：1)使用下标直接设置某一项   2)修改数组的长度

1. 对象更改注意事项

Vue不能监测对象属性的添加后者删除。

对于已经创建的实例，不能动态添加根级别的响应式属性，可以使用 Vue.set(object, key, value) 方法向嵌套对象添加响应式属性。

赋予多个新属性：Object.assgin(),  _.extend()

事件处理

监听事件：v-on 监听dom事件     v-on:click="counter += 1"

事件处理方法： 接受一个需要调用的方法名称  v-on:click=”great”

内联处理器中的方法： 访问原始DOM，可以用特殊变量$event

修饰符：

.stop 阻止   .prevent  不重载页面   .capture  捕获模式  .once  只触发一次   .self 不是从自身出发的

可以串联使用，但是要注意顺序

按键修饰符：

Eg:  v-on：keyup.13  当按键值为13的时候才可以执行,

可以使用Vue.config.keyCodes.f1自定义修饰符别名

表单输入绑定

v-module

组件

1. 全局注册：vue.component(tagName, options)  
   
     使用<my-component></ my-component>

1. DOM模板解析注意事项

有些标签下面只能包含特定的元素，放入组件后会导致一些问题，这个时候采取

将：<table>

            <my-row>...</my-row>

   </table>

变成：<table>

                   <tr
is="my-row"></tr>

      </table>

1. Prop

1)父组件通过prop想子组件下发数据，子组件中要显式的声明。

Vue.component('child', {

  props: ['message'],

  template: '<span>{{ message
}}</span>'

})

2)单项数据流

在子组件中改变prop的话控制台会报错。

Prop 作为初始值传入后，子组件想把它当作局部数据来用：定义一个局部变量，并用 prop 的值初始化它

Prop 作为原始数据传入，由子组件处理成其它数据输出：定义一个计算属性，处理 prop 的值并返回

注意在 JavaScript 中对象和数组是引用类型，指向同一个内存空间，如果 prop 是一个对象或数组，在子组件内部改变它会影响父组件的状态。

3)自定义事件

• 使用v-on绑定自定义事件

使用 $on(eventName) 监听事件，使用 $emit(eventName,
optionalPayload) 触发事件

不能用$on监听子组件释放的事件，在模板里用v-on直接绑定

• 给组件绑定原生事件

在某组件的根元素上监听原生事件，用v-on的修饰符.native

• .sync修饰符

作为自动更新父组件属性的v-on监听器，<comp :foo="bar"
@update:foo="val => bar = val"></comp>

给对象一次设置多个属性：可以和v-bind一起使用

• 表单输入组件

v-module实现数据的双向绑定，一般会使用value prop 和input事件

• 非父子组件间的通信

使用一个空的Vue实例作为事件总线

var bus = new Vue()

// 触发组件 A 中的事件

bus.$emit('id-selected', 1)

// 在组件 B 创建的钩子中监听事件

bus.$on('id-selected', function (id) {

})

• 使用插槽分发内容

<slot></slot>里的任何内容都被视为备用内容，只有在宿主元素为空的时候才会显示。有name属性来配置如何分发内容。slot-scope是一个可以重用的模板。