Vue.js 互动版

vue.js 简介
一个渐进式前端框架 安装方式:直接引入、CDN、NPM 第一个vue.js实例 Hello World 通过构造器函数创建实例 响应式的数据(Data)属性与方法
数据绑定模版语法
模版中文本插值的“Mustache”语法 模版语法如何处理原始 HTML 数据绑定HTML特性(Attributes) JavaScript表达式 过滤器-可自定义的函数 指令(Directives) 通过计算属性处理逻辑
Class列表与Style样式的数据绑定
绑定Html Class对象语法 绑定Html Class数组语法 绑定内联样式Style对象语法 绑定内联样式Style数组语法
渲染指令
条件渲染指令 v-if template元素条件渲染 v-if 条件渲染 v-show 条件渲染 v-else 列表渲染指令 v-for template元素列表渲染 v-for
表单控件输入绑定
文本输入框 Text 多选框 Checkbox 单选按钮 Radio 选择下拉列表 Selected 修饰符参数特性 lazy、number、trim
自定义指令
自定义指令基础(钩子函数) 指令实例属性 指令对象字面量 指令对象字面修饰符 自定义元素指令
自定义过滤器
自定义过滤器基础 双向自定义过滤器 过滤器的动态参数
方法与事件处理器
方法处理器 内联语句处理器 事件处理的修饰符 按键处理的修饰符
过渡和动画效果
过渡动画效果简介 CSS 过渡动画 过渡的CSS类名 过渡流程详解示例 渐近的动态过渡
组件
组件的注册组合构造 Props传递数据给子组件 动态Prop用作特性 通过 Props 绑定类型实现单双向绑定 自定义通信事件示例

参数特性

lazy

在默认情况下,v-modelinput 事件中同步输入框值与数据,可以添加一个特性 lazy,从而改到在 change 事件中同步:

<!-- 在 "change" 而不是 "input" 事件中更新 -->
<input v-model="msg" lazy>

如下实例,当在文本框中输入完成以后,才更新内容:

<span>Message is:{{msg}}</span>
<input type="text" v-model="msg" lazy>

number

如果想自动将用户的输入保持为数字,可以添加一个特性 number

<input v-model="age" number>

debounce

debounce 设置一个最小的延时,在每次敲击之后延时同步输入框的值与数据。如果每次更新都要进行高耗操作(例如在输入提示中 Ajax 请求),它较为有用。

<input v-model="msg" debounce="500">

注意 debounce 参数不会延迟 input 事件:它延迟“写入”底层数据。

debounce参数,延时10秒去试试看!