Week 1: Vue.JS

尽可能简单地认识Vue.JS。

Vue基础

Vue简介

Vue.JS是一个JavaScript框架，它借鉴了MVVM的思想，Vue对象就像view model，使用Vue能够轻松地分离数据与视图表现，数据的变化会使视图也变化。

Vue.JS的另一个特点是组件化，一个Vue.JS项目可以抽象成一颗组件树，小型、独立、可复用的组件是大型应用构建的基础。

Vue实例

var vm = new Vue({
  el:'#app',//选择器，Vue实例挂载到选择的元素上
  data:{},//实例数据，数据变化会通过响应式系统触发视图变化
  created:function(){}//实例生命周期钩子，可以在不同阶段插入自己的代码
})

Vue模板语法

插值

<el>{{variable}}</el>展示变量文本值

<el v-html=”htmlData”></el> 输出HTML

<el v-bind:id=”dynamic”></el>或<el :href=”url” ></el> 动态绑定元素属性

指令

v-前缀的特殊属性就是指令（Directives）

<el v-on:click=”onClick”></el>或<el @click=”submit”></el> 绑定事件

<form v-on:submit.prevent=”onSubmit”></form> 使用修饰符，.prevent修饰符阻止默认事件

<el v-if=”seen”>text</el> 控制元素是否在DOM中，可以结合v-else-if与v-else使用。

<el v-show=”ok”></el> 切换display属性控制元素是否可见。

<el v-for=”item in array” >{{item}}</el>或<el v-for=”item of array”>{{item}}</el> v-for将一个数组或对象渲染成一组元素，最好也提供key属性以便跟踪每个节点(在组件中必须提供)，对于子元素只能是特定元素的情况，可以使用is属性

计算属性和侦听器

计算属性

Vue实例中的computed对象内的函数：

computed:{//计算属性
  total: function(){
    return part1+part2;//如果part1与part2不变化，计算属性会返回缓存的结果
  }
}

计算属性的好处是，如果依赖不改变，计算属性不会重新求值。有需要的话，计算属性对象可以分成get和set。

侦听器

当variable变化，控制台输出新值和旧值。

watch:{
  variable: function(newVal,oldVal) {
    console.log(newVal+oldVal)
  }
}

也可使用api：vm.$watch(‘keyPath’,callback) ，键路径形似a.b.c，指向对象的属性。

绑定样式

动态切换class

<div v-bind:class=”{‘class-name’: isActive}” ></div> 用Boolean数据动态决定class-name样式是否应用

<div v-bind:class=”[aActive,bActive]” ></div> 用String数据动态决定应用的样式

<div v-bind:class=”[isActive ? active:’non-active’, class-two,{‘class-three’:isThreeActive}]”></div> :class也支持三元表达式，数组中支持对象语法

绑定内联样式

<div v-bind:style=”{ color:dynamicColor }”></div> 动态绑定内联样式

<div v-bind:style=”styleObject”></div> 绑定样式到对象（styleObject:{color: ‘red’}）

<div v-bind:style=”[styleObject1,styleObject2]”></div> 样式对象同样支持数组语法

事件处理

v-on指令的内容可以是方法或一个js表达式，调用方法时可以传入$event

<input v-on:keyup.enter=”submit”> 监听键盘事件，KeyboardEvent.key 支持的按键名转换为kebab-case就可以作为修饰符，也可以监听鼠标事件

双向绑定

<input>、<textarea>、<select>中使用v-model指令，vue将自动控制双向绑定（监听输入、更新数据、处理特殊情况）。

Vue组件

组件简介

组件是可复用的Vue实例，除了组件的特性，与Vue根实例不同的是，组件的data必须是一个函数，这个函数的返回值才是data的内容，由于js对于对象的引用传值，函数确保了每个组件都维护一份自己的数据。

data:function(){

return{text1:”,text2:”}

}

Prop

通过prop，组件可以获得上层传来的数据。Prop的流是单向的。

prop:{weight:Number,height:Number}

Slot

slot用于在组件内渲染自定义内容，<el></el>之间的内容位于slot的位置。

组件el的template: <div><slot></slot></div>

使用方式<el>abc</el>

动态组件

通过is属性切换组件（可以用来路由的感觉）

传递事件

子组件的事件传递给父组件（）

父组件<elf v-on:event-x=”…”></elf>

子组件<el v-on:click=”$emit(‘event-x’)”></el>也可以在函数内使用this.$emit(”,[arg],…)