First of all,

  • First blog: My blog
  • Project source code: source code (like star)
  • Project preview: Preview
  • Previous chapter: Learning different VUE (2) Combat: Project Analysis
  • Q group: VUE learning exchange group of meteor Expert group

First of all: I’m sorry, I’m busy with the weekend, so I can’t do more. Only today. And writing a blog quite consumes energy, you don’t look at just a few thousand words, need to repeatedly consider, repeatedly modify, if there are mistakes and deficiencies, please comment correction, thank you!

preface

This article is combined with official API documents, progressive learning, familiar with the document in the actual combat, understand the actual combat in the document. The following code has detailed code comments, and logic explanation, please read carefully.

3.1.1 What is vUE?

If you don’t know what a Vue does, see What a Vue is.

3.1.2 Project structure

Create a folder by referring to the following directory structure. The folder marked with an asterisk (*) is a new folder

├─ build // Build Services and WebPack Configuration ├─ config // Different environment Settings ├─ dist // Project build directory ├─ index.html // Project import file ├─ package.json // ├─ SRC // Production directory │ ├─ Common * // Public CSS JS resources │ ├─ Components │ ├─ moke * // Local static data management files │ ├ ─ ─ App. Vue / / main page │ ├ ─ ─ vuex * / / vuex state manager │ ├ ─ ─ the router / / routing configuration, │ └ ─ ─ the main, js / / Webpack precompiled entrance

3.1.3 Vue instance

New knowledge

  • Vue instance

steps

Open up/SRC /main.js and you’ll see

import Vue from 'vue'   // Introduce the vue module
import App from './App'  // Import vUE components
import router from './router' // Import the route configuration file

Vue.config.productionTip = false // Close the prompt given in production mode

new Vue({  // Create a root instance of Vue
  el: '#app'.// Mount id. All contents in this instance will be displayed in index.html under a div with the id app
  router, // Inject route configuration.
  template: '<App/>'.// Configuring the root template opens the page to display that component
  components: { App } // Inject the component
})Copy the code

3.1.4 Style

Step 1 Install less

Enter on the terminal

npm install --save-dev less-loader style-loader lessCopy the code

Step 2 Configure less

In. / build/webpack base. Conf. Js plus

