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],...)
- Linux下批量管理工具pssh使用记录
- salt-ssh批量操作记录
- 用AutoHotKey建立自己的便签本
- Flash/Flex学习笔记(14):制作涂鸦板
- 页面布局的一些心得
- Linux下的计算命令和求和、求平均值、求最值命令梳理
- 网卡自适应带来的麻烦
- silverlight:手写板/涂鸦/墨迹/InkPresenter示例程序
- Linux下日志文件监控系统Logwatch的使用记录
- .net中使用oracle数据库分页的土办法
- 图表的一些资源
- 删除文件后,磁盘空间没有释放的处理记录
- silverlight:ListBox中如何取得DateTemplate/ItemsPanelTemplate中的命名控件?
- 表格效果2
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 环境变量配置为jdk8,却显示java版本为jdk7
- Python脚本按照当前日期创建多级目录
- linux常用的读取文件内容指令
- Executors.newSingleThreadScheduledExecutor();线程池中放入多个线程问题
- SqlServer批量删除表
- java 获取一天内crontab任务执行的时间点
- Python自学成才之路 魔术方法之一元,二元运算符
- Python自学成才之路 魔术方法之打印对象实例
- Python自学成才之路 装饰器必用的wraps注解
- Python自学成才之路 使用函数作为装饰器
- Python自学成才之路 装饰器编程之初试装饰器
- Python自学成才之路 元类中的__new__和__init__方法
- Centreon+Nagios实战第七篇——安装NRPE
- Python自学成才之路 详解类的三个重要方法__new__,__init__,__call__
- Centreon+Nagios实战第五篇——监控端安装Centreon