Vue
崔世勋
这个作者很懒,什么都没留下…
展开
-
vue项目中使用svg图标
安装依赖npm install svg-sprite-loader --save-dev2、配置build文件夹中的webpack.base.conf.js3、在src/components下新建文件夹及文件SvgIcon/index.vue<template> <svg :class="svgClass" aria-hidden="true" ...转载 2019-11-05 16:08:32 · 451 阅读 · 0 评论 -
vue中key属性的作用
在列表渲染时使用key属性当Vue.js用v-for正在更新已渲染过的元素列表时,它默认用“就地复用”策略,如果数据项的顺序被改变,Vue将不会移动DOM元素来匹配数据项的顺序,而是简单复用此处每个元素,并且确保它在特定索引下显示已被渲染过的每个元素。<div v-for="num in numbers"> {{num}}</div>numbers的值...转载 2019-11-01 15:06:35 · 915 阅读 · 0 评论 -
spring boot 2.0+vue 通过websocket 向前端推送信息
websocket协议基于tcp的网络协议,它实现浏览器与器全双工通信。spring boot2 +websocket1、添加依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-b...转载 2019-10-28 15:25:41 · 577 阅读 · 0 评论 -
vue源代码调试方法
vue.js devtools开发工具的使用在chrome或firefox浏览器的扩展插件仓库里搜索vue devtool。假设我们想调试App.vue这个组件,可以在想要调试的代码前添加debugger,然后运行npm run dev, 确保浏览器devtool已启动,这里可以看到程序进入App.vue组件mounted这个组件生命周期函数里后,程序就被debug住了,后面...转载 2019-10-22 16:36:06 · 593 阅读 · 0 评论 -
webpack中的sourcemap
sourcemap和Data URL1、sourcemap我们在打包中,将开发环境中源代码经过压缩、去空格、babel编译转化,最终可以得到适用于生产环境的项目代码,这样处理后的项目代码和源代码之间差异性很大,会造成无法debug的问题。sourcemap就是为了解决上述代码定位的问题,简单理解,就是构建了处理前的代码和处理后的代码之间的桥梁,主要是方便开发人员的错误定位。2、Da...转载 2019-10-22 16:29:16 · 452 阅读 · 0 评论 -
vue .sync修饰符
在一些情况下,我们可能会需要对一个prop进行双向绑定,但它破坏了单向数据流。在vue 2.3.0,重新引入了.sync修饰符,这是一个语法糖。例子:<child :foo.sync=”msg”></child> 就会被扩展为: <child :foo=”bar” @update:foo=”val => bar = val”> ...转载 2019-10-21 13:40:08 · 159 阅读 · 0 评论 -
vue click.stop阻止点击事件继续传播
<div id="app"> <div v-on:click="dodo"> <button v-on:click="doThis">阻止单击事件继续传播</button> </div> </div> <script> va...转载 2019-10-21 13:25:20 · 762 阅读 · 0 评论 -
vue 登陆页面实现回车登陆
在登陆页的mouted生命周期方法中,添加document.onkeydown = function (e) { if(!e){ e = window.event; } console.log(_this.$route.path); // path替换成自已的登陆path if((e.keyC...原创 2019-10-16 16:13:29 · 497 阅读 · 0 评论 -
前后端分离后验证码处理
前端获取验证码其实不难,后端验证:(1)把生成的验证码放在全局的的缓存中,如redis,并设置一个过期时间。(2)前端验证时,需要把验证码的id也带上,供后端验证。...转载 2019-08-14 13:48:17 · 2893 阅读 · 2 评论 -
vue ref
ref被用来给元素或子组件注册引用信息,引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用,引用指向的就是DOM元素,如果用在子组件上,引用就指向组件实例。<!-- `vm.$refs.p` will be the DOM node --><p ref="p">hello</p><!-- `vm.$refs.child` ...转载 2019-07-18 10:35:22 · 247 阅读 · 0 评论 -
package-lock.json
package.json文件只能锁定大版本,也就是版本号的第一位,并不能锁定后面的小版本,在npm 5时添加package-lock.json。所以从此以后npm会根据package-lock.json里的内容来处理和安装依赖而不是package.jsn。...转载 2019-07-11 16:26:17 · 279 阅读 · 0 评论 -
vue .postcssrc.js
module.exports = { "plugins": { "postcss-import": {}, //用于@import导入css文件 "postcss-url": {}, //路径引入css文件或node_modules文件 "postcss-aspect-ratio-mini": {}, //用来处理元素容器宽高比 ...转载 2019-07-11 16:08:39 · 935 阅读 · 0 评论 -
ESlint配置文件eslintrc.js
/** * 参考文档 * 【eslint英文文档】https://eslint.org/docs/user-guide/configuring * 【eslint中文文档】http://eslint.cn/docs/rules/ */ /** * eslint有三种使用方式 * 【1】js代码中通过注释的方式使用 * 【2】通过webpack的eslintConfig字段设置,...转载 2019-07-11 15:59:44 · 1298 阅读 · 0 评论 -
css预处理器: sass、less和stylus
css预处理器是一种语言用来为css增加一些编程的特性,无需考虑浏览器的兼容性问题,最为普遍的三款CSS预处理器框架分别是Sass、Less Css、Stylus。css-loader它在作用在于在使用webpack打包的时候,如果碰到import xxx.css, 就使用css-loader加载.css文件内容写入打包的js代码。对于sass,less, stylus肯定也需要对应的...转载 2019-07-18 10:21:32 · 174 阅读 · 0 评论 -
Vue中的冒号变量
在使用Vue中经常看到HTML中有标签属性前面添加了“:”,有些没有。其实是v-bind的缩写。v-bind缩写: ‘:’ 用法:动态绑定一个或多个特性,或一个组件prop到表达式。在绑定class或style特性时,支持其它类型的值,如数组或对象。在绑定prop时,必须在子组件中声明。可以用修饰符指定不同的绑定类型。没有参数时,可以绑定到一个包含键值对的对象,注意此时class和s...转载 2019-07-18 08:48:18 · 3278 阅读 · 0 评论 -
Vue 模板语法
如果你熟悉虚拟DOM并且偏爱JavaScript的原始力量, 也可以不用模块, 直接写渲染函数, 使用可选的JSX语法.1. 插值(1) 文本数据绑定最常见的形式就是使用"Mustache"语法(双大括号)的文本插值:<span>Message: {{ msg }}</span>mustache标签将会被替代为对应数据对象上msg属性的值, 无论何时,...转载 2019-07-03 10:04:08 · 293 阅读 · 0 评论 -
Vue基础
1. 计算属性<div id="example"> <p>Original message: "{{ message }}"</p> <p>Computed reversed message: "{{ reversedMessage }}"</p></div>var vm = new Vue({ el...转载 2019-07-03 13:45:59 · 137 阅读 · 0 评论 -
Vue 组件
1.组件注册(1) 全局注册通过Vue.componet创建的组件是全局注册的, 也就是说它们在注册之后可以用在任何创建的Vue根实例的模板中.(2)局部注册如果你使用一个像webpack这样的构建系统, 全局注册所有的组件意味着即便你已经不再使用一个组件了, 它仍然会被包含在你最终的构建结果中. 这会造成用户下载的JavaScript的无谓的增加.在这些情况下, 可以通过一个...转载 2019-07-03 14:46:21 · 208 阅读 · 0 评论 -
package.json文件说明
Node.js项目遵循模块的架构, 当我们创建一个Node.js项目, 意味着创建一个模块, 这个模块的描述文件, 被称为package.json. npm install 命令根据这个配置文件, 自动下载所需的模块.属性说明name - 包名version - 包的版本号description - 包的描述author - 包的作者private - 为true时, np...转载 2019-07-04 09:54:46 · 323 阅读 · 0 评论 -
vue脚手架目录
├── README.md 项目介绍├── index.html 入口页面├── build 构建脚本目录│ ├── build-server.js 运行本地构建服务器,可以访问构建后的页面│ ├── build.js 生产环境构建脚本│ ├── dev-client.js ...转载 2019-07-04 10:04:09 · 235 阅读 · 0 评论 -
*.vue文件
.vue文件是一个自定义的文件类型, 用类似HTML的语法描述一个Vue组件, 每个.vue文件包含三种类型的顶级语言块<template> , <script>和<style>. 这三个部分代表了html, js, css.其中<template>和<style>是支持用预编译语言来写的,<template>...转载 2019-07-04 10:29:28 · 997 阅读 · 0 评论 -
vue生命周期
主要的生命周期函数:(1) beforeCreate实例刚在内在中被创建出来, 此时, 还没有初始化好data和methods属性.(2) created实例已经在内在中创建ok, 此时data和methods已经创建ok, 但还没有开始编译模板.(3) beforeMount此时已经完成了模板的编译, 但是还没有挂载到页面中.(4) mounted此时,...转载 2019-07-04 10:48:18 · 163 阅读 · 0 评论 -
vue中main.js 里的/* eslint-disable no-new */
在js里面, new一个对象, 需要赋值给某个变量, 用Vue实例化的时候, 不需要赋值给变量, 所以需要eslint-disable转载 2019-07-04 10:54:23 · 348 阅读 · 0 评论 -
Vue router
如果在一个模块化工程中使用它, 必须要通过Vue.use()明确地安装路由功能.import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)Vue.use(plugin) , 安装Vue.js插件, 该方法需要在调用new Vue()之前被调用, 如果插件是一个对象, 必须提供install方法...转载 2019-07-04 13:51:10 · 241 阅读 · 0 评论 -
Vuex
Vuex是一个专门为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态, 并以相应的规则保证状态以一种可预测的方式发生变化。每一个Vuex应用的核心就是store(仓库)。 “store”基本上就是一个容器, 它包含着你的应用中大部分的状态(state).Vuex和单纯的全局对象有以下两点不同:(1) Vuex的状态存储是响应式的。 当Vue组件从stor...转载 2019-07-11 10:50:09 · 167 阅读 · 0 评论 -
babel配置文件.babelrc基本配置项
ES6是2015年发布的下一代javascript语言标准, 它引入的新的语法和API, 使我们编写js代码更加得心应手。比如class、let、for...of promise等等这样的, 但是可惜的是这些新特性只被最新版本的浏览器支持,但是低版本浏览器并不支持, 那么低版本浏览器下就需要一个转换工具, 把es6代码转换成浏览器能识别的代码, babel就是这样一个工具。在Babel执行编译...转载 2019-07-11 15:24:50 · 4989 阅读 · 0 评论 -
editorConfig编辑器配置
EditorConfig包含一个用于定义代码格式的文件和一批编辑器插件,这些插件(各种IDE的插件)是让编辑器读取配置文件并以此来格式化代码。常用属性配置1、root<boolean>是否是顶级配置文件,设置为true的时候才会停止搜索.editorconfig文件。2、chartset编码格式3、indent_style<tab|space>缩...转载 2019-07-11 15:37:30 · 330 阅读 · 0 评论 -
Vue入门
0. 安装(1) Vue Devtools在使用Vue时, 我们推荐在你的浏览器上安装Vue Devtools. 它允许你在一个更友好的界面中审查和调试Vue应用.(2) 直接<script>引入直接下载并用<script>标签引入, Vue会被注册为一个全局变量.(3) npm在用Vue构建大型应用时推荐使用npm安装, npm能很好的和诸如web...转载 2019-07-03 09:11:09 · 133 阅读 · 0 评论