1,拿到一个项目，里面没有node_modules得先cmd 到这个目录下面，cnpm install 安装依赖安装后，npm run serve发现报错，少了eslint在page.json配置下，添加 "eslintConfig": { "root": true, "env": { "node": true }, "extends": [ "plugin:vue/essential", "eslint:recommended" ], "rules": {}, "parserOptions": { "parser": "babel-eslint" } }再运行，发现有 eslint格式bug, ...
vue.js的组件使用过程分为三个步骤：1、创建组件构造器； 2、注册组件； 3、使用组件组件同时也分为全局组件与局部组件 1、全局组件 2、局部组件 注意：由于 HTML 标签不区分大小写，所以在生成的标签名都会转换为小写。例如，当你的 template 为 <MyComponent></MyComponent> 时，插入 DOM 后会被转换为 <mycomponent></mycomponent>。原文：http://www.cnblogs.com/caojiayan/p/6866941.html
1. router-link跳转 // 直接写上跳转的地址<router-link to="/detail/one"><span class="spanfour">link跳转</span></router-link>// 添加参数<router-link :to="{path:‘/detail/two‘, query:{id:1，name:‘vue‘}}"></router-link>// 参数获取id = this.$route.query.id// 新窗口打开<router-link :to="{path:‘/detail/three‘, query:{id:1，name:‘vue‘}}" target="_blank"></router-link> 2. this.$router.push跳转 t...
父子组件通信父 通过$ref属性给 子传递数据子 操作 父 this.$parent.XXX或者通过vue-busvue-bus既可以实现父子组件之间的通信，也可以实现兄弟组件之间的通信vue-bus安装(c)npm install vue-bus引入import Vue from ‘vue‘; import VueBus from ‘vue-bus‘;Vue.use(VueBus);应用：发送：this.$bus.$emit(‘closeMenu‘, {}); 接收： this.$bus.on("closeMenu", () => {this.isOpen = false; }); 参考链接：https://cn.vuejs.org...
今天主要复习一下我们最熟悉vue指令，想要代码撸得快，就要多看书，多看看官方的文档和学习指令，学习编程是一个非常享受的过程，尤其是你不断地去解决问题，获得一项技能，实现薪水的上涨。进行Vue的指令烹饪吧。v-text ：string 用法：更新元素的textContent,更新部分的textContent，需要使用{{Mustache}}插值v-html： string 用法：更新元素的innerHTML；注意：网站动态渲染任意HTML，容易导致XXS攻击v-show：any 用法：根据表...
//html:<div id="app"> <p>{{msg}}<p></div>//script 需要引入jar包vue-2.4.0.js <script> var vm = new Vue({ el:‘app‘ data:{msg:‘hello，vue‘ } })</sctipt>说明：p标签中的两个大括号 叫做 插值表达式，顾名思义就是 插入值用的vue对象中的el 就是为了表示 new的这个vue对象是用来控制页面上的那个区域。data中存放的是el中要使用到的数据。另外说一点 页面中需要用到的数据都需要在data中声...
步骤：创建一个空Vue实例，也就是一个 bus （ 事件总线 ）一个组件注册事件（ bus.$on(事件名称, () => {}) ）另一个组件触发事件（ bus.$emit(事件名称, 数据) ）注意：一定要是同一个 bus！！！ <div id="app"><jack></jack><rose></rose></div><script src="./vue.js"></script><script>// 创建一个busconst bus = new Vue()Vue.component('jack', {template: `<div>我是jack，我要对 rose 说：<button @click="fn">告诉rose：...
一、子父组件1、子组件获得父组件中的值：通过v-bind方式绑定在子组件中// 子组件中定义propsprops: [‘msg‘]// 父组件中： <deleteBar :msg=‘this.xx‘ :name=‘this.yy‘></deleteBar> //在以html元素方式插入子组件的位置，用:msg的方式绑定已经在子组件中定义的参数，=‘this.xx‘引用父组件中的值2、子组件中调用父组件中的方法1> 绑定在子组件定义的元素位置，在子组件中用emit方法触发，与传递值的方法相似// 子组件： //...
在用npm run build 打包的时候，正常img标签中的src图片路径和css中的图片路径是可以正常识别的，但是在打包js获取的图片路径时，打包后无法找到图片，原因是js动态生成的路径无法被url-loader解析到，如果你去build，会发现图片甚至不会打包输出到dist目录（webpack是按需打包的）。如果你是vue-cli初始化的项目，解决的办法：第一步，把图片放到src同级的static目录（build/build.js文件中有一段代码是把static目录拷贝到dist/st...
在开发项目的过程中，有时修改后台的数据变化可能不会及时更新到页面上，此时就需要我们刷新页面更新数据，但是直接调用刷新window.location.reload()可能对操作的体验不是很好，所以就需要下面的方法。列举个场景，比如修改主体content内容，我想要刷新主体部分的组件，但是不刷新title和aside组件，怎么实现呢？实现方法就是在想要刷新的组件中封装一个方法，当需要刷新页面时直接调用这个方法就可以无痕迹刷新这个组件（页面）！...
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>hello world</title></head><body> <div id="app"> <div> <!-- 4、<router-link>默认会被渲染成一个 `<a>` 标签 ,to指令跳转到指定路径 --> <router-link to="/home">Go to Home</router-link> <router-link to="/about">Go to About</router-link> </div> <!-- 5、在页面上使用<router-vie...
朝颜陌 vue基础----组件通信（props,$emit,$attrs,$listeners）一、父传子，子传孙 1. props 1>在父组件中通过子组件自定义的标签属性来传递数据。 2>在子组件中通过props声明希望用到的数据 1 <body>2 <div id="app">3 <my-father :msg1="msg" a="10" :b="20" @click1="fn"></my-father>4 </div>5 <script src="./node_modules/vue/dist/vue.js"></script>6 <script>7 let vm =...
最近用Spring Boot和Vue Element实现了一个微型项目，该项目自构思到第一个版本的实现用了1个月的时间。当然大部分都是下班后，加班到11点做的；但是从功能实现到细节优化用了3个月的时间。“做”是一回事，“做好”是另外一回事。当然花了3倍的工作量，也不见得就做的很到位。闲话少叙，言归正传。本文介绍我用SpringBoot和Vue实现的文件上传功能。1. 实话说，做一个文件上传并不难。方法无外乎利用自己以前写的代码，或者用搜索引...
mpvue... 坑怎么说呢，去github看一下，发现还是有很多问题没有解决。。。不支持filter亲，到现在还没有支持filter哦。只能用替代方法了，用computed或者渲染前先处理数据。无奈...组件只能有一个slot这个还是有影响的，只能限制一下组件了。无奈...原文：https://www.cnblogs.com/blogs-xlf/p/11137364.html
首先先安装 node.js ，没安装的朋友请自行百度，或查看（https://www.runoob.com/nodejs/nodejs-install-setup.html） 安装教程。安装成功后，打开命令行，输入 node -v 检查版本，如果出现如下图，则表示安装成功。 接下来就是用 npm包管理器 创建项目了。npm 是随同 NodeJS 一起安装的包管理工具，命令行输入 npm -v 来检查npm版本，如下图 有些 npm 国外资源会被屏蔽，所以经常导致安装失败，所以建议大家安装国内镜像 cnpm。在...