Vue detailed introductory notes

1. Introduction

I recently found some tutorials and browsed the official website to take a look at some Vue content, some introductory concepts, basic syntax, and some commonly used operations. I took a quick glance and found that the whole text + some codes are more than 9,000 words. The introductory syntax is still easy to understand. I have a certain foundation in making small programs before, and it feels very similar. However, for some slightly more complicated points, I feel that the summary is not detailed enough, such as slots, and calculated properties. I don’t read much front-end things in my daily life. I sorted out the notes during the learning process and share them with you! Welcome everyone to exchange opinions~

2. Initial Vue

(I) Understanding Vue concepts

(1) What is Vue.js

Vue (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces. Unlike other large frameworks, Vue is designed to be applied layer by layer from the bottom up. Vue's core library only focuses on the view layer, which is not only easy to get started, but also easy to integrate with third-party libraries or existing projects.

(2) What is the Progressive Framework?

After reading some tutorials and articles, the simple understanding of the progressive framework is three words: "not forced". Vue does not force you to use all of its content (functional features). Users can choose according to their own situation and use part of it.

There is a better answer on this topic. It is easy to find on Baidu. I have posted part of it.

Vue means less, that is, you can introduce Vue into the original system and use it directly as jQuery. With Vue, you can use it to implement one or two components on the original large system and use it as jQuery; you can also use it for the entire family bucket development

(II) MVVM architecture

Before formally learning Vue, we first need to understand a front-end-based architecture model, that is, MVVM, which is the abbreviation of Model-View-ViewMode. Its relationship is simply described as follows:

Model: represents JavaScript data objects

View (view layer): represents DOM, which can also be simply understood as the content displayed on the front end

ViewModel: connects the view and data, that is, it is used to two-way bind data and pages

In the MVVM architecture, there is no way for the view and data to communicate directly. The only way is to use the ViewModel as an intermediate relationship. The ViewModel can observe the changes in the data and then update the view content, or monitor the changes in the view and notify the data of the changes.

I will write a small introductory case later, and you can experience its characteristics together!

(III) Advantages of Vue

1. Small size

33K after compression

2. Higher operating efficiency

Based on virtual DOM, a technology that can perform various calculations in advance through JavaScript, calculate and optimize the final DOM operation. Since this DOM operation is a pre-processing operation and does not actually operate the DOM, it is called virtual DOM.

3. Two-way data binding

Developers no longer need to operate DOM objects, and can focus more on business logic

4. Rich ecology and low learning cost

There are a large number of mature and stable vue.js-based ui frameworks and common components on the market! Ready to use, fast development, beginner-friendly, easy to get started, lots of learning materials

(IV) Entry Case

To write Vue, you can choose to use Vscode, HBuilder, sublime, Webstrom, or even IDEA. Just choose it.

First we need to import Vue. You can go to the official website and download the file directly, and make a local import, similar to importing jQuery, or use a network reference. For example, in the following, you can find the import or download address on the official website.

As you can see, after the introduction, we create a Vue instance in the form of new, in which we find the div with the id value of hello through el for binding, assign a value in data, and echo the data in div through two sets of curly braces.

If you have some basic knowledge of WeChat applets, you can actually find that the structures of the two seem to be somewhat similar.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<div id="hello">
  <h2>{{content}}</h2>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
  var vm = new Vue({
      el: "#hello",
      data:{
        content: "Hello Vue!"
      }
  })
</script>

</body>
</html>

There is definitely no problem with the echo data. Let's try to modify the value of content in the console, and you can see that the page has changed accordingly.

We have successfully created our first Vue application! This looks very similar to rendering a string template, but Vue is doing a lot of work behind the scenes. Now that the data and the DOM are connected, everything is responsive. How do we confirm it? Open your browser's JavaScript console (open it on this page) and modify the value of app.message . You will see the above example update accordingly.

Note that we are no longer interacting directly with the HTML. A Vue app mounts it to a DOM element ( #app in this case) and has full control over it. That HTML is our entry point, but the rest happens inside the newly created Vue instance. —— Vue official website

3. Vue basic syntax

(I) Declarative rendering

If you have come across templates like Thymeleaf, you can see that the Vue example above uses a concise template syntax, that is, two sets of curly braces to wrap the value, to declaratively render data into the DOM system, which is actually similar to the $ plus a set of curly braces in Thymeleaf.

We also have a way to bind elements: using instructions

<div id="hello-2">
  <span v-bind:title="content">
    Hover the mouse for a few seconds to view the prompt information of dynamic binding here!
  </span>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
  var vm = new Vue({
      el: "#hello-2",
      data:{
        content: 'Page loaded at' + new Date().toLocaleString()
      }
  })
</script>

Observe the result. When we hover the mouse over the text, the bound data will appear.

The v-bind attribute you saw is called a directive. The instructions are prefixed with v- to indicate that they are special attributes provided by Vue. The code means to make the title attribute of this element node consistent with the content property of the Vue instance.

If you modify the value of vm.content in the console, the bound data will still change

Note: Using v-bind requires introducing a constraint in the header

<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">

If you use IDEA to install the Vue.js plug-in, there will be prompts for completion

(II) Conditional judgment

The instructions used for conditional judgment are v-if, v-else-if, v-else

Let's look at two examples. The first is the judgment of true or false.

<div id="hello-3">
  <h2 v-if="isBoy">is a boy</h2>
  <h2 v-else>It's a girl</h2>

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
  var vm = new Vue({
      el: "#hello-3",
      data:{
        isBoy: true
      }
  })
</script>

The default display is boy, we then change it to false in the console

Next is the judgment of the value. Let's take a small example of comparing grades. However, the constraints on the values ​​are not strict enough. Just to explain the if example, you just need to understand the meaning.

<div id="hello-3">
  <h2 v-if="score < '60'">Failed</h2>
  <h2 v-else-if="score >= '60' && score < '80'">Pass</h2>
  <h2 v-else>Excellent grades</h2>

</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
  var vm = new Vue({
      el: "#hello-3",
      data:{
          score: 66
      }
  })
</script>

Continue to modify the results

(III) Cycle

You can use v-for to loop through the data. For example, the enhanced for in Java just replaces the colon with in. students corresponds to the array name in data, and student represents each item in it. The specific attribute value is taken out in the form of XXX.xx.

<div id="hello-4">
  <li v-for="student in students">
    {{student.name}}
  </li>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
    var vm = new Vue({
        el: "#hello-4",
        data: {
            students: [{name: '张三'}, {name: '李四'}, {name: '王五'}]
        }
    })
</script>

Try pushing a new one in the console, and it will also be updated.

Note: This is just the most basic case. In many cases, if the traversed array contains objects and the objects have multiple values, such as an id, the unique id value is usually used as the key value, for example:

<div v-for="item in items" v-bind:key="item.id">
  <!-- Contents -->
</div>

To give Vue a hint so that it can keep track of each node's identity and thus reuse and reorder existing elements, you need to provide each item with a unique key attribute:

It is recommended to provide a key attribute when using v-for whenever possible, unless the DOM content being traversed is very simple, or you are deliberately relying on the default behavior to gain performance improvements.

(IV) Event Binding

Often we need to enable users to interact with the application by clicking some buttons or label components, that is, to bind events. In Vue, we can add an event listener through the v-on directive to do this.

Note: Use v-on to introduce constraints

<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">

Sample Code

<div id="hello-5">
  <button v-on:click="helloWorld">Hello World</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
    var vm = new Vue({
        el: "#hello-5",
        data: {
            content: "Hello World!"
        },
        methods: {
            helloWorld: function () {
                alert(this.content);
            }
        }
    })
</script>

As you can see, the helloWorld event is bound by v-on:click, and the specific logic of the event needs to be defined in the methods of the Vue object.

(V) Two-way binding

As early as when the MVVM architecture pattern was introduced at the beginning, the figure mentioned the two-way binding between View and ViewModel. In layman's terms, when the data changes, the view also changes, and when the view changes, the data also changes.

In fact, in the previous basic syntax, we have clearly understood the first half of the sentence, that is, modifying the data in data, thereby causing changes in the view. Here we will focus on the second half of the sentence.

First, Vue provides the v-model directive, which makes it easy to implement two-way binding between form input and application state.

From several common forms, we can use the v-model directive to perform two-way binding of data on the form input, textarea>, select, etc. It can select the correct method to update the element according to the control type.

However, after using the v-model directive, the original value, checked, selected, etc. of the form will be ignored, and the data in the Vue instance will always be used as the data source.

In input, enter text

<div id="hello-6">
  Input: <input type="text" v-model="content" > Output: {{content}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
    var vm = new Vue({
        el: "#hello-6",
        data: {
            content: "Hello World!"
        },
    })
</script>

We have already been able to use two sets of curly brackets to echo the value of content in the output position. We use v-model in the input attribute to bind to content, so that the value entered in the input box can directly affect the value of content in data, that is, as the value entered in the input box is changed, the content in the output position will also change.

In input, radio button

<div id="hello-6">
  gender:
  <input type="radio" name="gender" value="男" v-model="gender">男<input type="radio" name="gender" value="女" v-model="gender">女Output: {{gender}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
    var vm = new Vue({
        el: "#hello-6",
        data: {
            gender: 'Male'
        },
    })
</script>

Effect display

In select

<div id="hello-6">
  <select v-model="choose">
    <option value="" disabled>---Please select---</option>
    <option>A-Apple</option>
    <option>B-Cherry</option>
    <option>C-Watermelon</option>
  </select>
  Output: {{choose}}
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
    var vm = new Vue({
        el: "#hello-6",
        data: {
            choose: ''
        },
    })
</script>

(VI) Vue components

Components are also a very important concept in Vue. For example, in a page, the header, footer, sidebar, and main content area can all be considered components. However, some components are fixed, such as the header, and some are variable, such as the content area.

Vue allows us to build large applications using small, independent and often reusable components.

Note: In fact, we are creating .vue template files, and we will not use this form of writing directly on the page. It is only for the convenience of explanation.

Let's take a simple but relatively complete case to explain.

Let's first talk about what we want to do in the end. For example, div or input are all tags. What we want to do now is to customize such a tag by creating a custom component template. We only need to reference this tag where we need it, and we can achieve the desired effect in the template and achieve the effect of extraction and reuse.

First, create a component using the format of Vue.component...., where ideal-20 is the name of the component tag, template represents the content in the template, and props represents the parameter name we pass in at the reference.

Next, we introduce the custom component tag ideal-20 into a div that has been bound to hello-7. We want to traverse the fruits array in data, so we can do a for traversal in the ideal-20 attribute. At the same time, we need to bind each item to the component template through v-bind:ideal="item". Because the array is not an ordinary array, we assign id as the key value.

<div id="hello-7">
  <ideal-20 v-for="item in fruits" v-bind:ideal="item" v-bind:key="item.id"></ideal-20>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<script>
    // Define a new component named todo-item Vue.component('ideal-20', {
        props: ['ideal'],
        template: '<li>{{ideal.name}}</li>'
    })
    var vm = new Vue({
        el: "#hello-7",
        data: {
            fruits:
                {id: 0, name: 'Apple'},
                {id: 1, name: 'Cherry'},
                {id: 2, name: 'Mangosteen'}
            ]
        }
    })
</script>

Effect display

(VII) Getting Started with Axios

First of all, we need to mention why we need to use this thing?

In the traditional development, we usually use Ajax for communication. However, Vue.js, as a view layer framework, does not support Ajax communication function, so Axios can be used to implement Ajax asynchronous communication.

First, let’s look at its features:

• Making XMLHttpRequests from the browser
• Making http requests from node.js
• Support for Promise API
• Intercepting requests and responses
• Convert request and response data
• Cancel Request
• Automatically convert JSON data
• Client-side support for XSRF protection

First, we take a piece of json to simulate the data

{
  "name": "BWH_Steven",
  "blog": "www.ideal-20.cn",
  "about": {
    "country": "China",
    "phone": "13888888888"
  },
  "students": [
    {
      "id": 0,
      "name": "Zhang San"
    },
    {
      "id": 1,
      "name": "Li Si"
    },
    {
      "id": 2,
      "name": "Wang Wu"
    }
  ]
}

From the following figure we can see that we can write the code into mounted()

Next is the code used

First of all, in addition to introducing Vue, you also need to introduce Axios's CDN. In the mounted() method, get this json file and assign the response.data, which is the value obtained, to the info defined in data().

Note: data and data() are different

Then you can call the echo in the bound hello-8 div

Explanation: Why is a style added to v-clock? This is because the process of displaying data is to first display the words {{info.name}}, and then render after getting the value. If the network speed is slow, you can only see info.name, and the experience is not very good.

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    [v-clock] {
      display: none;
    }
  </style>
</head>
<body>
<div id="hello-8" v-clock>
  <div>{{info.name}}</div>
  <div>{{info.blog}}</div>
  <div>{{info.about.country}}</div>
  <div>{{info.about.phone}}</div>
  <div>{{info.students[0].name}}</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>

    var vm = new Vue({
        el: "#hello-8",
        data() {
            return {
                info: {}
            }
        },
        mounted() {
            axios.get("../json/data.json").then(response => (this.info = response.data));
        }
    })
</script>

</body>
</html>

(VIII) Calculated properties

I think the official documentation is quite clear about this paragraph.

Expressions in templates are very convenient, but they are designed primarily for simple calculations. Putting too much logic in a template can make it cumbersome and difficult to maintain. For example:

<div id="example">
  {{ message.split('').reverse().join('') }}
</div>

At this point, the template is no longer just a simple declarative logic. You have to look at it for a while to realize that what we want here is to display the reverse string of the variable message . It gets more difficult to handle when you want to include more of the reversed string here in your template.

So, for any complex logic, you should use computed properties.

<div id="hello-9">
  <p>Original data: "{{ message }}"</p>
  <p>Reverse data: "{{ reversedMessage }}"</p>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<script>
    var vm = new Vue({
        el: '#hello-9',
        data: {
            message: 'Hello'
        },
        computed: {
            // Computed property getter
            reversedMessage: function () {
                // `this` refers to the vm instance return this.message.split('').reverse().join('')
            }
        }
    })
</script>

result:

Original data: "Hello"

Flip data: "olleH"

Here we declare a computed property reversedMessage. The function we provide will be used as the getter function for the property vm.reversedMessage:

console.log(vm.reversedMessage) // => 'olleH'
vm.message = 'Goodbye'
console.log(vm.reversedMessage) // => 'eybdooG'

You can open the browser console and modify the vm in the example yourself. The value of vm.reversedMessage always depends on the value of vm.message.

You can bind computed properties in templates just like binding normal properties. Vue knows that vm.reversedMessage depends on vm.message, so when vm.message changes, all bindings that depend on vm.reversedMessage are also updated. And the best part is that we’ve created this dependency in a declarative way: the computed property getter has no side effects, which makes it easier to test and understand.

What is the difference between computed properties and methods?

Seeing this, do you think that I can also achieve this effect with methods, and put the specific business logic in the defined methods? However, the biggest difference between them is that calculated properties are cached based on their responsive dependencies. In other words, if the message we depend on above does not change, reversedMessage will immediately get the previous result, and there is no need to execute the function again. Calculated properties can help us save a lot of performance overhead, but if we do not want cached content, we can use methods instead.

(IX) Slot

In 2.6.0, we introduced a new unified syntax for named and scoped slots (the v-slot directive). It replaces the slot and slot-scope attributes which are now deprecated but not removed and are still documented. The origin of the new syntax can be found in this RFC.

This is too shallow, don't read it.

A slot is a placeholder that a child component gives to a parent component, i.e. <slot></slot>. The parent component can fill in some templates or HTML code in this placeholder.

To put it simply, it is a component-in-component

As shown below, I have defined three components. Ideal is the parent component, in which slot is used as a placeholder. At the same time, the name attribute points to the two child components ideal-title and ideal-content. In order to display the data in the child components from the server (simulation), it needs to be displayed dynamically, that is, by passing parameters (as mentioned in the previous explanation of component templates), and coordinating traversal to read the data in data.

<div id="hello-10">
  <ideal>
    <ideal-title slot="ideal-title" v-bind:title="title"></ideal-title>
    <ideal-content slot="ideal-content" v-for="contentItem in contents" v-bind:content="contentItem"></ideal-content>
  </ideal>
</div>


<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<script>
    Vue.component("ideal", {
        template: '<div>\
                    <slot name="ideal-title"></slot>\
                      <ul>\
                        <slot name="ideal-content"></slot>\
                      </ul>\
                   </div>'
    })
    
    Vue.component("ideal-title", {
        props: ['title'],
        template: '<div>{{title}}</div>'
    })
    
    Vue.component("ideal-content", {
        props: ['content'],
        template: '<li>{{content}}</li>'
    })

    var vm = new Vue({
        el: '#hello-10',
        data: {
            title: "Ideals last for more than twenty years",
            contents: ["Java", "Linux", "Database"]
        }
    })
</script>

The results are as follows:

IV. Getting Started with Vue

(I) Create a Vue-cli project

Vue-cli is an official scaffold for quickly creating Vue projects. It can be simply understood as Maven, that is, the feeling of choosing a skeleton when creating, which makes development more convenient.

(1) Preparation

A: Install Node.js

Node.js Go to the official website or Chinese website to download

Type node -v in cmd, and if the version number appears, it is normal. Type npm -v and the version number also appears, which is normal.

Adjust the Node.js image to Taobao image acceleration (cnpm)

# -g represents global security. This method is recommended. npm install cnpm -g

# Another way is to add a string at the end every time you use npm. It is not recommended to use npm install --registry=https://registry.npm.tabao.org

After installation, open this path (abc is the username of my machine, according to your own):

C:\Users\abc\AppData\Roaming\npm\node_modules

Normally, there will be cnpm installed, and then we will start installing vue-cli

B: Install vue-cli

cnpm install vue-cli -g

After installation, open cmd in the npm folder and enter vue-list. If a star-shaped content like the one shown below appears, the installation is complete.

C: Create a vue-cli program

Create a directory in the desired location and select the webpack-based vue application

Enter the command in cmd under this folder

vue init webpack vue_02_myvue

Enter some basic information, such as project name and author name

If there are options in the following content, press Enter and n (that is, no) to proceed

At this point, it will ask you whether to automatically execute npm install (as shown below). If yes, some dependencies will be automatically installed. Click No and you will need to enter the command to install it yourself, so just select Yes.

Should we run npm install for you after the project has been created? (recommended) npm

After completion, the node_modules in the project will have many more dependencies

Then, it will remind you that it is initialized. If you want to start it, you can execute these two sentences. The first sentence is to enter the project folder I customized from the external folder, and the second sentence is to start

If the following content appears, the startup is successful, and you can access it through the following address and port

Find an editor to look at it. I use IDEA to open this folder and make modifications. The specific code files are still in the src directory. At the same time, you can also configure IDEA's Terminal to be a cmd or terminal with administrator privileges, which can be more convenient.

How to quickly create a project

You can use HBuilder to create a project relatively quickly. You can directly create a Vue project and run it in the terminal.

In the directory where you want to create a project, enter vue ui in the terminal to enter the graphical interface (this method requires vue-cli version 3.x. The version of vue-cli queried through vue --version, for example, 2.9.6, cannot be used. The available commands can be viewed through vue -h)

(II) A brief introduction to Webpack

(1) Understanding the installation

When we created the Vue project, we chose webpack for packaging, but it was an automated process. We can better understand it by manually operating it.

webpack is a static module bundler for modern JavaScript applications. When webpack processes your application, it recursively builds a dependency graph containing every module your application needs, and then packages all of these modules into one or more bundles.
webρack is the most popular front-end resource modular management and packaging tool. It can package many loosely coupled modules into front-end resources that are suitable for production environment deployment according to dependencies and rules. You can also separate the code of modules loaded on demand and load them asynchronously when they are actually needed. Through loader conversion, any form of resources can be used as modules, such as Commons, AMD, ES6, CSS, JSON, Coffee Script, LESS, etc.;

Install webpack and webpack-cli. If npm is not too slow, consider using npm first and then cnpm.

cnpm install webpack -g
cnpm install webpack-cli -g

Use webpack -v and webpack-cli -v to check whether the version number appears to determine whether the installation is successful.

(2) Using webpack

Create a project (for IDEA, just create a normal folder and open it)

Create a modules directory to place JS modules and other content

Create a module file under modules, such as demo.js, to write Js module related code, such as

exports.test = function () {
    document.write("<h2>Ideals last more than 20 years</h2>")
}

Create main.js under modules. This is an entry file used to set entry attributes when packaging.

var demo = require("./demo")
demo.test();

Create a webpack.config.js file in the project root directory for configuration

module.exports = {
    entry: "./modules/main.js",
    output: {
        filename: "./js/bundle.js"
    }
};

Enter the webpack command in the terminal to package (enter the project directory and enter webpack, this is the running result)

abc@LAPTOP-5T03DV1G MINGW64 /f/develop/IdeaProjects/framework-code/vue/webpack_01_first

$ webpack

Hash: 7f61ef9440a6bab63058

Version: webpack 4.44.1

Time: 334ms

Built at: 2020-09-05 4:18:40 PM

Asset Size Chunks Chunk Names

./js/bundle.js 1020 bytes 0 [emitted] main

Entrypoint main = ./js/bundle.js

[0] ./modules/main.js 42 bytes {0} [built]

[1] ./modules/demo.js 82 bytes {0} [built]

WARNING in configuration

The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each e

nvironment.

You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

After packaging, there is an additional dist folder in the project directory, which contains a js folder, which contains the packaged js. Create index.html and introduce this js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <script src="dist/js/bundle.js"></script>
</body>
</html>

The page effect is as follows:

Supplement: What might be in the configuration file?

• entry: entry file, specifies which file Web Pack uses as the entry for the project
• output: Output, specify Web pack to place the processed files in the specified path
• module: module, used to process various types of files plugins: plugins, such as: hot update, code reuse, etc.
• resolve: Set the path to
• watch: monitor, used to package directly after setting file changes

(III) A brief introduction to Vue Router routing

Vue Router is the official router for Vue.js. It is deeply integrated with Vue.js core and makes it a breeze to build single-page applications with Vue.js. Features include:

Simply put, we can achieve some page jumps. For example, the content of our header remains unchanged, and the content part needs to change according to the link.

• Nested route/view mappings
• Modular, component-based router configuration
• Route parameters, queries, wildcards
• See transition effects powered by Vue.js transition system
• Fine-grained navigation control
• Links with auto-active CSS classes
• HTML5 history mode or hash mode with automatic fallback in IE9
• Customizable scrolling behavior

Installation steps:

Since vue-router is a plugin package, the old method is still npm/cnpm

npm install vue-router --save-dev

If there are any problems after installation, just follow the prompts and enter the corresponding command, just like I encountered a prompt to enter npm audit fix

After creating the project, delete the default HelloWorld component, and then create two custom components in components. For example, I created FirstDemo.vue and Main.vue. The former is a sub-page, and the latter represents the main page.

FirstDemo.vue

<template>
  <h1>The first demo page</h1>
</template>

<script>
  export default {
    name: "FirstDemo.vue"
  }
</script>

<style scoped>

</style>

Main.vue

<template>
  <h1>Home</h1>
</template>

<script>
  export default {
    name: "Main.vue"
  }
</script>

<style scoped>
</style>

Then create the router folder and the index.js main configuration

Note: If you use this in a modular project, you must explicitly install the routing functionality via Vue.use()

import Vue from 'vue'
import VueRouter from 'vue-router'
import FirstDemo from '../components/FirstDemo'
import Main from '../components/Main'

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      // Routing path path: "/firstDemo",
      name: 'firstDemo',
      // Jump component component: FirstDemo
    },
    {
      // Routing path path: "/main",
      name: 'main',
      // Jump component component: Main
    }
  ]
})

