xuhuimingc的博客

函数函数的常用定义方式functionconst aaa=function(){}对象字面量中定义函数const obj={ bbb(){ }}ES6中的箭头函数//无参数和返回值const ccc=()=>{}//参数问题 2个const sum=(num1,num2)=>{ return num1+num2;}//1个参数 可以省略括号const power=num=>{ return num*num;}//函

路由简介网络工程术语把信息从源地址传输到目的地址的活动。前端路由前端路由的核心是：改变URL，但是页面不进行整体的刷新。很重要的一点是页面不刷新，前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，每跳转到不同的URL都是使用前端的锚点路由. 随着（SPA）单页应用的不断普及，前后端开发分离，目前项目基本都使用前端路由，在项目使用期间页面不会重新加载。优点：1.用户体验好，和后台网速没有关系，不需要每次都从服务器全部获取，快速展现给用户2.可以再浏览器中输入指定想要访问的u

脚手架什么是脚手架Vue CLI即脚手架。使用Vue.js开发大型应用时，需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等。如果手动完成这些工作，效率低效，使用脚手架可以帮助完成事情CIL：Command-Line Interface，翻译为命令行界面，俗称脚手架Vue CLI是一个官方发布vue.js项目脚手架使用vue-cil可以快速搭建Vue开发环境以及对应的webpack配置。使用前提安装NodeJS检测安装的版本node -vnpm

配置分离安装npm install webpack-merge@4.1.5分离在项目下创建build文件夹，建立3个js文件，对应base、dev和prod。删除原来的web.config.jsbase.config.jsconst path=require('path');const webpack=require('webpack');const HtmlWebpackPlugin=require('html-webpack-plugin');module.exports=

Plugin认识plugin插件、扩展打包优化、文件压缩等loader与plugin的区别loader主要用于转换某些类型的模块，是一个转换器plugin是插件，它是对webpack本身的扩展，是一个扩展器使用过程步骤一：通过npm安装需要使用的plugins步骤二：在web.config.js中的plugins中进行配置相关插件BannerPlugin这个是webpack自带的插件、为打包的文件添加版权声明。//在webpack.config.js中进行配置co

vue的终极形态el与template区别template会将html中的div替换掉Vue的组件化开发引入安装对应的loader解析.vue文件npm install vue-loader vue-template-compiler --save-dev在webpack.config.js中进行配置，依旧报错需要改为低版本<=13.0.0。{ test:/\.vue$/, use:['vue-loader']}...

webpack配置Vuenpm的配置方式npm install vue --save //并不是开发时依赖，运行时也需要//这个是CommonJS的模块化 浏览器不认识//需要使用webpack打包const {add,mul}=require('./js/mathUtils.js');console.log(add(1, 2));console.log(mul(3, 2));//3 依赖css文件 需要安装对应的loaderrequire('./css/normal.css'

图片的处理相关操作main.js//这个是CommonJS的模块化 浏览器不认识//需要使用webpack打包const {add,mul}=require('./js/mathUtils.js');console.log(add(1, 2));console.log(mul(3, 2));//3 依赖css文件 需要安装对应的loaderrequire('./css/normal.css');normal.cssbody{ background-color: rebec

