写在前面这篇文章的主要目的是学会使用koa框架搭建web服务,从而提供一些后端接口,供前端调用。搭建这个环境的目的是: 前端工程师在跟后台工程师商定了接口但还未联调之前,涉及到向后端请求数据的功能能够走前端工程师自己搭建的http路径,而不是直接在前端写几个死数据。即,模拟后端接口。当然在这整个过程(搭建环境 + 开发示例demo)中,涉及到以下几点知识点。包括:koa2的知识点node的知识点跨域问题fetch的使用axios的使...
webpack会搜索当前目录中的webpack.config.js文件,webpack.config.js是一个node.js模块,返回一个json格式的配置信息对象。(简单说webpack.config.js是webpack的配置文件) asp.net mvc理论qq群 516356157原文:http://www.cnblogs.com/dagedan/p/5652302.html
App.vue<template><div id="app"><h3>welcome vue-loading</h3><Loading></Loading> <!--<Loading></Loading>是自定义组件--> </div></template>main.jsimport Vue from ‘vue‘ import App from ‘./App.vue‘import Loading from ‘./components/loading‘ //定义Loading,components、loading是一个文件夹,loading里面必须要index.jsVue.use(Loading) //use Loadingnew Vue({el: ‘#app‘,render: h => h(App) })index....
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 =...