Vue.js
关注
分享
扫一扫
道雄
在前端的道路上不断学习向前
展开
-
elementUI中遇到 [Vue warn]: Invalid prop: custom validator check failed for prop "status"
一、使用 过程中遇到Invalid prop: custom validator check failed for prop “status”原因排查1.status属性值中有空格 <el-progress :percentage="stepPercentage(item.step)" status=" success"></el-progress>原因排查2:...原创 2020-04-23 16:10:14 · 7089 阅读 · 3 评论 -
VUE学习之props组件
官方学习网站：https://cn.vuejs.org/一个关于props详细介绍的文件 https://blog.youkuaiyun.com/jingtian678/article/details/81160995简单易懂，推荐查看1.Prop 的大小写 (camelCase vs kebab-case)HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使...原创 2019-03-21 12:54:15 · 260 阅读 · 0 评论 -
vue之氮单元素/组件的过渡（过渡到类名）
一、概述Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡条件渲染 (使用 v-if)条件展示 (使用 v-show)动态组件组件根节点当插入或删除包含在 transition 组件中的元素时，Vue 将会做以下处理：1.自动嗅探目标元素是否应用了 CSS 过渡或动画，如果是，在恰当的时机添加/删除 CSS 类名。2、如果过渡...原创 2019-03-25 11:15:57 · 222 阅读 · 0 评论 -
javascrip钩子函数
1.钩子函数可以理解为回调函数，生命周期函数就是钩子函数，当执行到某一步时，就会触发可以在属性中声明钩子<transition v-on:before-enter="beforeEnter" v-on:enter="enter" v-on:after-enter="afterEnter" v-on:enter-cancelled="enterCancelled" v...原创 2019-03-25 11:36:28 · 425 阅读 · 0 评论 -
vue学习之——css预处理器：stylus-loader
1.stylus-loader简介1.stylus-loader使用模块化的方法去写css代码2.使用过程stylus-loader，用来处理stylus文件，处理完成之后是css代码，然后传给css-loader处理，3.webpack的好处，很多个stylus搭配使用2.安装stylus-loader和stylus插件在控制台进入项目目录，输入如下命令cnpm install ...转载 2019-03-18 16:42:55 · 9601 阅读 · 0 评论 -
Vue2的核心知识
vue官方学习网站： https://cn.vuejs.org/1.数据绑定概念：把JavaScript中写的数据与html中的数据绑定，一旦JavaScript中有变化，相对应的html中的数据也会发生变化2.vue文件的开发方式因为vue是一个组件化的框架，因为显示在页面的内容大部分是组件拼接而成的 、在一个文件中定义了组件需要的所有方式，数据和css，这样会很方便如：app.vu...原创 2019-03-18 17:43:36 · 286 阅读 · 0 评论 -
vue学习之插槽
官方学习网站 https://cn.vuejs.org/1.Vue中插槽的使用和方法 定义一个名child子组件，为该子组件添加内容应该在子组件的template中定义，直接在父组件的<child>标签中定义的内容不会被渲染，如下例。<div id="root"> <child> 需要插槽才能渲染的内容 ...原创 2019-03-22 11:28:15 · 352 阅读 · 0 评论 -
vue学习——vue数据
<div id="app"> {{ message }}</div>var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})上面是创建了一个vue实例，创建vue实例时，数据的定义方式是以对象的形式在实例中给出，在创建实例时，也会定义方法，同样以对象的形式。这里的实例...原创 2019-03-22 14:01:10 · 291 阅读 · 0 评论 -
vue学习之——动态插槽名
1.具名插槽的缩写跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：<base-layout> <template #header> <h1>Here might be a page title</h1&g...原创 2019-03-22 14:59:31 · 9180 阅读 · 0 评论 -
配置vue的jsx写法以及postcss
1.安装必要的插件安装 postcss-loader autoprefixer babel-loader babel-corecnpm install postcss-loader autoprefixer babel-loader babel-core2.在根目录下创造两个文件.babelic和postcss.config.js//postcss.config.jsconst ...原创 2019-03-19 09:54:30 · 502 阅读 · 0 评论 -
vuejs学习之组件注册
官方网站 https://cn.vuejs.org/为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：Vue.component('my-component-name', { // ... options ...})全局注册的组件可以用在其被注册之后的任何 (...转载 2019-03-21 10:28:17 · 359 阅读 · 0 评论 -
vue学习之组件基础
1.组件可以被复用，2.每个组件都会各自独立维护它的 count。因为每用一次组件，就会有一个它的新实例被创建。3.vue组件示例// 定义一个名为 button-counter 的新组件Vue.component('button-counter', { data: function () { return { count: 0 } }, templ...原创 2019-03-20 17:24:39 · 199 阅读 · 0 评论 -
webpack Dev Server Invalid Options options should NOT have additional properties 解决办法
出现上面问题的原因是webpack.config.js中config.devServer 配置出现了问题const config = { ...}if(isDev) { config.devServer = { port: 8000, host: '0.0.0.0', overlay: { errors: true,...原创 2019-03-19 15:21:11 · 48381 阅读 · 8 评论 -
VUE学习——模板语法（更新中）
Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。所有 Vue.js 的模板都是合法的 HTML ，所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。如果你熟悉虚拟 DOM 并且偏...转载 2019-03-15 10:08:08 · 339 阅读 · 0 评论 -
VUE学习之四——常用指令
1.处理用户输入1.v-modal：轻松实现表单输入和应用状态之间的双向绑定<div id="app-6"> <p>{{ message }}</p> <input v-model="message"></div>var app6 = new Vue({ el: '#app-6', da转载 2019-03-15 11:12:55 · 163 阅读 · 0 评论 -
vue学习之三——计算属性和侦听器
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如：1.计算属性&lt;div id="example"&gt; {{ message.split('').reverse().join('') }}&lt;/div&gt;在这个地方，模板不再是简单的声明式逻辑。你必须看一段时间才能意识到，这里是想要显示变量 message ...原创 2019-03-15 11:22:12 · 148 阅读 · 0 评论 -
vue学习之五——class与style绑定
TPshop 中国开源商城系统 - 开源学习系统 立即查看 >操作元素的 class 列表和内联样式是数据绑定的一个常见需求。因为它们都是属性，所以我们可以用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。因此，在将 v-bind 用于 class 和 style 时，Vue.js 做了专门的增强。表达式结果的类型除了字符串之外，还可以是对象或数...转载 2019-03-15 13:23:22 · 158 阅读 · 0 评论 -
vue学习之六——条件渲染
v-if ,v-else,v-elseif<div v-if="type === 'A'"> A</div><div v-else-if="type === 'B'"> B</div><div v-else-if="type === 'C'"> C</div>转载 2019-03-15 14:12:40 · 181 阅读 · 0 评论 -
webpack配置css单独分离打包——正式环境打包优化
vue官方学习网站： https://cn.vuejs.org/1.文件中的css会打包成了js形式如何优化1.将css打包成一个单独的文件（1）安装插件extract-text-webpack-plugincnpm install --save extract-text-webpack-plugin（2）在webpack.config.js 中引入一个常量const Extrac...原创 2019-03-20 13:46:44 · 2248 阅读 · 0 评论 -
webpack区分打包类库代码及hash优化
vue官方学习网站： https://cn.vuejs.org/单独打包类库文件（就是vue框架）和一些第三方引入的包，因为这些包和框架的稳定性是比较高的，但是业务代码经常时更新变化的，我们希望浏览器尽可能长时间的缓存我们的文件，如果把业务代码和类库代码打包在一起，那么整个js代码都会跟着业务代码更新而更新，这样，类库代码就不能很长时间的在我们的浏览器里缓存而且更新，一般我们会希望通过减少浏览器...原创 2019-03-20 14:39:49 · 316 阅读 · 0 评论 -
event.stopPropagation()和event.preventDefault()
1.event.preventDefault()preventDefault() 方法阻止元素发生默认的行为（例如，当点击提交按钮时阻止对表单的提交）2.event.stopPropagation()event.stopPropagation() 方法阻止事件冒泡到父元素，阻止任何父事件处理程序被执行。尤其是点击事件。<!DOCTYPE html><html>&...原创 2019-03-20 16:23:51 · 449 阅读 · 0 评论 -
vue学习之——事件处理
官方学习文档： https://cn.vuejs.org/1.监听事件可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。2.事件处理方法<div id="example-2"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="greet">Greet</...原创 2019-03-20 16:44:34 · 129 阅读 · 0 评论 -
webpack-dev-server的配置和使用
vue官方学习网站： https://cn.vuejs.org/1.在package.js中配置在scripts：标签中加入一行 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --config webpack.config.js", ...原创 2019-03-19 15:20:04 · 1440 阅读 · 0 评论