VUE
关注
分享
扫一扫
vue
早日朝成
高歌取醉欲自慰，起舞落日争光辉。
仰天大笑出门去，我辈岂是蓬蒿人。
展开
-
小米商城实战vue项目 13 总结
我只是把项目重新做了一遍，感觉存在一些我自己觉得不够好的地方，我会自己修改一下；而因为代码的问题，也存在不少的坑，我自己需要修改一下；但是问题还是不大；里面用到的逻辑还是比较简单，在接下来的时间，我有时间，我会改进这一个项目吧，毕竟不太难；历时3天吧，我理解这一个项目的框架，前后台的开发和数据库建表等等。希望自己继续努力。。...原创 2020-04-09 21:50:42 · 843 阅读 · 0 评论 -
小米商城实战vue项目 12 完成截图
vscode项目结构：数据库：首页： 全部商品购物车我的收藏后端项目结构截图：原创 2020-04-09 21:37:56 · 492 阅读 · 0 评论 -
小米商城实战vue项目 11 完善router/index.js
路由配置import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)const routes = [ { path: '/', name: 'Home', component: () => import('../views/Home.vue') }, { ...原创 2020-04-09 15:23:53 · 346 阅读 · 0 评论 -
小米商城实战vue项目 10 子组件MyLogin.vue和子组件MyRegister开发
登录组件注册组件但是在父组件App.vue中应用；MyLogin.vue<template> <div id="myLogin"> <el-dialog title="登录" width="300px" center :visible.sync="isLogin"> <el-form :model="LoginUs...原创 2020-04-09 15:05:58 · 623 阅读 · 1 评论 -
小米商城实战vue项目 09 父组件ShoppingCart.vue和其子组件开发
我的购物车页面组件ShoppingCart.vue<template> <div class="shoppingCart"> <!-- 购物车头部 --> <div class="cart-header"> <div class="cart-header-content"> &l...原创 2020-04-09 14:48:36 · 462 阅读 · 0 评论 -
小米商城实战vue项目 08 父组件Order.vue和其子组件开发
我的订单页面组件Order.vue<template> <div class="order"> <!-- 我的订单头部 --> <div class="order-header"> <div class="order-header-content"> <p> ...原创 2020-04-09 14:37:03 · 375 阅读 · 0 评论 -
小米商城实战vue项目 07 父组件Goods.vue和其子组件开发
全部商品页面组件(包括全部商品,商品分类,商品搜索)接着我们写Goods.vue<template> <div class="goods" id="goods" name="goods"> <!-- 面包屑 --> <div class="breadcrumb"> <el-breadcrumb se...原创 2020-04-09 13:35:21 · 374 阅读 · 0 评论 -
小米商城实战vue项目 06 父组件Collect.vue和其子组件开发
在对应的文件夹下，创建空文件接着我们写Collect.vue<template> <div class="collect"> <!-- Add a static page for my favorite module --> <div class="collect-header"> <div ...原创 2020-04-09 13:21:59 · 404 阅读 · 0 评论 -
小米商城实战vue项目 05 父组件About.vue和其子组件开发
在对应的文件夹下，创建空文件接着来写About.vue<template> <div class="about" id="about" name="about"> <div class="about-header"> <div class="about-title"> <i class="e...原创 2020-04-09 13:08:33 · 580 阅读 · 0 评论 -
小米商城实战vue项目 04 Home.vue我的完善
对于Home.vue我的完善，为了App.vue更加顺眼点先，对于一些逻辑的东西，简单的也会先写；毕竟Home.vue对于App.vue的影响更直接一点，我们先搞git：npm install axios --save // axios 实现 Ajax 数据请求的方法npm install vuex --save //管理，Vuex 是一个专为 Vue.js 应用程序开发的状...原创 2020-04-09 12:38:32 · 551 阅读 · 0 评论 -
小米商城实战vue项目 03 顶部导航栏
完成初步的样式的编写，低层的footer比较简单，大致完成初步的App.vue中的顶部导航栏和底部的css的编写；<!-- * @Description: 项目根组件 * @Author: * @Date: 2020-04-07 * @LastEditors: * @LastEditTime: --><template> <div i...原创 2020-04-07 23:02:57 · 922 阅读 · 0 评论 -
小米商城实战vue项目 02
这一章：我们根据菜单来开发子菜单的首页父组件在views中创建；这个就是大体的框架；Home.vue<!-- * @Description: 首页组件 * @Author: * @Date: 2020-04-07 16:23:00 * @LastEditors: * @LastEditTime: --> <template>...原创 2020-04-07 21:46:41 · 1024 阅读 · 0 评论 -
小米商城实战vue项目预热 01
选择vscode编译器：第一步：在github上面创建项目，拉到本地，进行项目初始化；不懂，可以看看我的文章创建vue项目基本流程；第二步：安装依赖鉴于方便，我们使用什么包就通过npm安装就行；对于网站的快速建站，与配合，element-ui组件库是一个很棒的选择；通过npm 安装推荐使用 npm 的方式安装，它能更好地和 webpack 打包工具配合使用。git上面运行，类...原创 2020-04-07 17:59:05 · 1833 阅读 · 0 评论 -
创建vue项目基本流程
在GitHub上的代码仓库创建项目project;git clone project的地址，关联到本地；cd 切换到本地的project目录下；通过git命令，检查npm -v 查看npm版本号,node -v;接着通过 “npm install --global vue-cli” 全局安装 vue-cli；vue -V 查看vue版本找到文件目录：...原创 2020-04-07 00:44:20 · 331 阅读 · 0 评论 -
用 Node.js 编写 后端RESTful API 接口，完成前后联调，测试打包上线功能。
用 Node.js 编写 后端RESTful API 接口给前端调用github项目地址：https://github.com/HgzMaggie/Vue-Travel不要看图，主要在vue2.x的基础上写的练手项目。实质上在写模拟项目是，一般在前端中写后端的模拟数据，供前端方便使用和整体功能的调试；但是到了实质上的项目，往往前端调用后端的Api,会更加的多一点；为什么呢？先谈谈前后...原创 2020-04-06 22:28:59 · 1645 阅读 · 0 评论 -
vue项目结构
项目代码结构介绍package.json里面有很多的依赖包，表示在开发这个项目的时候用到的第三方依赖。LICENSE开源协议说明。index.html项目首页默认的模板文件。.postcssrc.jspostcss 的默认配置项。.gitignore在把代码上传到线上的时候希望忽略一些文件，比如 node_modules 等目录文件。.eslintrc.js对代码进行检测，...原创 2020-04-02 02:24:50 · 156 阅读 · 0 评论 -
data函数+vue通信方法 （vue 13）
组件中的data为什么是一个函数?当我们的data是一个函数的时候，每一个实例的data属性都是独立的，不会相互影响了。当假设data为对象的时候，// 创建一个组件var Component= function() {}Component.prototype.data = { #不存在return a: 1, b: 2}// 使用组件var component1...原创 2020-03-09 01:11:37 · 870 阅读 · 0 评论 -
为什么V-for和v-if不 能连用 （vue12）
为什么V-for和v-if不 能连用风格指南：https://cn.vuejs.org/v2/style-guide/v-for和v-if不应该一起使用，必要情况下应该替换成computed属性。原因：v-for比v-if优先级高，所以嵌套使用的的话，每次v-for都会执行v-if，造成不必要的计算，影响性能，尤其是当之需要渲染很小一部分的时候。小结：vue官网推荐将v-if移到父元素...原创 2020-02-28 22:40:46 · 1348 阅读 · 0 评论 -
Vue中v-if和v- show的区别 （vue 11）
如何选择v-if与v-show ：v-show 的用法与v-if基本一致，只不过是改变元素的CSS属性display。当v-show表达式的值为false时候，元素会隐藏，查看DOM结构会看到元素上加载了内联样式display：none;v-if 和 v-show 具有类似的功能，不过v-if 才是真正的条件渲染，它会根据表达式适当地销毁或重建元素及绑定的事件或子组件。若表达式初始值为fals...原创 2020-02-28 22:03:13 · 188 阅读 · 0 评论 -
Vue中v-html会 导致哪些问题 （vue 11）
vue的v-html指令使用注意事项：V-html更新的是元素的 innerHTML 。内容按普通 HTML 插入， 不会作为 Vue 模板进行编译 。但是有的时候我们需要渲染的html片段中有插值表达式，或者按照Vue模板语法给dom元素绑定了事件；使用v-html需要注意的第二个问题是：在单文件组件里，scoped 的样式不会应用在 v-html 内部，因为那部分 HTML 没有被...原创 2020-02-28 21:47:57 · 9142 阅读 · 0 评论 -
vue响应式原理（数据双向绑定的原理） (vue 图解10)
MVC模式MVC的全称是Model-View-Controller，模型-视图-控制器，整个结构分成三层：1. 最上面一层，视图层（View）：用户界面（UI）2. 最底层，是核心的“数据层”：保存数据3. 中间层，控制层（Controller）：处理业务逻辑，负责根据用户从“视图层”输入的指令，选取“数据层”的数据，然后对其进行相应的操作，产生最终的结果各部分的通信方式如下：- V...原创 2020-02-28 21:24:27 · 1486 阅读 · 0 评论 -
Vue.js中 watch(深度监听)的最易懂的解释 （vue 09）
传送门main ：handler方法和immediate属性deep属性：watch 里面还有一个属性 deep，默认值是 false，代表是否深度监听注销watchvue之watch监听对象或者一个值时注意事项（深度观察deep:true慎用！）：deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面...原创 2020-02-28 21:00:52 · 499 阅读 · 0 评论 -
Vue中的computed属性 (vue 08)
computed用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理；computed比较适合对多个变量或者对象进行处理后返回一个结果值，也就是数多个变量中的某一个值发生了变化则我们监控的这个值也就会发生变化，举例：购物车里面的商品列表和总金额之间的关系，只要商品列表里面的商品数量发生变化，或减...原创 2020-02-28 13:14:26 · 202 阅读 · 0 评论 -
Ajax请求放在哪个生命周期中（vue 07）
一个经常会被问到的问题：为什么不在 created 里去发ajax？created 可是比 mounted 更早调用啊，更早调用意味着更早返回结果，那样性能不是更高？首先，一个组件的 created 比 mounted 也早调用不了几微秒，性能没啥提高；而且，等到异步渲染开启的时候，created 就可能被中途打断，中断之后渲染又要重做一遍，想一想，在 created 中做ajax调用，代...原创 2020-02-28 12:51:25 · 2831 阅读 · 0 评论 -
vue组件的生命周期 (vue 图解06）
详细点这里->传送门组件生命周期的示意图：原创 2020-02-28 12:24:22 · 152 阅读 · 0 评论 -
nextTick实现原理 （vue 05）
文章分为白话版和 源码版，白话版助于理解工作原理，源码版助于了解内部详情，让我们一起学习吧 研究基于 Vue版本 【2.5.17】【Vue原理】NextTick - 白话版nextTick 是 Vue 中比较重要的一部分，源码独立而简短，稍作修改就可以拿出来为你的项目服务， 我已经有在项目中使用了想必大家写 Vue 项目的时候，应该也有使用过 nextTick一般我是用在数据渲染完毕之后...原创 2020-02-28 12:07:53 · 231 阅读 · 0 评论 -
4、为何Vue采用异步渲染?（vue解04）
Vue中的渲染方式个人总结可分为4种:原有模板语法，挂载渲染使用render属性，createElement函数直接渲染使用render属性，配合组件的template属性，createElement函数渲染使用render属性，配合单文件组件，createElement函数渲染方式一原有模板语法，挂载渲染：就是对使用Vue标签语法的hmtl进行渲染。<!DOCTYPE htm...原创 2020-02-27 16:25:39 · 4044 阅读 · 0 评论 -
vue中是如何监听数组变化（vue图解03）
起源：在 Vue 的数据绑定中会对一个对象属性的变化进行监听，并且通过依赖收集做出相应的视图更新等等。问题：一个对象所有类型的属性变化都能被监听到吗？之前用 Object.defineProperty通过对象的 getter/setter简单的实现了对象属性变化的监听，并且去通过依赖关系去做相应的依赖处理。但是，这是存在问题的，尤其是当对象中某个属性的值是数组的时候。正如 Vue 文档所说...原创 2020-02-27 16:02:28 · 4491 阅读 · 0 评论 -
响应式数据的原理是什么(vue图解02)
vue作为前端使用广泛的三大框架（react、vue、Angular）之一，vue2.x的双向数据绑定是基于Object.defineProperty实现。原创 2020-02-27 15:41:39 · 833 阅读 · 0 评论 -
mvvm原理（vue图解01）
MVC框架将整个前端页面分成View，Controller，Modal，视图上发生变化，通过Controller（控件）将响应传入到Model（数据源），由数据源改变View上面的数据。整个过程看起来是行云流水，业务逻辑放在Model当中，页面渲染逻辑放在View当中，但在实际运用上却存在一个问题：那就是MVC框架允许View和Model直接进行通信！！换句话说，View和Model之间随...原创 2020-02-26 16:01:24 · 1299 阅读 · 0 评论 -
MVVM框架理解及其原理实现（学习01）
MVC框架将整个前端页面分成View，Controller，Modal，视图上发生变化，通过Controller（控件）将响应传入到Model（数据源），由数据源改变View上面的数据。整个过程看起来是行云流水，业务逻辑放在Model当中，页面渲染逻辑放在View当中，但在实际运用上却存在一个问题：那就是MVC框架允许View和Model直接进行通信！！换句话说，View和Model之间随...原创 2020-02-26 15:53:51 · 604 阅读 · 0 评论 -
在运行vue项目的时候，出现报错。
在安装node时，是最新版本；会同时安装npm,不用再安装npm了。可以在在dom下查看版本。当然安装cnpm更方便安装模块，我觉得。因为是比较新的版本，所以不要在用旧的版本，如下：npm run devnpm start都会是报错。我们可以运行：npm run serve解决了问题，vue项目运行的界面就会出现了：在遇到问题是，想想新的方法，总会找到解决的方法的...原创 2019-12-24 10:32:21 · 819 阅读 · 0 评论 -
vue项目的打开方法
从GitHub上下载了其他人的项目后，要删除node_modules然后在npm install(cnpm install)，执行后在npm run dev(cnpm run dev)。1.先看配置文件package.json，里面定义了这个项目所需要的各个模块，以及项目的配置信息。scripts指定了运行脚本命令的npm命令行缩写，比如dev指定了运行npm run dev时所要执行的命令。...原创 2019-12-23 15:22:52 · 2571 阅读 · 1 评论