vue
lvpeng-web
一辈子很短,努力的做好两件事就好;第一件事是热爱生活,好好的去爱身边的人;第二件事是努力学习,在工作中取得不一样的成绩,实现自己的价值,而不是仅仅为了赚钱;
展开
-
如何利用自定义组件,在子组件中修改父组件里面的值(子组件向父组件传值)
最后!不贴源码的讲解就是耍流氓:父组件Second-module源码:{{secondlist}}! {{ msgOfP }}{{item.title}}{{item.time}}如果你想尝试更改父组件传过来的引用值,那么其他子组件中引用的值也会报错哦!点击我,左边的列表组件也会减少就是一个例子点击我,更改父组件App中title的值...转载 2019-05-21 19:43:50 · 2669 阅读 · 0 评论 -
vue.js 种 slot的理解
Slot的通俗理解插槽就是动态交互父子组件之间的数据的机器臂是“占坑”,在组件模板中占好了位置,当使用该组件标签时候,组件标签里面的内容就会自动填坑(替换组件模板中位置),当插槽也就是坑有命名时,组件标签中使用属性slot=”mySlot”的元素就会替换该对应位置内容;slot 使用 可以传递内容 也可以传递标签理解:1.假如子组件没有slot插槽,父组件的内容将被会丢弃2.假如子组...转载 2019-06-16 18:41:46 · 367 阅读 · 0 评论 -
swiper的简单使用教程
什么是swiper?Swiper常用于移动端网站的内容触摸滑动Swiper是纯javascript打造的滑动特效插件,面向手机、平板电脑等移动终端。Swiper能实现触屏焦点图、触屏Tab切换、触屏多图切换等常用效果。Swiper开源、免费、稳定、使用简单、功能强大,是架构移动终端网站的重要选择!1.首先加载插件,需要用到的文件有swiper.min.js和swiper.min.css文...原创 2019-06-17 11:30:31 · 1352 阅读 · 0 评论 -
启动后台应用,测试接口api以及postman简单使用教程
1.启动后台服务下载安装postman, 导入 文档 后缀.jsonhttps://blog.csdn.net/m0_37624078/article/details/84629737 postman详细中文教程地址原创 2019-06-17 13:20:17 · 1008 阅读 · 0 评论 -
vue axios对ajax的二次封装
// ajax请求函数模块 返回值是一个promise对象import axios from ‘axios’export default function ajax(url, data = {}, type = “GET”) {return new Promise(function (resolve, reject) {// 执行异步ajax请求let promise// 准备url...原创 2019-06-17 15:48:49 · 389 阅读 · 0 评论 -
vue使用git 对项目进行版本控制
1 生成本地仓库git initgit add *git commit -m init “init foodpalace”2创建远程仓库登陆github3 将本地仓库推送到远程仓库先关联 再推送原创 2019-06-17 16:29:01 · 1970 阅读 · 0 评论 -
vue项目前后端分离开发中遇到的跨域问题以及解决方式
因为是自己写前端也要自己写接口,我使用的nodejs+express开的服务写接口但是vue 项目 运行调试时会占用一个端口而node开启服务也许要监听一个端口两者虽然都是在一个ip地址,但是端口不同也就造成了跨域问题的出现虽然可以在后端方面(node)通过安装cors包 解决,但是cors是指定对应的ip和域来访问,如果换个端口什么的,就还是会有跨域问题的出现,所以就想到了使用 vue...原创 2019-06-17 19:04:07 · 4306 阅读 · 0 评论 -
stylus进一步补充更新 更强大
Stylus介绍Stylus是一个CSS的预处理框架,Stylus是一种新型语言,可以创建健壮的、动态的、富有表现力的CSS。什么是CSS预处理技术?CSS预处理技术,是指用一种新语言用来为CSS 增加可编程的的特性,无需考虑浏览器的兼容性问题。你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧,可以让你的 CSS 更见简洁,适应性更强。Stylus默认使用...原创 2019-06-22 03:34:44 · 341 阅读 · 0 评论 -
vue 项目用vuex管理状态
第一步 项目下 安装vuex状态包以当前项目来讲,需要管理的状态,1 当前商家地址 2 是 轮播导航,3 商家列表地址是个对象,轮播导航和商家列表都是数组...原创 2019-06-18 14:46:35 · 150 阅读 · 0 评论 -
vuex报错__WEBPACK_IMPORTED_MODULE_1_vuex__.a.store is not a constructor
造成该错误的原因是 store 小写造成的,Vuex,Store({})改为大写就好了Vue.use(Vuex) ,否则报错,引用Vuex,Store({})之前,需要先Vue.use(Vuex)原创 2019-06-18 14:51:27 · 4318 阅读 · 3 评论 -
vuex 发异步请求的2种方法
vuex 发异步请求的2种方法1:注释的那种,导入mapActions, 然后在methods里 用 …mapActions([“getAddress”]) 将getAddress 映射成方法,最后在mounted(){} 调用改方法,发送异步请求2: mounted(){this.$store.dispatch(“getAddress”)},...原创 2019-06-18 15:38:03 · 3269 阅读 · 0 评论 -
vuex异步显示当前地址
vuex异步显示当前地址第一步:异步请求 this.$store.dispatch(“getAddress”) 更新state第二部 读取数据import {mapState} from “vuex”computed:{// 读取state的地址信息…mapState([“address”])},第三步 动态绑定数据 ...原创 2019-06-18 16:04:56 · 274 阅读 · 0 评论 -
vue映射函数mapState mapActions mapMutations mapGetters
通过扩展运算符,将store里的state/actions/mutations/getters的属性或者方法直接映射到当前vue对象的this上,使用时直接this。xxx使用前需要先引入原创 2019-06-18 17:23:54 · 320 阅读 · 0 评论 -
Error in v-on handler: "ReferenceError: Vue is not defined"
代码没有引入 Vue模块原创 2019-06-24 02:26:47 · 16993 阅读 · 7 评论 -
vue中出现 There are multiple modules with names that only differ in casing的问题
1、浏览器中的console出现: There are multiple modules with names that only differ in casing. This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.原因:import时,文件引入的路径...转载 2019-06-24 17:53:33 · 661 阅读 · 0 评论 -
什么是MVVM,MVC和MVVM的区别,MVVM框架VUE实现原理
Mvvm定义MVVM是Model-View-ViewModel的简写。即模型-视图-视图模型。【模型】指的是后端传递的数据。【视图】指的是所看到的页面。【视图模型】mvvm模式的核心,它是连接view和model的桥梁。它有两个方向:一是将【模型】转化成【视图】,即将后端传递的数据转化成所看到的页面。实现的方式是:数据绑定。二是将【视图】转化成【模型】,即将所看到的页面转化成后端的数据。实现的方...转载 2019-06-28 06:42:31 · 250 阅读 · 0 评论 -
mint-ui 使用
原创 2019-06-20 19:40:06 · 155 阅读 · 1 评论 -
vue 项目运行中热更新报错 log.error('[WDS] Errors while compiling. Reload prevented.');
log.error(’[WDS] Errors while compiling. Reload prevented.’);中的WDS其实是webpack-dev-serverwebpack的意思,用来实现自动刷新的。但你在Vue组件进行频繁刷新时,如果没有安装Webpack,虽然页面可以正常显示,但是控制台会在你每次刷新时就报错。解决方法是:在开发目录下安装Webpack,命令为npm insta...原创 2019-06-16 14:18:41 · 2059 阅读 · 0 评论 -
使用vue-cli 创建一个vue项目
使用vue-cli 创建vue 项目:1:安装vue包 npm install vue -g2:安装vue-cli 包 npm install vue-cli -g3: vue -V 查看是否安装成功4:初始化一个vue项目 vue init webpack +项目名称5:项目最后几项选择否,从过下载依赖包太慢, 使用cnpm 命令 在项目内 执行 cnpm install...原创 2019-05-30 15:31:11 · 187 阅读 · 0 评论 -
单文件组件基础模板
{{title}} //Js部分尽量采用ES6语法,webpack babel插件会转义兼容export default {//组件私有数据(必须是function,而且要return对象类型)data () {return {title: ‘组件标题’,firstName: ‘’,lastName: ‘’,}},//父组件...原创 2019-06-05 10:50:06 · 250 阅读 · 0 评论 -
vue 定义组件模板的七种方式(用单文件组件最好)
Vue 定义组件模板的七种方式(一般用单文件组件更好)在 Vue 中定义一个组件模板,至少有七种不同的方式(或许还有其它我不知道的方式):字符串模板字面量x-template内联模板render 函数JSF单文件组件在这篇文章中,我将通过示例介绍每个选项,并探讨利弊。以便你知道在任何特定情况下最适合的是哪一种。字符串默认情况下,模板会被定义为一个字符串。我想我们的观点会达成...转载 2019-06-05 11:23:20 · 444 阅读 · 0 评论 -
解决vue.js在编写过程中出现空格不规范报错的问题
我标注的这些地方,原本是有严格的空格规范要求的,这些报错真是另人烦躁呀o(╥﹏╥)o反正我把这个问题解决了,特别开心哒哒哒~~~转载 2019-05-31 04:10:18 · 2806 阅读 · 0 评论 -
vue 项目中,App.vue单文件组件代码是黑白色的解决方法
下载一个vetur插件就可以了原创 2019-05-31 04:13:07 · 5521 阅读 · 2 评论 -
vs code 在编写Vue过程中出现空格不规范报错的问题
注释或删除这些代码注释掉之后(重启vue服务),再进行子页面等编写的时候,空格不规范的情况下也不会再报错啦。注释或删除这些代码注释掉之后(重启vue服务),再进行子页面等编写的时候,空格不规范的情况下也不会再报错啦。...原创 2019-05-31 04:27:56 · 8679 阅读 · 0 评论 -
vue的路由问题
慕娘9325324路由,其实就是指向的意思,当我点击页面上的home按钮时,页面中就要显示home的内容,如果点击页面上的about 按钮,页面中就要显示about 的内容。Home按钮 => home 内容, about按钮 => about 内容,也可以说是一种映射. 所以在页面上有两个部分,一个是点击部分,一个是点击之后,显示内容的部分。点击之后,怎么做到正确的对应,比如,我...转载 2019-06-05 11:56:15 · 662 阅读 · 1 评论 -
美食城外卖app 项目开发过程中遇到的几个问题,以及解决方法
项目中遇到的问题:一:mysite 导航制作 2个问题1:轮播导航页面显示 第一个问题 将vuex store种储存的state的categorys 商品分类数组获取后,变化为2维数组,显示导航几页,每页至多8个元素2:延迟到界面数据更新之后立即创建swiper对象 怎么做?This.$nextTick(function(){创建swiper对象})二:star组件的实现过程(逻辑)...原创 2019-06-19 17:39:16 · 853 阅读 · 0 评论 -
浏览器Vue-devtools工具安装
默认安装需要打开goole网站,需要跳墙,这里下载它的代码来安装吧……git clone https://github.com/vuejs/vue-devtools.gitclone完成后,进入vue-devtools目录,首先执行命令npm install安装依赖:然后编译npm run build生成插件:打开Chrome浏览器的扩展程序:勾选开发者模式,才会显示箭头指向的两个按钮...翻译 2019-06-15 08:16:39 · 104 阅读 · 0 评论 -
快速理解npm install时--save和--save-dev的区别
dependencies和devDependencies在使用node开发时, 我们在工程中用到的包必须是package.json中列出。而dependencies和devDependencies是package.json中的两个属性. 我们要用的包在这两个属性中列出即可.dependencies列出的包用于生产环境.devDependencies用于开发环境和测试环境.-save和...转载 2019-06-15 15:57:27 · 1089 阅读 · 0 评论 -
vue2.0中的$router 和 $route的区别
最近在学习vue的单页面应用开发,需要vue全家桶,其中用到了VueRouter,在路由的设置和跳转中遇到了两个对象$router 和 $route ,有些傻傻分不清,后来自己结合网上的博客和自己本地的Vue devtools结构了解了他们的区别1.router是VueRouter的一个对象,通过Vue.use(VueRouter)和VueRouter构造函数得到一个router的实例对象,这个...转载 2019-06-16 11:38:08 · 103 阅读 · 0 评论 -
vue-router入门(2)—— 命名视图,重定向和别名
关于vue-router的入门,个人感觉官网的东西写的有点乱,所以打算整理一些场景搭配使用。所以可能会漏掉一些个人觉得几乎用不到的功能。有兴趣的可以去官网看完整版。1.命名视图需求:首页的头部比较特殊,我们以颜色区分,首页可能需要用到一个绿色的header,其他页面的头部则用红色的header。我们通过命名视图(name),来设置不同的路由中用不同的header和main模板。用命名视图实现...原创 2019-06-16 12:05:32 · 212 阅读 · 0 评论 -
this.$router.push、replace、go的区别
1.this.$router.push()描述:跳转到不同的url,但这个方法回向history栈添加一个记录,点击后退会返回到上一个页面。用法:2.this.$router.replace()描述:同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,不能跳转到上一个页面3.this.$router.go(n)相对于当前页面向前或向后跳转多少个页面,...原创 2019-06-16 12:10:32 · 93 阅读 · 0 评论 -
vue 路由传值的4种方法
对应的路由配置模块1、使用router.push拼接参数传参this.router.push 拼接参数传参 this.router.push拼接参数传参this.router.push(’/editCardetail?editType=add’)2 当点击 时,这个方法会在内部调用,即点击 等同于调用 router.push(…)a) 声明式:b) 编程式...翻译 2019-06-16 12:48:44 · 710 阅读 · 0 评论 -
vue stylus格式化问题
原创 2019-06-16 14:16:48 · 796 阅读 · 0 评论 -
Vue中css过渡动画原理
先来看一下简单的切换显示按钮我现在希望在Hello world能有一个渐隐渐现的效果那么就需要在div外层包裹一个transition标签当然只是这样是无法形成过渡效果的当你在外层加了transition标签之后,Vue会自动的构建一个动画的流程,当动画执行的一瞬间,他会往内部的div上增加两个class名字,分别是fade-enter和fade-enter-active,之所以是...转载 2019-07-04 03:57:48 · 304 阅读 · 0 评论