03 2020 档案
摘要：[A] watch属性 1. watch是和el,data, methods属性同级的一个属性 2. watch属性用于监听组件中data中的数据变化(注：也可以监听props中的数据变化) 3. watch属性为一个对象，对象中定义函数，函数名为变量名，参数分别为新值和旧值 4. 当被监听的数据发
阅读全文
摘要：[A] slot插槽 在开发中，我们经常遇到一个模块中大部分内容相同，部分内容不一样的情况，这个模块可以写成一个组件， 组件中相同的内容保留，不同的内容暴露在组件预留的插槽中，即可实现最优化代码。 [B] 组建中插槽的使用 1. 让我们封装额组件更具有拓展性 2. 让使用者可以决定组件内部的一些内容
阅读全文
摘要：[A] 父子间的通信 1. 我们知道，子组件是不能直接引用父组件或者Vue实例中的数据的 2. 但是在实际开发中，我们经常需要数据从上层网下层传递 如：在一个页面中，主页面从服务器请求到了很多数据 其中一部分在大组件中展示，一部分在小组件中展示 这个时候就需要数据通过大组件(父组件)传递给小组件(子
阅读全文
摘要：组件创建存在的一些问题： 1. 在创建组件时，我们希望组件可以保存一定的数据，并且组件模板中嵌入这些数据实现动态改变组件内容 2. 但是，组件是不能访问Vue实例中的data的 3. 因此，我们需要组件也有存放自己数据的地方 在组件中保存数据 1. 组件注册时，与template并列等级的有一个da
阅读全文
摘要：[A] 组件化开发 1. 组件化开发时Vue.js中一个重要思想 2. 组件的使用分三个步骤： 1. 创建组件构造器 2. 注册组件 3. 使用组件 [B] 组件化的基本使用 1. 创建组件构造器 Vue.extend()创建的是一个组件构造器，通常在创建组件构造器时，传入template代表我们自
阅读全文
摘要：[A] filter() 数组过滤 参数：函数，函数体为筛选条件，该函数返回值为布尔值 返回值：一个新的数组(数组中的每一个元素都满足条件) 示例： var arr = [2, 4, 5, 7, 9, 0, 3, 4]; var newArr = arr.filter(function(item){
阅读全文
摘要：v-model的使用 实现双向绑定，即当数据改变时，界面同步更新，当界面改变时，数据也及时更新。 [A]的基本使用 1. v-model实现表单元素和数据的双向绑定 示例： <div id="app"> <input type="text" v-model="msg"> {{msg}} </div>
阅读全文
摘要：示例代码： <script> /* 购物车买书的case 需求： 1. 点击按钮增加买书量，自动计算总价 2. 可移除某些书籍 3. 当所有书籍被移除后，页面显示购物车为空 移除书籍：修改数据模型即可，页面会自动修改 */ </script> <style> .tb{ border: black 3
阅读全文
摘要：过滤器filters的使用 1. filters是vue中和和data，methods并列的对象 2. 过滤器中定义各个函数，用于将传入的数据进行过滤以下再展示 3. 使用案例 // DOM <div id="app"> 这本书的价格是：<span>{{bookPrice | twoPoint}}<
阅读全文
摘要：在Vue中，并不是所有的数据改变都会响应式的反映到页面中 1. 可以做到响应式的方法 pop() push() shift() unshift() splice() sort() reserve() 2. 做不到响应式的方法 通过下标改变数组的元素, 这是因为Vue中没有监听数值改变的变化 解决：
阅读全文
摘要：v-for 用于循环遍历 [A] 循环遍历数组/对象，不需要下标时 <ul> <li v-for="item in movies">{{item}}</li> </ul> [B] 循环遍历数组/对象，需要下标时 若遍历的是数组，(item, index) item表示值，index表示下标 若遍历的
阅读全文
摘要：[A] v-if...v-else 条件显示 1. 行内属性v-if的值为true时，则当前标签才被渲染出来，值为false，则不被渲染出来 2. 当v-if和v-else成对出现时，在任意时刻可都只会渲染其中一个 示例： <div v-if="isShow">我的名字是：{{name}}</div
阅读全文
摘要：[A] v-on作用 作用：用于绑定事件，如监听鼠标事件，键盘事件等 简写：@ 绑定类型：Function | Inline satatment | Object 参数：event [B] v-on的参数传递 1. 基本使用，不传参时 <button @click="addNum()">add</b
阅读全文
摘要：计算属性 computed data中的数据可以直接在html中通过差值表达式直接引用，但是有时候，我们想要data中的数据经过转换或者简单的计算再展示 【注意】computed中定义的函数而非变量 1. 简单使用 computed:{ fullName(){ return this.lastNam
阅读全文
摘要：v-bind 1. 插值表达式可以将变量的值插入到模板的内容中，即标签内容区域，不能插入到行内属性的值中去，如a标签的href的值，img标签的src值。 2. v-bind可以给行内属性绑定变量的值 v-bind的基本使用 1. 表明某个行内属性绑定的是一个变量而不是一个具体的值 如：<img v
阅读全文
摘要：[A] mustach语法 mustache语法，也称为插值语法 使用方法 1. 在{{变量名}}中加入变量，即可在界面中直接替换成变量对应的值 2. 在{{表达式}}中加入表达式，如： {{name + " " + age}}, {{counter * 2}} [B] v-once 行内属性，表示
阅读全文
摘要：Vue的生命周期 vue从创建，初始化数据，模板编译，DOM挂载，渲染，更新，渲染和销毁的整个过程，叫做Vue的生命周期 生命周期函数有8个： 1. beforeCreate：创建前 2. created：创建后 3. beforeMount：挂载前 4. mounted：挂载后 5. before
阅读全文
摘要：[A] Vue简介 Vue,读音和view相同，是一套用于构建用户的渐进式js框架，与其他大型框架不同的事，Vue被设计成自底向上逐层应用，Vue的核心库只关注图层 1. MVVM模式的实现者--双向数据绑定模式 Model: 模型层，在这里表示javasc对象 View: 视图层，这里表示DOM(
阅读全文