Modify the main.js entry file

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

Vue.use(router);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  //Configure the router,
  components: {App},
  template: '<App/>'
})

As well as the formal writing page, the incoming link

<template>
  <div id="app">
    <h1>Ideals last for more than 20 years</h1>
    <router-link to="/main">Home</router-link>
    <router-link to="/firstDemo">The first Demo page</router-link>
    <router-view></router-view>
  </div>
</template>

<script>

  export default {
    name: 'App',
  }
</script>

<style>
  #app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>

(IV) Basic use of Vue + ElementUi

Create a project named vue_03_vue_elementui and install vue-router, element-ui, sass-loader and node-sass plugins

# Create project vue init webpack vue_03_vue_elementui

# Enter the project directory cd vue_03_vue_elementui
# Install vue-router
npm install vue-router --save-dev
# Install e1ement-ui
npm i element-ui -S
# Install dependencies npm install
# Install SASS loader cnpm install sass-loader node-sass --save-dev
# Start the test npm run dev

Supplement: Npm command explanation

npm install moduleName: Install the module into the project directory

npm install -g moduleNMame: -g means to install the module globally. The specific location of the installation on disk depends on the location of npm config prefix

npm install - save moduleName: --save means to install the module into the project directory and write the dependency into the dependencies node of the package file. -S is the abbreviation of this command.