ES6语法处理安装对应的loadernpm install --save-dev babel-loader@7 babel-core babel-preset-es2015配置{ test:/\.js$/, //exclude 排除 //include 包含 exclude:/(node_modules|bower_components)/, use:{ loader:'babel-loader',

webpack相关现代的JavaScript应用的静态模块打包工具webpack其中的一个核心就是尽可能的进行模块化的开发，而且会帮助我们处理模块间的依赖关系。不仅仅是JavaScript文件，CSS、图片、json文件等在webpack中都可以作为模块来使用。和gulp对比：gulp的核心是Task,也称为前端自动化任务管理工具。gulp更加强调流程的自动化、模块化不是它的核心。webpack强调模块化开发管理，而文件压缩合并、预处理等功能，是它附带的功能。依赖node环境、为了可以正常

作用域需要区分子组件的作用域和Vue实例的作用域。父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。作用域插槽的使用父组件替换插槽的标签，但是内容由子组件来提供。<div id="app"> <cpn></cpn> <!--目的是获取子组件的pLanguage--> <cpn> <template slot-scope="slot">

模块化前端模块化常见的模块化规范有：CommonJS导出：语法：module.exports={ flag:flag, sum:sum}导入：//从相应的js文件中导入var {flag,sum}=require('./aaa,js')AMD、CMD以及ES6的ModulesnES6模块化的导入和导出exportimportname='小明';var age=12;var flag=true;function sum(num1,num2) { retur

访问方式父子组件的访问方式父组件访问子组件使用$children:包含所有的组件或者$refs<div id="app"> <!--这里使用</cpn>的话不会显示按钮--> <cpn ref="bbb"></cpn> <cpn ref="ccc"></cpn> <cpn ref="aaa"></cpn> <button @click="btnClick

使用watch实现13中的功能<div id="app"> <cpn :number1="num1" :number2="num2" @num1-change="num1Change" @num2-change="num2Change"></cpn></div><template id="cpn"> <div> <h2>{{number1}}</h2> <

slot插槽意义让组件具有更多的扩展性让使用者决定展示的内容基本使用<!--1.插槽的基本使用<slot></slot>2.默认值<slot><button>默认按钮</button></slot>3.如果有多个值，同时放入到组件进行替换时，一起作为替换元素--><div id="app"> <cpn><button>按钮</button>&l

组件通信子组件向父组件传递<div id="app"> <!--父组件模板--> <cpn @item-click="cpnClick"></cpn></div><!--2. template标签--><template id="cpn"> <div> <button v-for="item in categories" @click="btnClick(item

组件之间的通信父子组件的通信父组件通过props向子组件传递数据子组件通过事件向父组件发送消息<div id="app"> <!--<cpn v-bind:cmovies="movies" :cmessage="message"></cpn>--> <cpn :cmessage="message"></cpn> <!--<cpn v-bind:cmovies="movies"></cp

vue组件相关语法糖的写法<div id="app"> <!--3 使用组件--> <!--全是小写的--> <cpn2></cpn2></div><script src="../js/vue.js"></script><script>//语法糖 注册全局组件Vue.component('cpn1',{ template:`<div><h1&

组件化的实现和使用步骤组件化将一个页面拆分成一个个小的功能块，每个功能块完成属于自己部分的独立的功能，便于页面的管理和维护任何的应用都会被抽象成一棵组件树注册组件的基本步骤创建组件构造器注册组件使用组件<div id="app"> <!--3 使用组件--> <my-cpn></my-cpn></div><script src="../js/vue.js"></script>&l

修饰符lazy修饰符默认情况下，v-mode默认是在input事件中同步输入框的数据的。lazy修饰符可以让数据在失去焦点或者回车时才会更新<div id="app"> <input type="text" v-model.lazy="message"> <h2>{{message}}</h2></div><script src="../js/vue.js"></script><scr

V-model双向绑定之input原理：v-bind绑定一个value属性 v-on 指定给当前元素绑定input事件。<div id="app"> <!--双向绑定--> <!--<input type="text" v-model="message">--> <!--实现原理--> <!--<input type="text" :value="message" @input="valueChan

高级函数for循环的几种方式totalPrice(){ let totalPrice=0 // for(let i =0;i<this.books.length;i++){ // totalPrice+=this.books[i].price*this.books[i].count // } for(let book of this.books){ totalPrice+=book.price*book.count } return totalPrice //retur

<style> .active{ font-size:x-large; }</style><body><div id="app"> <!--key的作用主要是为了高效的更新虚拟DOM--> <li v-for="(item,index) in names" :class="{active:currentIndex === index}" @click="liClick(index)">{.

常用指令v-if 和 v-else v-else-if<div id="app"> <!--<h2 v-if="isShow">{{message}}</h2>--> <!--<h1 v-else>isShow为false时，显示我</h1>--> <!--<h2 v-if="score>=90">优秀</h2>--> <!--<h2 v-

案例描述用户再登陆时，切换使用用户账号登录还是邮箱地址登录<div id="app"> <span v-if="isUser"> <label for="username">用户账号</label> <input type="text" id="username" placeholder="用户账号" key="username"> </span> <!--Vue在进行DOM渲染时，出

事件监听v-on的参数问题<div id="app"> <button @click="btn1Click()">按钮1</button> <button v-on:click="btn1Click">按钮2</button> <!--默认将浏览器生成的Event传入 输出Event--> <button @click="btn2Click">按钮3</button> &l

计算属性基本使用<div id="app"> <h2>{{getFullName()}}</h2> <!--计算属性不用加小括号--> <h2>{{fullName}}</h2></div><script src="../js/vue.js"></script><script>const app = new Vue({ el: '#app',

ES6let(ES6)/var(ES5)var的设计可以看成是JavaScript语言设计上的错误，但是这种错误多半不能修复和移除，需要向后兼容。let可以看成更完美的var。块级作用域ES5之前因为if和for都没有块级作用域的概念，所以在很多时候都需要借助函数的作用域。块作用域由 { } 包括，if语句和for语句里面的{ }也属于块作用域。函数是有作用域的。<div id="app"> <button>按钮1</button> &lt

动态绑定v-bind除了内容需要动态决定外，某些属性也希望能够动态绑定比如动态绑定a元素的href属性比如动态绑定img元素的src属性v-bind指令可以动态绑定属性<div id="app"> <img v-bind:src="imgURL" alt=""> <a v-bind:href="href">百度一下</a> <!--语法糖的写法--> <img :src="imgURL" alt=""&g

vue相关操作Mustache语法即双大括号语法。<div id="app"> <h2>{{message}}</h2> <h2>{{'这是'+firstName+' '+lastName}}</h2> <h2>{{counter*2}}</h2></div><script src="../js/vue.js"></script><script&gt

入门简单使用<script src="../js/vue.js"></script><div id="app"> {{message}} {{movies}}</div><script>const app = new Vue({ el:'#app', //用于管理要管理的元素 data:{ //定义数据 或者服务器请求数据 message:'你好啊', movies:['给你

认识vue.jsVue是一个渐进式的框架渐进式 将Vue作为应用的一部分嵌入也可以使用Vue的核心库以及生态系统Core+Vue-router+VuexVue特点解耦视图和数据可复用的组件前端路由技术状态管理虚拟DOMVue安装方式直接CDN引入<!-- 开发环境版本，包含了有帮助的命令行警告 --><script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script&g