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}

<el weight="50" height="160" ></el>

Slot

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

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

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

动态组件

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

<component :is="com1"></component>

传递事件

子组件的事件传递给父组件()

父组件<elf v-on:event-x="..."></elf>

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

发表评论

电子邮件地址不会被公开。