vue框架学习
文章平均质量分 88
vue框架学习
玄德公笔记
赠人玫瑰,手有余香。
展开
-
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. 安装cnpm3.1 安装3.2 配置环境变量3.2 查看结果4. 安装vue4.1 安装4.2 查看结果1. 安装nodejs1.1 安装url:http://nodejs.cn/download/安装(略)1.2原创 2022-05-12 21:35:39 · 632 阅读 · 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(过滤器)- watch2.3 实例属性2.3.1 用户自定义属性说明示例 (修改对象属性/原始数据)2.3.2 实例选项的属性说明完整示例3. Vue 表达式.........原创 2022-05-12 21:37:16 · 779 阅读 · 0 评论 -
Vue.js 基础-02-模板语法(常用指令v-html/v-bind/v-if/v-model/v-on,插值,参数,修饰符,缩写)
文章目录1. 插值1.1 文本2. Html1.3 属性1. 插值1.1 文本语法使用 {{……}}<div id="app"> <p>{{ message }}</p></div>示例<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CROW SONG</title> &原创 2022-05-14 14:55:02 · 467 阅读 · 1 评论 -
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-if1.1 v-if语法示例<p v-if="show">甲</p>完整示例如下:如果show是false,则甲不会显示。如果ok是flase template中 三奇六仪的信息都不会显示但是show和template原创 2022-05-14 13:51:36 · 2460 阅读 · 0 评论 -
Vue.js基础-04-循环语句(遍历数组、迭代对象属性、遍历数组范围)
1. 遍历数组1.1 < li > 标签中使用语法示例完整示例1.2 模板中使用语法示例完整示例2. 迭代对象属性2.1 迭代第一个参数(值)2.2 迭代第二个参数(键名)2.3 第三个参数(索引值)3. 遍历整数范围...原创 2022-05-16 22:42:17 · 737 阅读 · 0 评论 -
Vue.js基础-05-Vue的常用选项-01-计算选项(computed)、方法选项(methods)、过滤器(filters)
文章目录1. getter 属性1. computed 的使用语法示例完整示例1.2 比较 methods语法示例完整示例2. setter 属性1. getter 属性1. computed 的使用语法示例引用<p>计算回文: {{ reversedMessage }}</p>定义computed: { // 计算属性的 getter reversedMessage: function () { // `this` 指向 vm 实例原创 2022-05-17 22:17:03 · 450 阅读 · 1 评论 -
Vue.js基础-05-Vue的常用选项-02-监听选项(watch)
1. 概述2. 基本使用使用示例完整代码3. whatch回调使用示例完整代码原创 2022-05-18 23:51:48 · 253 阅读 · 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 绑定一个是数组的object4.4 控制数组成员是否生效语法示例完整示例再次强调顺序...原创 2022-05-28 22:35:42 · 2007 阅读 · 1 评论 -
Vue.js基础-06-绑定样式(v-bind)-02-绑定内联样式(v-bind:style)
1. 绑定样式对象语法示例完整示例2. 直接绑定样式对象语法示例完整示例3. 绑定多个样式对象完整示例覆盖顺序原创 2022-05-30 23:03:19 · 208 阅读 · 0 评论 -
Vue.js基础-06-绑定样式(v-bind)-03-单项绑定数据(v-bind:value)
1. 单项绑定 (v-bind:value)语法示例完整示例2. 和v-model 比较原创 2022-06-02 12:49:18 · 460 阅读 · 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 once (事件只触发一次)使用说明使用示例2.5 鼠标的修饰符......原创 2022-05-31 21:52:44 · 6320 阅读 · 1 评论 -
Vue.js基础-07-绑定事件(v-on)-02-键盘事件(keyup)
1. 按键事件参数(keyup)1.1 说明1.2 完整示例2. 按键修饰符别名2.1 修饰符别名2.2 示例<input type="button" @keyup="warn" />1.2 完整示例代码<!DOCTYPE html><html lang="en"&g原创 2022-06-04 21:01:53 · 878 阅读 · 0 评论 -
Vue.js基础-08- 表单双向绑定数据 v-model(input 绑定,extarea绑定,复选框绑定,单选框绑定,下拉菜单绑定)
1. input -双向数据绑定语法示例完整示例2. extarea - 双向数据绑定语法示例完整示例3. 复选框 - 双向数据绑定语法示例完整示例(单个复选框)完整示例(多个复选框)4. 单选框 -双向数据绑定语法示例完整示例5. 下拉菜单 -双向数据绑定语法示例完整示例...原创 2022-06-05 22:54:52 · 2661 阅读 · 1 评论 -
Vue.js基础-09-组件(Component)
1. 注册组件1.1 创建实例时注册语法示例完整示例1.2 在实例外注册组件语法示例完整示例1.3 在变量中定义组件选项完整示例2. 接收父组件传来属性(Prop)2.1 基本使用语法示例完整示例2.2 动态绑定2.3 绑定列表...原创 2022-06-06 22:15:27 · 1435 阅读 · 1 评论 -
Vue.js基础-10-监听子组件事件(v-on)、绑定子组件数据(v-model)
1. 监听子组件触发的事件(v-on)2. 双向绑定prop和 子组件数据(v-model)原创 2022-06-08 13:11:57 · 1319 阅读 · 0 评论 -
Vue.js基础-11-自定义指令(directive):全局指令、局部指令、钩子、简写函数
1. 自定义全局指令语法示例全局指令2. 自定义局部指令语法示例完整示例3. 钩子3.1 钩子函数3.2 参数3.3 示例4. 简写函数语法示例完整示例原创 2022-06-09 19:50:40 · 484 阅读 · 1 评论 -
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-active-class3.7 event4. 实际路由示例(赤壁之战指挥官查询系统)4.1启动方法4.2 代码说明routes.js 文件(定义路由)components 目录(定义组件)layouts目录(布局)pages 目录原创 2022-06-11 23:42:06 · 573 阅读 · 1 评论 -
Vue.js基础-13-混入对象(应用示例,同名函数优先级,选项合并,选项优先级,全局混入,Vue.mixin)
1. 混入对象1.1 简单应用1.2 定义一个组件引用混入对象2.3 混入对象使用函数示例(在混入对象中直接定义函数)示例(混入对象引用methods中函数)2. 同名函数优先级(vue实例 VS 混入对象)2.1 选项合并(实例下直接选项)2.2 选项优先级(实例下methods的选项)3. 全局混入...原创 2022-06-12 19:44:44 · 937 阅读 · 1 评论 -
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. 传参 3.1 Query 3.2 Params 3.3 Body原创 2022-06-12 23:22:11 · 2293 阅读 · 1 评论