vue框架学习 - 随笔分类 - 运维开发玄德公

Vue.js基础-14-axios（json-server，get，post，put，delete，传参，Query，Params，Body）

摘要：文章目录 1. 创建json-server（工具准备，非必要）1.1 安装1.2 启动服务1.3 查看结果 2. 发送请求2.1 get 请求完整示例控制台输出另一个方法 2.2 POST请求完整示例另一个方法 2.3 PUT请求完整示例另一种方法 2.4 DELETE 请求完整示例另一种方法 3. 阅读全文

posted @ 2022-06-12 23:22 运维开发玄德公阅读(17) 评论(0) 推荐(0) 编辑

Vue.js基础-13-混入对象（应用示例，同名函数优先级，选项合并，选项优先级，全局混入，Vue.mixin）

摘要：文章目录 1. 混入对象1.1 简单应用语法示例完整示例 1.2 定义一个组件引用混入对象语法示例完整示例 2.3 混入对象使用函数示例（在混入对象中直接定义函数）示例（混入对象引用methods中函数） 2. 同名函数优先级（vue实例 VS 混入对象）2.1 选项合并（实例下直接选项）说明完整示阅读全文

posted @ 2022-06-12 19:45 运维开发玄德公阅读(48) 评论(0) 推荐(0) 编辑

Vue.js基础-12-路由（安装路由、简单示例、路由相关属性，实际路由示例）

摘要：文章目录 1. 安装路由1.1 安装1.2 版本造成报错1.3 选择版本 2. 路由示例语法示例完整示例（赤壁之战指挥官查询系统） 3. < router-link > 相关属性3.1 to3.2 replace3.3 append3.4 tag3.5 active-class3.6 exact-a 阅读全文

posted @ 2022-06-11 23:42 运维开发玄德公阅读(20) 评论(0) 推荐(0) 编辑

Vue.js基础-11-自定义指令（directive）：全局指令、局部指令、钩子、简写函数