npm install -save -dev moduleName: --save-dev means to install the module into the project directory and write the dependency into the devdependencies node of the package file. -D is the abbreviation of the command.

Then you can open it in the editor. It depends on your personal choice. I use IDEA to open it here. After opening it, pay attention to whether the router sass and other contents have been successfully installed in the modules folder.

Then delete the default HelloWorld component and the default logo, start writing code, and create a views folder to store views.

Create Login.vue and Main.vue

Login.vue

<template>
  <h1>Main Page</h1>
</template>

<script>
  export default {
    name: "Main.vue"
  }
</script>

<style scoped>
</style>

Main.vue

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">Welcome to log in</h3>
      <el-form-item label="Account" prop="username">
        <el-input type="text" placeholder="Please enter your account number" v-model="form.username"/>
      </el-form-item>
      <el-form-item label=" Password " prop="password">
        <el-input type="password" placeholder="Please enter your password" v-model="form.password"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">Login</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
      title="Warm Tips"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handLeClose">
      <span>Please enter your account and password</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">OK</el-button>
      </span>
    </el-dialog>
  </div>

</template>


<script>
  export default {
    name: "Login",
    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        //Form validation, you need to add prop attribute rules in the el-form-item element: {
          username: [
            {required: true, message: "Account cannot be empty", trigger: 'blur'}
          ],
          password: [
            {required: true, message: "The password cannot be empty", trigger: 'blur'}
          ]
        },
        //Dialog box display and hide dialogVisible: false
      }
    },
    methods: {
      onSubmit(formName) {
        //Bind validation function to the form this.$refs[formName].validate((valid) => {
          if (valid) {
            //Use vue-router to route to the specified page. This method is called programmatic navigation this.$router.push("/main");
          } else {
            this.dialogVisible = true;
            return false;
          }
        });
      }
    }
  }
