4、VUE中的computed和watch
computed 在实际的应用中,我们会有一些原始数据,同时在应用中又会有一些数据是根据某些原始数据派生出来的,针对这样的一种情况,vue 定义了一个专门用来处理这种派生数据的选项:computed 1234567891011<div id="app"> <label><input type="radio" v-model="gender" value="" /> 所有</label> <label><input type="radio" v-model="gender" value="男" /> 男</label> <label><input type="radio" v-model="gender" value="女" /> 女</label> <hr ...
3、VUE的事件
绑定事件 在 vue 中,事件通过指令 v-on 进行绑定,v-on 缩写 @ 12<组件 v-on:事件名称="表达式" /><组件 @事件名称="表达式" /> 组件的 methods 选项 在组件选项中,提供了一个 methods 选项,用来存放组件中使用的函数方法,且存放在 methods 中的函数方法可以通过组件实例(this)进行访问 12345678let app = new Vue({ el: '#app', methods: { fn() { console.log(123); } },}); 通过内联方式绑定事件处理函数 直接调用函数,不传递参数 1<button v-on:click="fn">开课吧</button> 此种情况在methods中接受的第一个参数为事件对象。 12345methods: ...
开发中GIT的常用操作
配置 配置当前项目 12git config user.name '你的名字'git config user.email '你的邮箱' 修改全局配置 12git --global config user.name '你的名字'git --global config user.email '你的邮箱' 检查配置 1234# 打印所有configgit config --list# 打印指定configgit config user.name 仓库 初始化仓库 1git init 添加工作区文件到暂存区 1234567891011121314# 添加单个文件git add 1.txt# 添加多个文件git add 2.txt 3.txt# 添加整个目录git add ./a# 添加多个目录git add ./b ./c# 添加所有文件git add . 创建版本 1git commit -m 'xxx' 以上命令会直接添加本次提交的备注,一般用于改动不大的情况。 1gi ...
一、前端模块化
模块化是什么 所谓模块化,就是指根据功能的不同进行划分,每个功能就是一个模块。最终,一个完整的产品是由各个模块组合而成的 独立性。可以针对一个模块单独进行设计、研发,相对工作量和难度变小。 复用性。一些通用模块(例如登录或注册)可以被重复使用,而不用每次重新开发。 解耦性。模块与模块之间,将相互影响降到最低,使得更换、升级或添加某个模块,不影响其他模块的工作。 灵活性。通过选择和组合不同的模块,可以快速构建一个新的产品。 ES5中的模块化 函数的封装 每个函数的作用域仅在内部有效 函数作用域之间没有关系,低耦合 污染全局命名空间 对象封装 两个对象相互之间是独立的,低耦合 全局与用语中可以随意修改 自调函数 低耦合 在全局作用域中无法访问自调函数内部的函数或方法 自调函数配合全局对象 ES6中的模块化 当使用JavaScript文件当作是一个模块 当前JavaScript模块文件自动开启严格模式 使用export命令将当前模块内容导出 export导出 1234567var v = 100;const c = 1000;functio ...
十一、ES6中Class关键字
类是什么 虽然ES6提供了class关键字用于创建对象,但其终究只是语法糖,底层并未实现。 123456789// ES6创建类class Hero { constructor() { this.name = "张无忌"; this.sayMe = function () { console.log("this is 张无忌"); }; }} 类的声明 类的声明方式 123class name [extends]{ // class body} name表示当前类的名称。此方法不允许再次声明已经存在的类,否则会抛出一个类型错误。 类的表达方式 123const MyClass = class [className] [extends]{ // class body} 和函数表达式相同的一点是,类表达式可以是命名也可以是匿名的。如果是命名类表达式,这个名字只能在类体内部才能访问到。 构造函 ...
十、ES6中迭代器与生成器
Symbol ES6新增的一种原始类型,用于唯一的不可修改的,并且也可以用来用作Object的key值。 12345678let symbol = Symbol();console.log(typeof symbol); // symbollet symbol2 = Symbol("xxx");console.log(typeof symbol2); // symbollet symbol3 = Symbol(666);console.log(typeof symbol3); // symbol 该类型的值不可枚举。 Symbol的方法 for(key) 从Symbol类型中查找指定的key,如果存在则返回,不存在就创建并返回。 12345let symbol = Symbol.for("foo"); // 创建console.log(symbol); // Symbol(foo)let result = Symbol.for("foo"); // 查找console.log(symbol); // Symbol(fo ...
九、ES6中键值对集合
Set 集合 set 集合是键唯一的集合。 12let set = new Set([1, 2, 3, 4, 5, 2]);console.log(set); // Set { 1, 2, 3, 4, 5 } NaN、undefined等值允许存储在 set 集合中。 其在 set 集合中是相等的。 12let set = new Set([NaN, NaN, undefined, undefined, null, null]);console.log(set); // Set { 1 NaN, undefined, null } 空数组、空对象、空函数不会被认为是同一个 12let set1 = new Set([[], [], {}, {}]);console.log(set1); //Set { [], [], {}, {} } Set 对象的属性和方法 属性 size属性 相当于数组中的 length 属性 12let s ...
七、ES6中Promise对象
创建Promise对象 123456789101112131415// 初始化状态let promise = new Promise(function (resolve, reject) { /** * resolve - 是一个函数,将Promise对象的状态改为成功 * rejecte - 是一个函数,将Promise对象的状态改为失败 */ setTimeout(() => { resolve("测试成功了!"); }, 200);});// then将promise的状态改变promise.then(function (value) { console.log(value); // 测试成功了!}); Promise对象原型的方法 then()方法 主要作用是为Promise对象添加状态改变时回调函数。其第一个参数resolved状态的回调函数。第二个参数是rejected状态时的回调函数。 catch()方法 此方法返回一个Promise对象,并且处理拒 ...
八、ES6中async函数
语法结构 异步函数声明式 1async function name([param]){} 异步函数表达式 1let name = async function([param]){} 用法示例: 1234567async function myAsync() { return "hello world";}let promise = myAsync();promise.then((value) => { console.log(value); // hello world}); await表达式 await表达式用于等待一个Promise对象,它只能在异步函数中使用。 1[return_value] = await expression; return_value 返回Promise对象的处理结果。如果等待的不是Promise对象,则返回该值本身。 expression 一个Promise对象或者任何要等待的值 123456789101112131415f ...