摘要：
定义组件 使用场景1：如果想要动态的给child组件的dom结构添加节点，则需使用插槽。直接添加是无效的 定义插槽 使用场景1：如定义一个轮播组件，不固定轮播的内容，轮播内容按使用的场景临时添加 使用 使用场景2：使用插槽实现在组件1上控制组件2是否展示 具名插槽，在预留了多个插槽时使用 <!DOC 阅读全文
摘要：
component组件，动态的绑定多个组件到它的is属性上 在component组件的is属性上绑定组件 动态绑定 组件状态保留 在正常情况下，动态绑定的状态是不会保留的 输入内容 切换组件 切回输入内容的页面，内容没有了 vue提供了组件keep-alive，来保持动态组件的状态一直存活，不会因为 阅读全文
摘要：
实现效果 <!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1.0'> <meta http-eq 阅读全文
摘要：
事件总线工作原理 在代码中实现 创建非父子关系的组件 创建中央事件总线(空的vue实例) mounted生命周期函数，在当前组件的dom创建完后就会调用 在mounted生命周期中绑定订阅事件总线 绑定发布事件总线 获取发布的状态 <!DOCTYPE html><html lang="en"><he 阅读全文
摘要：
ref存在于vue实例中 ref放在标签上，拿到的是原生节点 获取vue实例下，ref中，inputText输入框的值 ref放在组件上，拿到的是组件对象 访问子组件的状态和方法（子传父） 父传子 <!DOCTYPE html><html lang="en"><head> <meta charset 阅读全文
摘要：
子传父使用事件的方式 创建父子关系组件 实现子传父，用事件的方式 子组件定义事件 父组件定义事件 子传父使用案例，父组件根据子组件1传过来的状态，判断是否展示子组件2 定义父子组件 用事件的形式实现控制子组件展示或隐藏 <!DOCTYPE html><html lang="en"><head> <m 阅读全文
摘要：
父传子使用属性的方式 先构建一个父子组件 父传子场景 子组件使用props来定义属性，接收对应父组件传过来的属性，起的变量名字需一致，需全部小写，不支持驼峰命名，对于布尔值需动态绑定 动态传值： 父传子可以传多个 属性验证 props用上面list的形式虽然可以接收并使用参数，但是做不了属性的验证， 阅读全文
摘要：
组件，类似于封装的类和方法，可以给任意其他类调用，对于组件来说，就是封装好后可以在任意其他组件中使用 真实组件化开发的页面结构 一：全局组件，使用Vue.component来定义组件 示例 也可以绑定事件，在自己的组件中定义事件 css也是可以绑定的 多个全局组件定义和引用 二：局部组件（子组件） 阅读全文
摘要：
前面有一篇是实现模糊查询，没有使用计算属性：https://www.cnblogs.com/zhongyehai/p/12337821.html 现在使用计算属性，会比不使用计算属性方便很多，也优雅很多 <!DOCTYPE html><html lang='en'><head> <meta char 阅读全文
摘要：
计算属性定义在comput中，使用方式与方法一样，只不过不用加括号 如果有个需求，将数据的首字母转为大写 在不使用计算属性的情况下实现： 这样把大段js代码写在模板中，可读性差，维护性也差，且不可复用，所以有了计算属性 如果计算属性的依赖改变了，计算属性会重新计算，所以不用担心数据源改变了，计算属性 阅读全文
摘要：
axios是一个第三方库 gitHub示例：https://github.com/axios/axios#example 引入或安装 使用方式 使用示例 引入axios 事件触发请求 可以看出，axios和fetch的响应结构不一样，在axios中，会自动给响应信息加一层data <!DOCTYPE 阅读全文
摘要：
fetch是w3c的一种请求标准，不是第三方库，与vue、jquery无关，且多数浏览器已内置 使用： 本地准备一份json文件作为数据源 请求，拿到的不是我们想要的数据 想要获取响应数据，需在第一个then中将响应数据转为json再返回给第二个then，在第二个then中去获取值 也可以简写ret 阅读全文
摘要：
1.v-modle绑定后，不即时改变状态 双向绑定过后，默认是只要输入框内的value值有改变，data的状态就会改变的，即时改变，对资源消耗大 可以设置为光标失去焦点后再改变，这样就可可以减少资源的消耗 2.对输入数字的限制，使用.number 但是此方法有bug，对于一开始就不输数字的，无法限制 阅读全文
摘要：
商品数据准备： datalist: [ {name: "商品1", price: 10, number: 1, id: "1"}, {name: "商品2", price: 20, number: 2, id: "2"}, {name: "商品3", price: 30, number: 3, id 阅读全文
摘要：
输入框双向绑定： 文本域的绑定也一样 复选框 如果要默认选中状态，则只需要将初始值设为true即可 多选框操作，使用数组，并且给每个选项设置value值 单选按钮，给每个选项设置value值 <!DOCTYPE html><html lang='en'><head> <meta charset='U 阅读全文
摘要：
一：事件修饰符 官网对事件修饰符说明：https://cn.vuejs.org/v2/guide/events.html 冒泡场景：当触发li上的点击事件的时候，会一直往上找，找到ul的事件 解决方法 第一种方法：js处理方式，把事件传给函数，在函数中阻止冒泡 第二种方法：vue提供的事件修饰符.s 阅读全文
摘要：
一：直接函数名 二：函数后加括号，传参的场景 三：当时间触发的逻辑很简单的时候，可以直接写，不用通过函数 <!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <meta name='viewport' content='width 阅读全文
摘要：
实现模糊查询，查询出包含输入内容的元素 两种监听方式： 1.实时监听input输入框，只要发生改变，就触发查询 2.输入框失去焦点（光标离开输入框）时触发 这里采用input事件，实时查询 为了能实时拿到输入框的数据，使用v-mdel进行双向绑定 使用filter筛选数据 由于filter并不会对原 阅读全文
摘要：
一：直接作用于原数组的 使用以下方法操作数组，可以检测变动push()/pop()/unshift()/splice()/sort()/reverse() 二：不直接作用原数组的 使用以下函数，需用新数组替换旧数组 filter()/concat()/slice()/map() 用新数组替换旧数组 阅读全文
摘要：
渲染： 简单示例 操作数组即可改变数据 遍历的时候取索引值 遍历对象 由于对象没有索引，但是有key，所以遍历的时候可以取到key key值设置 使用不重复的数据做key值，避免for循环遍历的时候对相同key值跳过更新 <!DOCTYPE html><html lang='en'><head> < 阅读全文