</script>


<style lang="scss" scoped>
  .login-box {
    border: 1px solid #DCDFE6;
    width: 350px;
    margin: 40px auto;
    padding: 35px 35px 15px 35px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    box-shadow: 0 0 25px #909399;
  }

  .login-title {
    text-align: center;
    margin: 0 auto 40px auto;
    color: #303133;
  }
</style>

Create a router folder and index.js in it, and configure the redirect content

index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from '../views/Login'
import Main from '../views/Main'

Vue.use(VueRouter);

export default new VueRouter({
  routes: [
    {
      path: "/main",
      component: Main
    },
    {
      path: "/login",
      component: Login
    }
  ]
})

Modify main.js and use router and elementui. I have already mentioned router. As for the latter, you can understand it by following the official website's getting started documentation.

https://element.eleme.cn/#/zh-CN/component/quickstart

main.js

import Vue from 'vue'
import App from './App'

import router from './router'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.config.productionTip = false;

Vue.use(router);
Vue.use(ElementUI);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  render: h => h(App)
});

App.vue

<template>
  <div id="app">
    <h1>Ideals last for more than 20 years</h1>
    <router-link to="/main">Home</router-link>
    <router-link to="/login">Login page</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Now that we have written it, we can start running, but when running, I got the following errors

TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined

