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 绑定类型实现单双向绑定自定义通信事件示例

JavaScript表达式

Vue.js 在数据绑定内支持全功能的JavaScript表达式：

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}

练习{{ ok ? 'YES' : 'NO' }}.

数据绑定HTML特性(Attributes)

过滤器-可自定义的函数