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

Class数组语法

可以把一个数组传给 v-bind:class,以应用一个 class 列表:

html代码:

<div v-bind:class="[classA, classB]">

js代码:

var vm = new Vue({
  el: 'div',
  data: {
  classA: 'class-a',
  classB: 'class-b'
}
})

渲染为:

<div class="class-a class-b"></div>
去掉一个样式看看是什么情况?