Module build failed: TypeError: this.getResolve is not a function

After checking, I changed the version of sass-loder in package.json in the project directory from 10.0.2 to 8.0.2 to 7.3.1 before I could run it normally through npm run dev

"sass-loader": "^7.3.1",

Note: After modifying the configuration, you need to re-npm install or cnpm install

Show the final effect:

Click the home page effect:

Click the login page effect:

5. Simple case of Vue and Java data interaction

Finally, I found a ready-made page example on a certain website, and simply set up the backend and ran it for a while, which also consolidated the basic grammar at the beginning. The backend is basic SSM, and three interface methods are given. As a backend, this should be considered basic skills.

/user/findAll , /user/indById , /user/updateUser

It is a simple query and an update operation. The subject of the query is a user class, which has several basic fields.

public class User implements Serializable {	
	private Integer id;
    private String username;
    private String password;
    private Integer age;
    private String sex;
    private String email;
    ......
}

The key codes for the data received in the page are as follows

First, all user data is displayed. By traversing userList, the attribute values ​​are retrieved using curly brackets and Xx.

<tr v-for="u in userList">
  <td><input name="ids" type="checkbox"></td>
  <td>{{u.id}}</td>
  <td>{{u.username}}
  </td>
  <td>{{u.password}}</td>
  <td>{{u.sex}}</td>
  <td>{{u.age}}</td>
  <td class="text-center">{{u.email}}</td>
  <td class="text-center">
    <button type="button" class="btn bg-olive btn-xs">Details</button>
    <button type="button" class="btn bg-olive btn-xs" @click="findById(u.id)">Edit</button>
  </td>