module.exports = {
  module: {
    rules: [{// Add this object to it
        test: /\.less$/.use: [
          'style-loader',
          { loader: 'css-loader'.options: { importLoaders: 1}},'less-loader'}]}}Copy the code

Step 3 Download the style file

Because this course is mainly aimed at the actual Vue, so I will not explain the use of less here. If you are interested, you can go to the less tutorial to learn, and will not explain how to write each Style. Please download the Style file to SRC /common/.

3.1.5. “vue ‘file

  • Vue has a custom suffix named.vueFile, it willhtml.js.cssPut it all together in one file, and insidetemplate script styleThe three differences correspond in turn. 
    <template>
<! -- I'll do HTML -->
<template/>
<script>
export default {};
// Write js here
</script>
<style lang = "less" scoped>
<!--这里写css-->
</style>Copy the code
  • a.vueFiles are equal to individual components. because.vueThe file is custom and is not recognized by the browser, so to parse the file, in the Webpack build, you need to install vue-loader to parse the. Vue file.
  • templateThere must be only one container inside the outermost layer
  • scriptIn the export default {}Export the component for external reference.
  • styleIn thelangRefers to additional support for languages that the editor can recognize,scopedThe CSS written here applies only to this component.

3.1.6 Adding layouts. Vue

Now that we know what the.vue file is for, let’s give it a try.

Create a new file in the SRC /components/ directory, and copy the following code.

<template>
  <section class="container" > <! Outermost container -->
    <section class="menu"> <! -- Container on the left -->
    </section>
    <section class="content-container"><! -- Container on the right -->
    </section>
  </section>
</template>
<script>
  export  default {};
</script>

<style lang="less">
@import '.. /common/style/layouts.less';
</style>Copy the code

3.1.7 Interface for Modifying a Router (Route)

What is vue-router used for?

It is used for routing Settings, setting the path Settings when the page jumps, and it works very simply, mapping components to routes, and then telling vue-Router where to render them.

New knowledge points (must see):

  • Vue-router simple example
  • After routing

The first step:

Open the SRC /router/index.js file and copy the following code to replace the old one.

import Vue from 'vue' / / import Vue
import Router from 'vue-router' // Import the vue-router library
import Layouts from '@/components/layouts' // Import the layouts. Vue component

Vue.use(Router) // Globally register the Router component, which is bound to the Vue instance.

export default new Router({ // Create a router instance and pass the 'routes' configuration
  routes: [
    {
      path: '/'.// Access path
      name: 'Layouts'./ / the path name
      component: Layouts // To access the '/' component, which loads all the content of the Layouts component.}]})Copy the code

The second step:

Open your browser at http://localhost:8080/ and you will see the following display, and you are done.

3.1.8 Menus.vue (Menu component)

New Knowledge points (Required reading)

  • Using the component
  • Locally registered component

The first step:

Create a new file in the SRC /components/ directory, and copy the following code

<template>
  <div class="list-todos">  <! -- Menu container -->
      <a class="list-todo activeListClass list" > <! -- Single menu container -->
        <span class="icon-lock" ></span>  <! -- Lock icon -->
        <span class="count-list">1</span><! - digital -- -- >Monday<! -- Menu contents -->
      </a>
    <a class=" link-list-new" > <! -- Add menu -->
      <span class="icon-plus">
      </span>new</a>
  </div>
</template>
<script>
  export default {};
</script>

<style lang="less">
@import '.. /common/style/menu.less';
</style>Copy the code

The second step:

We’re going back to Layouts. Vue and adding the following type * code.

<template>
    <section class="menu"> <! Add components to the left container with Menus -->
     <menus></menus> <! - * -- - >
    </section>
</template>

<script>
  import menus from './menus'; // * Import the components we created with menus
  export  default {
    components: { // * Register the menus component so that it can be called at template
      menus
    }
  };
</script>Copy the code

Finally our menu component registered successfully, and reference it, how did you do?

3.1.9 List rendering

New Knowledge points (Required reading)

  • Template syntax
  • The list of rendering
  • Conditions apply colours to a drawing
  • The data function

The first step:

Go back to SRC/Components /menus.vue and add the following code.

 <template>
    <a class="list-todo list activeListClass" v-for="item in items"> <! -- V-for list rendering -->
      <span class="icon-lock" v-if="item.locked"></span> <! -- v-if conditional rendering -->
      <span class="count-list" v-if="item.count > 0">{{item.count}}</span>
      {{item.title}}   <! -- Data binding, see template syntax -->
    </a>
</template>
<script>
export default {
  data() { / / data function
    return {
      items: [{ title: 'Monday'.count: 1.locked: true }, // Menu simulation data
        { title: 'Tuesday'.count: 2.locked: true }, {
        title: 'Wednesday'.count: 3.locked: false}}; }};</script>Copy the code

When you’re done, you should see the following.

Now that we have the menu section on the left of the entire page, it’s time to complete the details section on the right.

3.1.10 Todo.vue (Todo details component)

New Knowledge points (Required reading)

  • Form control binding
  • Custom events
  • Event handler

The first step:

Create a new file todo.vue in the SRC /components/ directory and copy the following code.

 <template>
  <div class="page lists-show"><! Outermost container -->
    <nav><! -- Top part of container -->
      <div class="nav-group"> <! -- Mobile menu icon -->
        <a class="nav-item">
          <span class="icon-list-unordered">
          </span>
        </a>
      </div>
      <h1 class="title-page">
        <span class="title-wrapper">{{todo.title}}</span> <! - the title -- -- >
        <span class="count-list">{{todo.count}}</span><! Number -- -- -- >
      </h1>
      <div class="nav-group right"><! Delete from right, lock icon container -->
        <div class="options-web"> 
          <a class=" nav-item"> <! Lock icon -->
            <span class="icon-lock" v-if="todo.locked"></span>
            <span class="icon-unlock" v-else>
            </span>
          </a>
          <a class=" nav-item"><! Delete icon -->
            <span class="icon-trash">
            </span>
          </a>
        </div>
      </div>

      <div class=" form todo-new input-symbol"> <! -- Added a single entry box that listens for carriage return events, binds the text value bidirectional, listens for the disabled property, and cannot be edited when todo.locked is true -->
         <input type="text" v-model="text" placeholder='Please enter'@keyup.enter="onAdd" :disabled="todo.locked" />
        <span class="icon-add"></span>
      </div>
    </nav>
    <div class="content-scrollable list-items">
      <! Lower part of container -->
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      todo: { // Details
        title: 'Monday'.count: 12.locked: false
      },
      items: [ // Make a list of items
        { checked: false.text: 'New Day'.isDelete: false },
        { checked: false.text: 'New Day'.isDelete: false },
        { checked: false.text: 'New Day'.isDelete: false}].text: ' ' // Add a single binding value}},methods: {
    onAdd() {
      this.items.push({
        checked: false.text: this.text, isDelete: false
      }); // When the user hits Enter, add an object to the items value. This. text is the value bound to the input box
      this.text = ' '; // Initialize the value of the input box.}}}</script>
<style lang = "less">
@import '.. /common/style/nav.less';
@import '.. /common/style/form.less';
@import '.. /common/style/todo.less';
</style>Copy the code

The second step

Open the SRC/components/layouts. Vue file New to the following code.

 <template>
    <section class="content-container"><! -- Container on the right -->
    <todo></todo>
    </section>
 </template>
  <script>
   import todo from './todo';
  export  default {
    components: {
      todo  / / new}};</script>Copy the code

Finally:

3.1.11 Item. vue (Single Component)

New knowledge

  • Prop for parent-child component communication

    The first step:

    Create a new file named item.vue in the SRC /components/ directory and copy the following code.

    <template>
<div class="list-item editingClass editing"> <! Outermost container -->
 <label class="checkbox"> <! -- Custom checkbox -->
   <input type="checkbox" v-model="item.checked"> <! --item.checked-->
   <span class="checkbox-custom"></span>
 </label>
 <input type="text" v-model="item.text" placeholder='Write something... '>  <! -- bound item. The text -- -- >
 <a class="delete-item"> <! Delete icon -->
   <span class="icon-trash"></span>
 </a>
</div>
</template>
<script>
export default {
props: ['item']  // The child component explicitly declares the data it expects with the props option,Here it says it wants something called 'item'. };</script>
<style lang="less">
@import '.. /common/style/list-items.less';
</style>Copy the code

    The second step:

    Open the SRC/Components /todo.vue file and add the following code

    <template>
 <div class="content-scrollable list-items">
    <div v-for="item in items"> <! -- here 'v-for' loops through the 'items' we defined in the' data 'function to simulate the data, loops through the individual object, and passes the data to the sub-item via prop -->
     <item :item="item"></item>
   </div>
 </div>
</template>
<script>
import item from './item';
export  default {
 components: {  // Add a components object
   item  / / new}};</script>Copy the code

The last

In the new input box, type something and press Enter to see if it works.

summary

  • We know what a VUE is.
  • Understand the Vue instance
  • Learned to install less.
  • Know the.vuefiletemplate script styleThe three differences are written separately with somehtml.js.css.
  • Now that you know the basic routing configuration, vue-Router is a simple example
  • Know what a component is?
  • Key points to understand:
    • Template syntax
    • The list of rendering
    • Conditions apply colours to a drawing
    • The data function
    • Form control binding
    • Custom events
    • Event handler
    • Prop for parent-child component communication