摘要：文章目录 1. 自定义全局指令语法示例全局指令 2. 自定义局部指令语法示例完整示例 3. 钩子3.1 钩子函数3.2 参数3.3 示例 4. 简写函数语法示例完整示例在这里插入图片描述 1. 自定义全局指令语法示例下边定义了一个名为 v-指令名的自定义指令 Vue.directive('指令阅读全文

posted @ 2022-06-09 19:51 运维开发玄德公阅读(58) 评论(0) 推荐(0) 编辑

Vue.js基础-10-监听子组件事件（v-on）、绑定子组件数据（v-model）

摘要：文章目录 1. 监听子组件触发的事件（v-on）说明完整示例 2. 双向绑定prop和子组件数据（v-model）说明完整示例 1. 监听子组件触发的事件（v-on）说明父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件完整示例 <!DOCTYPE html> <html> 阅读全文

posted @ 2022-06-08 13:12 运维开发玄德公阅读(62) 评论(0) 推荐(0) 编辑

Vue.js基础-09-组件（Component）

摘要：文章目录 1. 注册组件1.1 创建实例时注册语法示例完整示例 1.2 在实例外注册组件语法示例完整示例 1.3 在变量中定义组件选项完整示例 2. 接收父组件传来属性（Prop）2.1 基本使用语法示例完整示例 2.2 动态绑定2.3 绑定列表 1. 注册组件 1.1 创建实例时注册语法示例在阅读全文

posted @ 2022-06-06 22:15 运维开发玄德公阅读(55) 评论(0) 推荐(0) 编辑

Vue.js基础-08- 表单双向绑定数据 v-model（input 绑定，extarea绑定，复选框绑定，单选框绑定，下拉菜单绑定）

摘要：文章目录 1. input -双向数据绑定语法示例完整示例 2. extarea - 双向数据绑定语法示例完整示例 3. 复选框 - 双向数据绑定语法示例完整示例（单个复选框）完整示例（多个复选框） 4. 单选框 -双向数据绑定语法示例完整示例 5. 下拉菜单 -双向数据绑定语法示例完整示例![在这阅读全文

posted @ 2022-06-05 22:55 运维开发玄德公阅读(50) 评论(0) 推荐(0) 编辑

Vue.js基础-07-绑定事件（v-on）-02-键盘事件（keyup）

摘要：文章目录 1. 按键事件参数（keyup）1.1 说明1.2 完整示例 2. 按键修饰符别名2.1 修饰符别名2.2 示例 1. 按键事件参数（keyup） 1.1 说明作用：将键盘的按键事件和vue实例绑定语法写法：v-on:keyup 简写为 @:keyup 示例 <input typ 阅读全文

posted @ 2022-06-04 21:02 运维开发玄德公阅读(90) 评论(0) 推荐(0) 编辑

Vue.js基础-06-绑定样式（v-bind）-03-单项绑定数据（v-bind:value）

摘要：文章目录 1. 单项绑定（v-bind:value）语法示例完整示例 2. 和v-model 比较在这里插入图片描述 1. 单项绑定（v-bind:value）语法示例 vue实例中定义值 new Vue({ el: '#app', data: { 要绑定的键: '要绑定的值', } }) 绑阅读全文

posted @ 2022-06-02 12:49 运维开发玄德公阅读(23) 评论(0) 推荐(0) 编辑

Vue.js基础-07-绑定事件（v-on）-01-点击事件（click）

摘要：文章目录 1. 点击事件参数（click）1.1 基本使用1.2 绑定一个方法1.3 冒泡事件说明示例 2. 点击事件修饰符2.1 .stop （阻止冒泡）使用说明使用示例 2.2 capture （捕获冒泡）使用说明使用示例 2.3 .self （只监听触发该元素的事件）使用说明使用示例 2.4 阅读全文

posted @ 2022-05-31 21:53 运维开发玄德公阅读(120) 评论(0) 推荐(0) 编辑

Vue.js基础-06-绑定样式（v-bind）-02-绑定内联样式（v-bind:style）

摘要：文章目录 1. 绑定样式对象语法示例完整示例 2. 直接绑定样式对象语法示例完整示例 3. 绑定多个样式对象完整示例覆盖顺序 1. 绑定样式对象语法示例绑定对象 <div id="app"> <div v-bind:style="{ color: activeColor, fontSize: f 阅读全文

posted @ 2022-05-30 23:03 运维开发玄德公阅读(16) 评论(0) 推荐(0) 编辑

Vue.js基础-06-绑定样式（v-bind）-01-绑定class属性（v-bind:class）

摘要：文章目录 1. class 属性绑定语法示例完整示例 2. 属性的覆盖2.1 绑定多个值相互覆盖语法示例完整示例 2.2 绑定一个对象（对象成员间覆盖）语法示例完整示例 3. 绑定对象的计算属性语法示例完整示例 4. 绑定数组4.1 直接绑定一个数组语法示例完整示例 4.2 覆盖顺序4.3 绑定一个阅读全文

posted @ 2022-05-28 22:36 运维开发玄德公阅读(24) 评论(0) 推荐(0) 编辑

Vue.js基础-05-Vue的常用选项-02-监听选项（watch）

摘要：文章目录 1. 概述2. 基本使用使用示例完整代码 3. whatch回调使用示例完整代码 1. 概述通过监听属性 watch 来响应数据的变化 2. 基本使用使用示例 vm.$watch('counter', function (newVal, oldVal) { alert('计数器值的变化阅读全文

posted @ 2022-05-18 23:52 运维开发玄德公阅读(15) 评论(0) 推荐(0) 编辑

Vue.js基础-05-Vue的常用选项-01-计算选项（computed）、方法选项（methods）、过滤器（filters）

摘要：文章目录 1. computed（计算选项）语法示例完整示例完整示例（修改data中的值） 2. methods（方法选项）语法示例完整示例 N. 比较 computed & methods不同点完整示例 3. 过滤器语法示例完整示例使用示例（过滤器串联）使用示例（过滤器传参） 1. comput 阅读全文

posted @ 2022-05-17 22:17 运维开发玄德公阅读(15) 评论(0) 推荐(0) 编辑

Vue.js基础-04-循环语句（遍历数组、迭代对象属性、遍历数组范围）

摘要：文章目录 1. 遍历数组1.1 < li > 标签中使用语法示例完整示例 1.2 模板中使用语法示例完整示例 2. 迭代对象属性2.1 迭代第一个参数（值）2.2 迭代第二个参数（键名）2.3 第三个参数（索引值） 3. 遍历整数范围 1. 遍历数组 1.1 < li > 标签中使用语法示例 <l 阅读全文

posted @ 2022-05-16 22:42 运维开发玄德公阅读(27) 评论(0) 推荐(0) 编辑

Vue.js 基础-02-模板语法（常用指令v-html/v-bind/v-if/v-model/v-on，插值，参数，修饰符，缩写）

摘要：文章目录 1. 插值1.1 插入文本1.2 插入表达式 2. 常用指令2.1 v-html（插入html）2.2 v-bind（插入属性）2.3 v-if2.4 v-model （双向绑定数据）2.5 v-on（监听事件） 3. 参数和修饰符3.1 参数3.2 修饰符 4. 缩写4.1 v-bind 阅读全文

posted @ 2022-05-14 14:55 运维开发玄德公阅读(36) 评论(0) 推荐(0) 编辑

Vue.js基础-03-条件语句（v-if/v-show）

摘要：文章目录 1. v-if1.1 v-if语法示例完整示例 1.2 v-else语法示例完整示例 1.3 v-else-if语法示例完整示例多个v-else-if 的判断逻辑 2. v-show2.1 使用语法示例完整示例 2.2 和v-if 比较 1. v-if 1.1 v-if 语法示例 <p v 阅读全文

posted @ 2022-05-14 13:52 运维开发玄德公阅读(33) 评论(0) 推荐(0) 编辑

Vue.js基础-01-Vue实例和Vue表达式（实例化，常用选项el/data/methods/computed/filter/watch，实例属性）

摘要：文章目录 1. 从一段代码说起1.1 第一段代码1.2 Vue的使用说明 2. Vue实例2.1 Vue 实例化语法示例完整示例 2.2 常用选项- el- data- methods （方法）- computed（计算属性）- filter（过滤器）- watch 2.3 实例属性2.3.1 用户阅读全文

posted @ 2022-05-12 21:37 运维开发玄德公阅读(35) 评论(0) 推荐(0) 编辑

windows安装vue.js环境（nodejs/npm/cnpm）

摘要：文章目录 1. 安装nodejs1.1 安装1.2 配置环境变量1.3 查看结果 2. npm配置和版本选择2.1 npm配置全局模块路径/缓存路径2.1.1 创建目录2.1.2 配置2.1.3 配置变量 2.2 npm版本选择（非必要）2.2.1 更换版本2.2.2 查看结果 3. 安装cnpm 阅读全文

posted @ 2022-05-12 21:36 运维开发玄德公阅读(16) 评论(0) 推荐(0) 编辑

随笔分类 - 前端开发 / vue框架学习