</tr>

After clicking edit, the query method for the current user is executed for echo. The following is bound to the user through v-model (js is given later)

<div class="box-body">
  <div class="form-horizontal">


    <div class="form-group">
      <label class="col-sm-2 control-label">Username:</label>
      <div class="col-sm-5">
        <input type="text" class="form-control" v-model="user.username">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">Password:</label>
      <div class="col-sm-5">
        <input type="text" class="form-control" v-model="user.password">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">Gender:</label>
      <div class="col-sm-5">
        <input type="text" class="form-control" v-model="user.sex">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">Age:</label>
      <div class="col-sm-5">
        <input type="text" class="form-control" v-model="user.age">
      </div>
    </div>
    <div class="form-group">
      <label class="col-sm-2 control-label">Email:</label>
      <div class="col-sm-5">
        <input type="text" class="form-control" v-model="user.email">
      </div>
    </div>
  </div>
</div>

To achieve data interaction, the most important thing is to define the data and use axios for asynchronous requests

var vue = new Vue({
    el: "#app",
    data: {
        user: {id: "", username: "", password: "", age: "", sex: "", email: ""},
        userList: []
    },
    methods: {
        findAll: function () {
            var _this = this;
            axios.get("user/findAll.do").then(function (response) {
                _this.userList = response.data;
                console.log(_this.userList);
            }).catch(function (err) {
                console.log(err);
            });
        },
        findById: function (userid) {
            var _this = this;
            axios.get("user/findById.do", {
                params: {
                    id: userid
                }
            }).then(function (response) {
                _this.user = response.data;
                $('#myModal').modal("show");
            }).catch(function (err) {
            });

        },
        update: function (user) {
            var _this = this;
            axios.post("user/updateUser.do", _this.user).then(function (response) {
                _this.findAll();
            }).catch(function (err) {
            });
        }
    },
    created() {
        this.findAll();
    }
});

The above code is actually very easy to understand. First, two data, user and userList, are defined. userList is a traversal content that displays all user data in the previous section. It is used to carry the data after findAll. User is a carrier entity for querying a single user, that is, it echoes the old information of the current user when modifying. Because all query operations are performed at the beginning, the findAll method is executed in create(), and the query and modification methods are created in methos. Get or post requests are made through axios, and the returned results are processed at the same time.

Note: The content in .then is executed after the request is successful, and the content in .catch is executed after the request fails.

Note: The most critical content is to define var _this = this before axios. If you have been exposed to mini programs, you may feel very familiar with it. The reason for defining it here is that, for example, in axios, there is a statement like _this.userList = response.data; If this is used directly before userList, it means to find this content in axios, but we obviously want to refer to userList in data, so this step of defining _this cannot be omitted.

The effect is as follows:

Search all

Query the current user and modify

The above is the detailed content of Vue's detailed introductory notes. For more information about Vue's introductory notes, please pay attention to other related articles on 123WORDPRESS.COM!