关注
分享
曹莓奶昔
大三程序媛一枚，记录学习日常，欢迎大家一起来学习交流吖~
展开
-
搭建vue项目
view文件：新建login/LoginView.vue（大驼峰命名法一定要用！app.vue: 删除style样式，结构保留router-view。component和view文件夹：删除全部文件。原创 2023-03-28 16:19:02 · 216 阅读 · 1 评论 -
生命周期函数、组件
vm. $template 是替换掉根节点总结：1. 常用的生命周期函数：2. 关于销毁 vue 实例 组件本质是一个VueComponent 的构造函数，是Vue.extend 生成的 只需要写, vue 解析时会帮我们创建组件的实例化对象，即执行： new VueComponent（options） 每次调用Vue.extend ,返回的是一个全新的vueComponent this 指向： （1）组件配置中：data函数、method函数、watch函数、com原创 2023-02-17 15:27:30 · 368 阅读 · 0 评论 -
表单修饰符、过滤器、内置指令和自定义指令
原创 2022-08-14 14:20:07 · 282 阅读 · 1 评论 -
一Vue基础：绑定样式、条件渲染、列表渲染、列表过滤
key 是DOM对象的标识，当数据发生变化时，vue 会根据新数据生成虚拟DOM，随后vue将新的虚拟DOM与旧虚拟DOM的差异使用diff算法进行比较，最后创建新的真实DOM。真实的dom是没有key的，虚拟dom有key，vue 会将初始的虚拟dom和新虚拟dom 使用 diff 对比算法进行比对，最后将虚拟dom转为真实dom。vue 监测对象数据改变:只要修改数据，多层嵌套的都可以， set 和get就会监测到，就会重新生成模板，生成虚拟dom........原创 2022-08-09 00:00:34 · 503 阅读 · 0 评论 -
一、Vue基础篇：MVVM模型、数据代理、事件修饰符、键盘事件、计算属性、监视（侦听）属性
定义通过一个对象代理另外一个对象中的属性的操作（读写删）属性不可以被枚举的（遍历），enumerabletrue可以枚举值是不能修改的，writabletrue,可以修改值属性默认不能删除configurabletrue,可以删除属性name'lisa',sex'boy'}//数据代理value18,//控制属性是否可以枚举，默认值falsetrue,//控制属性是否可以被修改，默认值falsewritabletrue,...原创 2022-07-24 16:52:41 · 292 阅读 · 0 评论 -
Vue自定义指令
（以局部注册为例）在注册指令时用 xxx，使用时用 v-xxx自定义指令里面的this指向window对象指令名是由多个单词注册，使用a-b命名法，不要用aB命名法。原创 2023-02-17 15:30:28 · 651 阅读 · 0 评论 -
vue3 学习二
shallowReactive：只处理对象最外层属性的响应式（浅响应式）。shallowRef：只处理基本数据类型的响应式, 不处理对象的响应式。使用场景如果有一个对象数据，结构比较深, 但变化时只是外层属性变化 ===> shallowReactive。如果有一个对象数据，后续功能不会修改该对象中的属性，而是生新的对象来替换 ===> shallowRef。readonly: 让一个响应式数据变为只读的（深只读）。shallowReadonly：让一个响应式数据变为只读的（浅只读）。应用场景: 不希望数据原创 2022-06-13 19:08:28 · 100 阅读 · 0 评论 -
Vue 3学习一：介绍和常用的API
目录1. 介绍2. 常用 Composition API2.1 setup2.2 ref函数2.3 reactive函数2.4 Vue3中的响应式原理2.4.1 vue2的响应式2.4.2 Vue3.0的响应式 2.5 reactive对比ref2.6 setup的两个注意点2.7 computed函数 2.8 watch函数2.9 watchEffect函数 2.10 vue 3 生命周期 2.11 自定义hook函数2.12 toRef 和 toRefs2020年9月18日，Vue.js发布3.0版本原创 2022-06-13 15:50:57 · 185 阅读 · 0 评论 -
vue-router
目录1. 概念1.1 vue-router的概念1.2 SPA的概念2. 基本使用2.1 搭配环境和使用2.2 注意点2.3 多级路由（多级路由）2.4 路由query 传参2.5 命名路由2.6 路由的params传参2.6 路由的props配置2.7 的replace属性2.8 编程式路由导航2.9 缓存路由组件 2.10 生命周期的钩子 activated和deactivated3. 路由守卫3.1 全局守卫3.1.1 全局前置守卫3.1.1 全局后置守卫3.2 独享守卫3.3 组件内守卫4. 路由原创 2022-06-12 20:38:06 · 123 阅读 · 0 评论 -
vuex使用
目录1. 概念1.1 使用情景2. 搭建vuex环境3. 基本使用4. getters 配置项5. 四个map方法的使用5.1 mapState5.2 mapGetter5.3 mapActions方法5.4 mapMutations方法5.5 总结1.6 模块化 js绑定的是表达式创建文件：在中创建vm时传入配置项mutation 里面的函数是大写的，actions是小写的初始化数据、配置、配置，操作文件 组件中读取vuex中的数据： 组件中修改vuex中的数据： 或 备注：若没原创 2022-06-12 10:10:57 · 98 阅读 · 0 评论 -
vue中的 axios
目录1. vue 中的 ajax 请求库2. ajax 跨域问题2.1 配置代理法一：devServer.proxy2.1 配置代理法二：path: options3. 插槽3.1 默认插槽3.2 具名插槽3.3 作用域插槽发送ajax请求库的方法：vue.config.js文件配置 可以访问public 里面的全部文件 缺点：只能配置一个端口的代理；不能灵活的控制是否代理（不代理就是使用public文件夹） 优点：配置简单，请求资源时直接发给前端（8080）即可。 工作方式：若按照上述配置代原创 2022-06-11 10:47:03 · 754 阅读 · 0 评论 -
Vue-cli 脚手架二
目录1. webStorage 浏览器本地存储1.1 案例使用2. 组件自定义事件2.1 介绍2.2 绑定自定义事件2.3 触发事件2.4 解绑自定义事件2.5 总结3. 全局总线3.2案例4. 消息订阅与发布5. $nextTick6. 过渡和动画6.1 使用6.2 集成第三方动画相关API： 该方法接受一个键和值作为参数，会把键值对添加到存储中，如果键名存在，则更新其对应的值。该方法接受一个键名作为参数，返回键名对应的值。该方法接受一个键名作为参数，并把该键名从存储中删除。该方法会清空存储中的所有数据。原创 2022-06-10 21:57:55 · 180 阅读 · 0 评论 -
Vue-cli 脚手架一
目录1. 介绍1.1 说明1.2 安装 1.3 分析vue 脚手架1.3.1 子文件1.3.2 src 文件夹 1.3.3 public 文件夹1.4 render 函数1.5 脚手架的默认配置1.6 ref 属性1.7 props 父传子参数 1.8 mixin 混入1.8 插件1.9 scoped 样式 2. ToList案例2.1 组件化编码流程（通用）2.1.1 静态组件2.1.2 初始化案例2.1.3 交互 2.2 案例总结在电脑左下角的搜索框输入cmd，进入命令行一、防止下载慢可以配置npm原创 2022-06-10 14:55:36 · 1195 阅读 · 0 评论 -
Vue 组件化
目录1. 概念2. 非单文件组件的使用 2.1 组件注意点2.2 组件嵌套 2.3 VueComponent 函数2.4 内置关系 3. 单文件组件（重点）3.1 Student.vue3.2 App.vue3.3 main.js 文件：3.4 index. html 3.5 总结1.创建组件 2. 注册(局部)组件：3. 编写组件标签： 2.1 组件注意点组件名写法组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。可以使用name配置项指定组件在开发者工具中呈现的名字。组件标签原创 2022-06-08 10:05:39 · 756 阅读 · 0 评论 -
Vue生命周期
含义：vue实例从创建到销毁的整过程下面是vue的4个生命周期函数：template：只可以放一个根节点，容器里面的内容可以为空，内容放template里面，template里面的内容替换了容器里面的东西，不能让作为跟元素总结：...原创 2022-06-07 11:19:40 · 101 阅读 · 0 评论 -
黑马vue学习路线
vue 学习路线第一天：前端工程化与webpack前端工程化的相关概念 wabpack 的常见用法 打包发布第二天：vue基础入门-part1vue基本使用步骤vue 中常用的指令vue-devtools 调试工具目标:完成vue 指令完成页面结构渲染，使用vue调试工具辅助vue开发第三天：vue基础入门-part2过滤器和侦听器 计算属性的用法 axios的基本用法 vue-cil 的安装和使用目标：在实际开发中运用过滤器、侦听器、计算属性解决问题。用axi原创 2022-05-19 09:54:27 · 1692 阅读 · 0 评论 -
网络应用：axios基本使用、axios+vue使用案例和源代码
目录1.axios 基础使用2. axios+vue1.axios 基础使用功能强大的网络请求库导包：<script src="https://unpkg.com/axios/dist/axios.min.js"></script>语法：axios.get(地址).then(function(response){},function(err){})axios.post(地址).then(function(response){},fu...原创 2022-05-14 13:05:02 · 719 阅读 · 0 评论 -
Vue基础：常用12个内置指令、自定义指令、过滤器
1. 指令1.1 v-text 指令设置文本属性，替换掉的全部内容 如果需要替换部分内容用{{}}插值表达式 内部支持写表达式<body> <div id="app"> <h2 v-text="msg"></h2> <h3>{{name}} </h3> </div> <script type="text/javascript">原创 2022-05-14 13:07:22 · 1283 阅读 · 0 评论 -
vue 基础：介绍、数据绑定、MVVM技术、数据代理、事件处理、计算属性
1. vue 介绍1.1 概念vue 是一套用于构建用户界面的渐进式JavaScript框架vue 可以自底向上逐层的应用1.2 发明人vue 是由尤玉溪 在2013年发布的，2015年发布vue1.0.0，2016年发布vue2.0.0，2020年发布3.0.01.3 vue 特点采用组件化模块，提高代码复用率，让代码更好地维护 声明式编码，无需直接操作BOM，提高开发效率 采用虚拟DOM+优秀的Diff 算法，尽量复用DOM节点1.4 学前需掌握知识ES6语法规范、原创 2022-05-13 11:40:41 · 549 阅读 · 0 评论