Develop using modular approach in vuejs

This article mainly introduces in detail how to write vuejs in a modular way. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor to take a look.

Introduction

vuejs is a framework that is simple to get started with, and is easy to use and easy to expand. With the popularity of webpack, vuejs has also launched its own load, vue-loader, which can easily package code. Recently I wrote a json viewer-ac, which fully uses the modular features brought by vue-loader. I was quite happy writing it and gained a lot of experience. Record it here.

File structure

 <template>
  <p>
   <app-header></app-header>
  </p>
</template>
<style>
...
</style>
<script>
  import AppHeader from &#39;./AppHeader.vue&#39;
  export default {
   name:&#39;app&#39;,
   props:[&#39;data&#39;]
   data() {
    return {}
    },
   methods: {
    handleClick() {}
   },
   components: {
    AppHeader
   }
  }
</script>

template contains the template code, which is usually a closed html tag, such as a p.

style contains the css code. This code applies to the entire page. If you only want to apply it to the current template, you need to use the scoped attribute.

 <style scoped>

If you want to use some css preprocessors , such as sass, you only need to declare lang, and then vue-loader will automatically load it. Of course, the premise is that the corresponding sass-loader is installed.

 <style lang="sass">

script Note that the es6 code is used here. I use babel to compile it, so of course I need to install babel, the es6 preset, and build a .babelrc file in the root directory. For details, you can refer to my ac or use the official vue-cli to initialize the project.

template Make invisible tags

template is not only the outermost tag of the template, but it can also be used as an ordinary tag. For example, when we need to use v-if to control the display and hiding of some areas, this can be done.

 <template>
  <template v-if="valid">
    <p></p>
  </template>
  <template v-else>
   <p></p>
  </template>
</template>

Moreover, the template will not be rendered, so it will not affect the final dom structure.

Note: v-show cannot be used with template

flux

During actual development, you will find that the original data management model is confusing. It is difficult to distinguish temporary data, persistent data, user data, and background data. At this time, it is most appropriate to introduce flux.

If you don’t want to introduce other libs for the time being, you can try to implement one yourself. It’s actually very simple. Prepare a store.js

 let trim = str => {
 return str.replace(/(^[\s\t]+)|([\s\t]+$)/g, '');
}
export const state = {
  jsons: []
}

export const actions = {
  parse(jsonStr) {
    if(!trim(jsonStr)) return

    let jsonObj = null
    try{  
      jsonObj = JSON.parse(jsonStr)
    }catch(err){
      state.jsons.push({err: jsonStr + '', valid: false })

    }
    if(jsonObj){
      state.jsons.push({obj:jsonObj, valid: true})
    }
  }
}

All view data comes from state. All modifications must be done through actions. Because modifications to data in child components will not affect the parent component, you can safely use the two-way binding feature of vuejs.

Then you can introduce state and actions under the root component of the app, and then pass them to sub-components as needed

import { state, actions } from '../store' data() {
  return {
   state,
   actions
  }
 },

<child :state="state" :handleClick="actions.update"></child>

import public css

Wouldn't it be very convenient and powerful if we store the commonly used style variables on the page in a public file such as common.sass

 $width: 80%;
$height: 100%;
$moli-green:#CCF3E4;
$moli-white:#f8f8f8;

and then introduce them in the component's style.

But unfortunately, I don’t know how to implement this yet.

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to implement in Jstree that the disabled child nodes will also be selected when the parent node is selected

In Vue About the usage of filters

Adaptive processing method in Javascript

The above is the detailed content of Develop using modular approach in vuejs. For more information, please follow other related articles on the PHP Chinese website!