k19970320j的博客

样式绑定示例注意事项1、在html文件中，不能加多余的空格// Error<h3 :class={ 'cls2' : count }>{{ msg }}</h3>2、在数组中，样式可以使用三元表达式，对象中不行<h3 :class=[count?'cls1':'cls2']>{{ msg }}</h3>...

VueJS中的slot插槽语法是定义组件不可获取且非常重要的语法，本篇文章将介绍一下VueJS中slot的学习笔记。在Vue2.6.0的版本中，Vue团队为具名插槽和作用域插槽引入了一个新的统一语法（v-slot）指令。它取代了slot和slot-scope，但是旧的语法没有被移除插槽内容Vue实现了一套内容分发API，这套API的设计灵感源自Web Components规范草案，将&l...

在开发过程中，必不可少的会使用console去开发调试代码，但是生产环境下，又不想让用户看到，如果手动去删除，又显得麻烦。因此我们可以使用webpack提供的插件去清楚console安装npm install terser-webpack-plugin -D在vue.config.js中配置configureWebpack: config => { if (process.e...

好的编程习惯能够减少错误发生的概率，编码习惯好的人写出来的代码可读性好、可维护性高，规范编码风格习惯，降低团队之间的沟通成本。本文将介绍VueJS的编码规范组件名为多个单词组件名应该始终是多个单词，根组件App以及<transition>，<component>之类的内置组件除外。这样做可以避免跟现有的以及未来的HTML元素相冲突，因为所以的HTML元素名称都是单个...

模块化在web应用中，随着项目的规模越来越大，模块化的出现是一个必然的结果。由于在js文件里面声明的变量都会被附加在全局的window对象上，这样很可能会污染其它全局变量，因此模块化的出现，让js文件之间互不影响，使项目更加利于维护。主流的模块规范CommonJSES6 ModuleCommonJSCommonJS定义的模块分为：模块标识(module)，模块定义(exports)...

Vue RouterVue Router是VueJS官方的路由管理器。它和VueJS的核心深度集成，让构建单页面应用变得易如反掌基于Hash模式的路由实现kRouter.jsimport Vue from 'vue'import Home from '../views/Home.vue'import About from '../views/About.vue'class V...

弹窗组件这类组件的特点是在当前Vue实例之外存在，通常挂载与body，上在使用element-ui弹窗组件的时候，我们可以看到这一点：并且它们是通过JS动态创建的，不需要在任何组件中声明。接下来我们看具体代码实现。create.js创建一个js文件，用来创建弹窗实例import Vue from 'vue'export default function create (comp, p...

本文将对vuex使用做一个详细的解释，如需要更深入的研究可查看Vuex官网Vuex是什么?官方解释：Vuex是一个专门为Vue应用程序开发的状态管理模式，它采用集中式存储管理应用的所以组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex是一个集中式状态管理框架，在进行频繁、复杂的组件间传值的大型项目中，非常适合用Vuex做状态管理。如果不需要做大型单页面引用，使用Vuex则...

v-modelv-model其实就是一个语法糖，绑定value事件，监听input事件。v-model默认会将value属性传递给子组件，并且会监听input事件，实现双向数据绑定index.vue<template> <div> <k-input v-model="msg"></k-input> // v-model就是下...

组件是VueJS中最强大的功能之一，通过组件的组合，应用程序就像是推积木一样组合而成。各个组件之间是相互独立的，这意味着不同组件之间的数据不能共享，因此组件之间的通信就显得格外重要了，本文将详细介绍VueJS中组件之间的通信组件关系图从图中我们可以清楚的了解组件之间的关系。我们需要针对不同组件之间选择不同的通信方式props/$emit`props是一种父组件通过属性向子组件的通信方式...

学就要入深，一定要自己造出轮子，接下来我们就手动实现Element-ui中form表单的实现1、表单组件的使用<template> <div class="form-index"> <k-form :model="ruleForm" :rules="rules" ref="form"> <k-form-item label="用...