Vue

模板的分离写法 刚才，我们通过语法糖简化了Vue组件的注册过程，另外还有一个地方的写法比较麻烦，就是template模块写法。 如果我们能将其中的HTML分离出来写，然后挂载到对应的组件上，必然结构会

父组件和子组件 在前面我们看到了组件树： 组件和组件之间存在层级关系 而其中一种非常重要的关系就是父子组件的关系 我们来看通过代码如何组成的这种层级关系： 效果展示 父子组件错误用法：以子标签的形式在

全局组件和局部组件 当我们通过调用Vue.component()注册组件时，组件的注册是全局的 这意味着该组件可以在任意Vue示例下使用 如果我们注册的组件是挂载在某个实例中, 那么就是一个局部组件

注册组件的基本步骤 组件的使用分成三个步骤： 创建组件构造器 注册组件 使用组件 我们来看看通过代码如何注册组件 效果展示 查看运行结果： 和直接使用一个div看起来并没有什么区别 但是我们可以设想，

什么是组件化 人面对复杂问题的处理方式： 任何一个人处理信息的逻辑能力都是有限的 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。 但是，我们人有一种天生的能力，就是将问题进行拆

修饰符 lazy修饰符： 理解：像输入，我们没有必要实时绑定进行变化，当用户失去焦点或按下回车的时候，我们的绑定的值在发生变化 默认情况下，v-model默认是在input事件中同步输入框的数据的。

值绑定 初看Vue官方值绑定的时候，我很疑惑：what the hell is that？ 但是仔细阅读之后，发现很简单，就是动态的给value赋值而已： 我们前面的value中的值，可以回头去看一下

v-model绑定select 和checkbox一样，select也分单选和多选两种情况。 单选：只能选中一个值。 v-model绑定的是一个值。 当我们选中option中的一个时，会将它对应的va

v-model绑定radio 当存在多个单选框时 效果如下： v-model绑定checkbox 复选框分为两种情况：单个勾选框和多个勾选框 单个勾选框： v-model即为布尔值 此时input的v

v-model的原理 实现元素和数据的双向绑定 从我们的message的信息转换到input的绑定，其实是可以通过v-bind实现 效果如图所示 我们想从input转化到message的时候，需要监听

表单绑定v-model 表单控件在实际开发中是非常常见的。特别是对于用户信息的提交，需要大量的表单。 Vue中使用v-model指令来实现表单元素和数据的双向绑定。 案例的解析： 当我们在输入框输入内

作业的完成 需求：我们的数组列表数据，当我们点击其中一个li节点的时候，该节点变成红色，其他的都是黑色，随点击进行切换 代码中比较好的思路： 首先是v-for 得到index 后续很关键 使用v-bi

检测数组更新 因为Vue是响应式的，所以当数据发生变化时，Vue会自动检测数据变化，视图会发生对应的更新 Vue中包含了一组观察数组编译的方法，使用它们改变数组也会触发视图的更新 下面的操作都是响应式

组件的key属性 官方推荐我们在使用v-for时，给对应的元素或组件添加上一个:key属性 为什么需要这个key属性呢（了解）？ 这个其实和Vue的虚拟DOM的Diff算法有关系 这里我们借用Reac

v-for遍历数组 当我们有一组数据需要进行渲染时，我们就可以使用v-for来完成 v-for的语法类似于JavaScript中的for循环 格式如下：item in items的形式 我们来看一个简

v-show v-show的用法和v-if非常相似，也用于决定一个元素是否渲染： v-if和v-show对比 v-if和v-show都可以决定一个元素是否渲染，那么开发中我们如何选择呢？ v-if当条

v-if条件渲染案例 我们来做一个简单的小案例： 用户再登录时，可以切换使用用户账号登录还是邮箱地址登录。 类似如下情景： 会存在一个小问题：就是我们在输入了值后，在点击切换按钮，输入框中的值并不会消

v-if、v-else-if、v-else v-if、v-else-if、v-else 这三个指令与JavaScript的条件语句if、else、else if类似。 Vue的条件指令可以根据表达式的

v-on修饰符 在某些情况下，我们拿到event的目的可能是进行一些事件处理 Vue提供了修饰符来帮助我们方便的处理一些事件： .stop - 调用 event.stopPropagation() .

v-on参数 当通过methods中定义方法，以供@click调用时，需要注意参数问题： 情况一：如果该方法不需要额外参数，那么方法后的()可以不添加。 但是注意：如果方法本身中有一个参数，那么会默认