Vue2
文章平均质量分 89
vue2的学习历程
DogEgg_001
这个作者很懒,什么都没留下…
展开
-
Vue2项目实战:尚品汇(五)个人中心页面、导航守卫、懒加载、结束
图片懒加载是指在网页中,当用户滚动页面时才加载图片的一种技术。相对于传统的图片加载方式,懒加载可以减少初始页面的加载时间,提高网站的响应速度。使用插件vue-lazyload实现图片懒加载下载插件:npm i vue-lazyload@1.3.3 -S。原创 2023-10-18 13:02:14 · 570 阅读 · 0 评论 -
Vue2项目实战:尚品汇(四)注册登录页面、提交订单和支付页面
图片懒加载是指在网页中,当用户滚动页面时才加载图片的一种技术。相对于传统的图片加载方式,懒加载可以减少初始页面的加载时间,提高网站的响应速度。使用插件vue-lazyload实现图片懒加载下载插件:原创 2023-10-17 13:27:49 · 661 阅读 · 0 评论 -
Vue2项目实战:尚品汇(三)商品详情界面、加入购物车成功界面、购物车界面
用户在搜索页点击商品图片就会跳转到商品详情页,商品信息根据商品id向服务器请求数据动态展示出。原创 2023-10-09 23:10:38 · 3650 阅读 · 3 评论 -
Vue2项目实战:尚品汇(二)搜索界面模块
关键字保存在params参数中,分类信息保存在query参数中,如果不合并参数,在输入关键字之后再点击分类,会导致params参数消失;通过从home进入search组件会在mounted时请求一次数据,后续路由改变后想要让组件刷新数据就需要使用监视属性监视$route的query或者params的改变。searchParams中的trademark存储的是字符串:“ID:品牌名”,通过计算属性trademarkName可以获取到单独的品牌名进行面包屑展示。若点击的是同一个选项则切排序方式;原创 2023-09-24 21:43:52 · 394 阅读 · 1 评论 -
Vue2项目实战:尚品汇(一)项目基本框架、home首页模块
项目开始前进行些配置有助于更好的完成项目--openlintOnSave: false, //关闭大小写提示。原创 2023-09-16 14:15:19 · 567 阅读 · 1 评论 -
Vue项目简单封装axios
在vue.config.js文件中。原创 2023-08-15 18:47:37 · 124 阅读 · 0 评论 -
Vue2(八)Vuex、vue-router、路由
Vue2居然大致学完了!好神奇,走走停停终于还是完成了。然后就要马上找个项目开始实战练习!再摸摸vue3,补一补webpack、typescript之类的!power!!!原创 2023-08-13 16:22:18 · 461 阅读 · 1 评论 -
Vue2(七)配置代理axios、默认插槽、具名插槽、作用域插槽
(3)工作方式:若按照上述配置代理,会优先请求本地资源,若存在同名的本地资源就返回的是本地资源的数据,不再请求服务器的数据。,vue可配置一个代理服务器,将请求的服务器代理到vue的服务器上,从而使得请求数据端口和代理服务器端口同源;在父组件使用插槽根据子组件的数据来渲染内容时,通过插槽prop将子组件数据传到父组件v-slot中。一般情况下,没有被带有v-slot属性的template包裹的内容都视为默认插槽的内容。(1)优点:可以配置多个代理,且可以灵活的控制请求是否走代理。原创 2023-08-06 23:28:29 · 244 阅读 · 1 评论 -
Vue2(六)组件自定义事件、全局事件总线、$nextTick、动画与过渡
在App.vue中:-- 自定义事件schoolName 子传父 -->methods: {console.log("app拿到了学校名:" + name)在school.vue中methods: {// 触发自定义事件自定义事件创建绑定后实际是存在于vc的events属性中,通过$emit()激发this.$off('stuName') //解绑单个自定义事件this.$off(['stuName', 'demo']) // 解绑多个自定义事件。原创 2023-08-03 10:27:29 · 938 阅读 · 0 评论 -
Vue2(五)待办事项todo-list小案例
现实中一个这样的案例不需要拆成很多个小组件,一个就搞定,不过为了更好的了解学习小知识点进行一个拆分是很有意义的。通过这个案例,编写组件的思路更加清晰,一步一步循序渐进,感觉还不错。学到了很多细碎的知识点。1.目前还没有学到事件总线,所以同级组件之间的数据交互是通过最基础的方式:数据放在父组件,再将数据传递给子组件;同时学到了重要的一点:父组件的函数也可以通过props属性传递给子组件,从而通过操作子组件实现父组件数据的交互。原创 2023-07-27 23:56:07 · 975 阅读 · 2 评论 -
Vue2(四)非单文件组件、单文件组件、脚手架vue-cli的基本使用
1.传统方式缺点:结构复杂、代码复用率不高1.组件化方式组件的定义:实现应用中局部功能代码和资源的集合创建一个mixin.js文件存储混入对象// 分别暴露 适合一个文件内多个导出methods: {data() {return {age: 100,yy: 99本质是包含install方法的一个对象,install接收的第一个参数是Vue,第二个以后的参数是使用者在插件中传入的参数创建一个plugins.js文件// 关闭vue生产时提示。原创 2023-07-26 15:50:55 · 612 阅读 · 1 评论 -
Vue2(三)表单数据收集、过滤器、内置和自定义Vue指令、生命周期
/ 自定义指令 函数型// element:元素(真实dom);bindings:绑定对象v-demo// 内容},// 对象型demo2: {// 指令和元素成功绑定时调用bind: {//内容},// 指令所在元素被插入页面时调用//内容},// 指令所在模板结构被重新解析时调用update: {//内容})原创 2023-07-17 00:23:56 · 243 阅读 · 1 评论 -
Vue2(二)绑定样式、条件渲染、列表渲染、监视数据原理
(1)使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()Vue.set(target,propertyName/index, value) 或。将样式写在数组中,可叠加绑定,利用数组特性,删除样式类用shift(),添加样式类用push()特别注意: Vue.set() 和 vm.$set() 不能给vm 或 vm的根数据对象 添加属性!数据改变后,虚拟dom存储新的标签和数据,与改变前的虚拟dom比较,相同的复用,不同的覆盖。原创 2023-07-12 16:11:52 · 419 阅读 · 1 评论 -
Vue2(一)初始vue、模板语法、数据绑定、数据代理、事件处理、计算和监视属性
基本原理:通过Object.defineObject()把data对象中的所有属性添加到vm中,为每一个添加到vm中的属性指定一个getter和setter,在getter和setter中去操作(读、写)data中对应的属性。弊端:每次修改姓或名后,fullname()方法会被重新调用,且若多次调用函数,会大大增加系统的压力,不利于Vue轻便减负的特点。监视a属性,也可以监视到a属性内的多层属性;在watch属性中写入需要监视的属性a,handler函数用于在修改时自动调用,可包含两个参数,新值和旧值。原创 2023-07-09 15:21:48 · 215 阅读 · 1 评论