• Analysis of two ways to realize vertical table in Vue project


    Problem description In our projects, we usually use horizontal tables, but occasionally we also use vertical tables for requirements. For example, the following vertical table: When we saw this effect picture, we thought of using the UI framework to make changes. However, the hungry UI does not directly provide such cases. Some students will think […]

  • Native JS encapsulates Vue tab switching effect


    The example of this article shares the specific code of Vue tab switching encapsulated in native JS for your reference. The specific contents are as follows Look at the renderings first Technology used vue,js,css3 Vue components can be used directly <template> <div> <ul :class=”headerActive == 0 ? ‘friend’ : ‘booklist'”> <li @click=”headerChange(0)” :class=”headerActive == 0 […]

  • Method of introducing excel table plug-in into Vue


    In this article, the specific code of the excel table plug-in introduced by Vue is shared for your reference. The specific contents are as follows 1、 Installation npm install handsontable-pro @handsontable-pro/vue npm install handsontable @handsontable/vue 2、 Reference (reference on page) import { HotTable } from ‘@handsontable-pro/vue’ import ‘…/…/node_modules/handsontable-pro/dist/handsontable.full.css’ import Handsontable from ‘handsontable-pro’ 3、 Use (use […]

  • How to listen for array changes in Vue


    catalogue preface Source code Where to start the first step Start with figure Look at the source code preface Some time ago, I learned about the principle of responsive data in Vue (and made learning notes about the principle of responsive data in Vue). In fact, it is through object Defineproperty controls getters and setters, […]

  • The basic implementation method of cross component binding using V-model in Vue


    Hello, everyone. Today, let’s talk about the binding effect of parent-child components using V-model 1: The simple version code is as follows: Parent component: <template> <div> //3: use subcomponents and bind with V-model <About v-model=”father”/> </div> </template> <script> //1: introduction of sub components import About from “./About”; export default { //2: register subcomponents components: { […]

  • Steps for introducing PWA into Vue project


    catalogue 1. Installation dependency 2. In Vue config. Configure PWA in JS file: 3. Manually add manifest JSON file to the public directory of the project, manifest JSON is as follows: 4. In index Add the following code to the HTML file: It is easy to introduce PWA into Vue project. The operation steps are […]

  • Vue optimizes components using mixins


    catalogue Mixins implementation Combination of hook functions Project practice extend summary Vue provides mixins, an API that allows us to extract reusable functions from components, put them into mixins, and then introduce mixins into components, which can make components no longer look bloated and improve the reusability of codes. How to understand mixins? We can […]

  • Front end learning route (front end zero basis)


    Hello! I’m a programmer, rice noodles. At present, I am engaged in full stack development in a listed company of the world’s top 500. I once served as the leader of the front-end group of more than 10 people. I like to share various front-end technologies and have been helped before, so I will also […]

  • Let’s talk about MVVM framework


    web1. 0 Era The files are all together, that is, the front-end and back-end code will be together Question: 1. The front-end and back-end are developed by one person (the technology has no focus or the responsibility is not subdivided enough) 2. The project is not easy to maintain 3. There is no static content […]

  • Vue + openlayers build the first project


    Step 1: build a new Vue project Scaffold @ Vue / cli npm install -g @vue/cli When creating a project, eslint can not be used first, which is a bit of a hindrance vue init webpack vue-openlayers Open the project with development tools and run to see if there is a problem npm install npm […]

  • Yesun communication and component self call


    The component calls itself Parent component <template> <div> <detail-list :list=”categoryList”></detail-list> </div> </template> <script> import DetailList from ‘./detailList.vue’ export default { components: { DetailList }, data () { return { categoryList: [ { title: ‘1’, children: [ { title: ‘1-1’ }, { title: ‘1-2’ }, ] }, { title: ‘2’, children: [ { title: ‘2-1’ }, […]

  • ‘v-model‘ directives require the attribute value which is valid as LHS


    ⚠️ Source of problem: When setting the value of V-model as a conditional value or calculated value, such as v-model=”test.result == 1 ? ‘sucess’ : ‘error'” perhaps v-model=”test.a + ‘-‘ + test.b” There will be tips related to the topic Chinese Translation:The “V-model” instruction requires that attribute values must be as valid as LHS ❓ […]