摘要：编程式路由导航 示例一： Message.vue 1 <template> 2 <div> 3 <h3>Message page</h3> 4 <ul> 5 <li v-for="m in messageList" 6 :key="m.id"> 7 <!-- <router-link :to="{
阅读全文
03 2024 档案
摘要：常用插件安装指令 安装脚手架(学习笔记39) 第一步：(仅第一次执行--新环境执行，创建过项目的话，从第二步开始)：全局安装@vue/cli (command line interface) 查看镜像：npm config get registry 安装钱建议先设置镜像==》npm config s
阅读全文
摘要：一：路由简介 路由就是一组key-value的对应关系 多个路由，需经过路由器进行管理 SPA应用：single page web application(单页面web应用) Vue-router 一：相关理解 vue-router：vue的一个插件库(需安装--npm install vue-ro
阅读全文
摘要：vuex模块化 + namespace 示例一： 目录结构如下所示 main.js 1 // 引入Vue 2 import Vue from 'vue' 3 // 引入App 4 import App from './App.vue' 5 // 配置提示 6 Vue.config.productio
阅读全文
摘要：nanoid--用于生成唯一主键id 使用操作步骤 第一步：npm install nanoid 第二步：import { nanoid } from 'nanoid' 第三步：id:nanoid(), //也可以指定生成字符串的长度，如nanoid(5) uuid--用于生成唯一主键id 第一步：
阅读全文
摘要：原始实现 <template> <div> <h3>当前求和*10为：{{ bigSum }}</h3> <h3>当前求和为：{{ sum }}</h3> <h3>我在：{{ school }}，学习:{{subject }}</h3> <select v-model.number="selectN
阅读全文
摘要：示例一：通过计算属性 src/store/index.js // 该文件用于创建vuex中最为核心的store // 引入Vue import Vue from 'vue' // 引入vuex import Vuex from 'vuex' // 使用插件 Vue.use(Vuex) /* 准备ac
阅读全文
摘要：store(getters) 概念：当state中的数据需要经过加工后再使用时，可以使用getters加工 在store.js(src/store/index.js)中追加getters配置 // 准备getters--用于将state中的数据进行加工 const getters = { bigSu
阅读全文
摘要：vuex 专门在Vue中实现集中式状态(数据)管理的一个Vue插件，对Vue应用中多个组件的共享状态进行集中式的管理(读/写)，也是一种组件间通信的方式，且适用于任意组件间通信。 Github地址：https://github.com/vuejs/vuex 什么时候使用Vuex 多个组件依赖于同一状
阅读全文
摘要：插槽总结： 作用：让父组件可以向子组件指定位置插入html结构，也是一种组件之间通信的方式，适用于--父组件==》子组件。 分类：默认插槽、具名插槽、作用域插槽 使用方式 默认插槽 父组件中： <Category> <div>html结构</div> </Category> 子组件中： <templ
阅读全文
摘要：vue常用Ajax库 ： 1.vue-resource插件库 npm i vue-resource 使用方式略，不建议使用，vue1.x使用广泛，官方已不维护 2.axios 通用的Ajax请求库，官方推荐，使用广泛 axios在Vue项目中可以用来向后台发送请求（调接口API），获取响应信息的一个
阅读全文
摘要：vue脚手架配置代理 方式一：在vue.config.js中添加如下配置 devServer:{ proxy:"http://localhost:5000" } 说明： 优点：配置简单，请求资源时直接发送给前端(8080)即可 缺点：不能配置多个代理，不能灵活的控制请求是否走代理 工作方式：若按照上
阅读全文
摘要：动画效果 注：多个动画可使用 name 属性处理<transition name='test'>,则需使用test-enter-active替换v-enter-active 示例一： Test.vue——主要代码文件 <template> <div> <button @click="isShow=!
阅读全文
摘要：消息订阅与发布 1.订阅消息(需要数据的人)：消息名称 2.发布消息(提供数据的人)：消息内容 注： 1.订阅名称和发布名称一致 2.需要数据的人--订阅消息；提供数据的人--发布消息 示例一： 第一步：安装支持库 安装第三方支持库：pubsub.js(退出项目运行后执行以下命令，安装库文件) np
阅读全文
摘要：Vue全局事件总线：一种组件之间通信的方式，适用于任意组件之间通信。 1.所有组件，即VueComponent所有的组件实例对象vc 2.每次使用VueComponent都是new一个新的vc 3.Vue.prototype=VueComponent.prototype.__proto__(可以让组
阅读全文
摘要：解绑组件自定义事件 // this.$off('defineMyEvent')//解绑一个自定义事件 //解绑多个自定义事件 // this.$off(['defineMyEvent', 'demoEvent']) //等价于this.$off() //解绑所有自定义的事件 this.$off()
阅读全文
摘要：props--将子组件的信息传递给父组件 <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 --> <School :getShcoolName="getShcoolName"></School> 示例一： App.vue <template> <div class="app
阅读全文
摘要：浏览器存储：意思就是本地缓存信息 local Storage 示例一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,
阅读全文
摘要：问题一：.Vue文件中出现红色波浪线提示 1.在项目中找到package.json文件 2.在eslintConfig对象中添加——"requireConfigFile": false, 问题二： 删除 npm 相关信息(路径eg:C:\Users\Administrator\AppData\Roa
阅读全文
摘要：组件化编码流程(通用)： 实现静态组件：抽取组件，使用组件实现静态页面效果 展示动态数据： 数据的类型、名称是什么？ 数据保存在那个组件？ 交互：从绑定事件监听开始
阅读全文
摘要：scoped样式 <!-- 组件的默认样式 css写法 --> <!-- <style scoped> .demo { background-color: cadetblue; } </style> --> <style lang="less" scoped> .demo { background-
阅读全文
摘要：插件：用于增强Vue 本质：包含install方法的一个对象，install的第一个参数是Vue,第二个以后的参数是插件使用者传递的数据。 定义插件：install 可传递多个参数 对象.install = function(Vue,options){ //定义全局过滤器 Vue.filter(..
阅读全文
摘要：mixin混入：可以理解为是代码的一种重构复用 一个混入对象可以包含任意组件选项（如data、methods、mounted等等）。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 示例一：局部混合示例 局部混入就是在单独的vue组件中引入了mixin混入对象 Studen
阅读全文
摘要：Vue--props属性：让组件接收外部传入的数据 传递数据：<Demo name="xxx"/> 接收数据： 第一种方式：只接受 第二种方式：接收 + 限制类型 第三种方式：接收 + 限制类型 + 现在必要性 + 指定默认值 注：props是只读的，Vue底层会监测对props的修改，如果进行修改
阅读全文
摘要：Vue==>ref ref属性 被用来给元素或子组件注册引用信息(id的替代者) 应用在html标签上获取的是真实的DOM元素，应用在组件标签上是组件实例对象(vc) 使用方式： 声明标识：<h1 ref="xxx">。。。。。。</h1> 或<School ref="xxx"></School>—
阅读全文
摘要：修改脚手架默认配置 运行命令：vue inspect>output.js 注：运行出错，删除对应目录下的文件后再运行指令即可。 注：不要随便改配置哦 脚手架配置可查看：https://cli.vuejs.org/zh/config/ 常见的语法检查工具：eslint、jslint、jshint配置方
阅读全文
摘要：脚手架项目架构分析 1.babel.config.js——babel的控制文件，用于ES6转ES5(一般不需要程序员进行配置，如想研究请查看babel官网) module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ] } 2.pack
阅读全文
摘要：创建Vue脚手架 1.Vue脚手架是Vue官方提供的标准开发工具(开发平台)2.脚手架最新版本4.x3.文档：https://cli.vuejs.org/zh/ 操作步骤：第一步：(仅第一次执行--新环境执行，创建过项目的话，从第二步开始)：全局安装@vue/cli (command line in
阅读全文
摘要：单文件组件 命名规则如下所示： 单个单词命名规则： 方式一：temp.vue方式二：Temp.vue 建议使用(可和vue开发者工具呼应) 多个单词命名规则 方式一：my-temp.vue方式二：MyTemp.vue 建议使用(可和vue开发者工具呼应) 组件交互相关的代码暴露方式：1.分别暴露：e
阅读全文
摘要：示例一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>一个重要
阅读全文
摘要：VueComponent构造函数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
阅读全文
摘要：组件嵌套 示例一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title
阅读全文
摘要：组件：实现应用中--局部--功能--代码--和--资源--的集合（组件就是一块砖，哪里需要，哪里搬） 模块 理解：向外提供特定功能的js程序，一般就是一个js文件 为什么：js文件很多很复杂 作用：复用js，简化js的编写，提高js运行效率 组件 理解：用来实现局部特定功能效果的代码集合(html、
阅读全文
摘要：示例一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>引入生命
阅读全文
摘要：Vue学习笔记32--自定义指令--对象式 总结： 1.autofocus属性，用于input自动获取焦点 2.directives指令中 this 是指 window 3.vm 中使用directives进行自定义指令，为局部指令 4.全局指令和全局过滤器类似，应在vm之外使用 directive
阅读全文
摘要：Vue学习笔记-自定义指令 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
阅读全文
摘要：v-pre指令： 1.跳过其所在节点的编译过程2.可利用v-pre跳过：没有使用指令语法、没有使用插值语法点节点，会加快编译。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" c
阅读全文
摘要：v-once v-once 也是一个不需要表达式的指令，作用是定义它的元素或组件只渲染一次，包括元素或 组件的所有子节点。 首次渲染后，不再随数据的变化重新渲染，将被视为静态内容。 v-once 指令可以用于任何元素或组件，并在绑定数据后，将其内容标记为一次性的，不再响应数据的更新。 用法如下：<s
阅读全文
摘要：v-cloak 总结：v-cloak(没有值)： <br> 1.本质是一个特殊属性，Vue实例创建完毕并接管容器后，会删掉 v-cloak属性。<br> 2.使用css配合 v-cloak 可以解决网速慢时页面展示出{{xxx}}的问题 <!DOCTYPE html> <html lang="en"
阅读全文
摘要：1.v-bind:单向绑定解析表达式，可简写为 :xxx 2.v-model:双向数据绑定 3.v-for:遍历数组、对象、字符串 4.v-on:绑定事件监听，可简写为 @ 5.v-if:条件渲染——动态控制节点是否存在 6.v-else：条件渲染——动态控制节点是否存在 7.v-show：条件渲染
阅读全文
