This is the 16th day of my participation in Gwen Challenge

After summarizing the creation and startup of a Vue project, I will summarize the simple use of Vue.

I. VUE data

Div {{MSG}} represents dynamically bound data;

2. Define data in the

The page gets the data dynamically and renders it.

Two, vUE common instructions

  • V – if instructions

Conditional render instruction, which removes and inserts elements based on whether an expression is true or false

Basic syntax: V-if =”expression”

Expression is an expression that returns a Boolean value. An expression can be a Boolean property or an expression that returns a Boolean.

  • V – show commands

V-show renders HTML regardless of whether the condition is true, whereas V-if renders only if the condition is true

  • V – else instructions

The V-else directive is used in conjunction with v-if or V-show. If the V-if condition is not true, v-else content is displayed

  • V – for instructions

The V-for directive renders a list based on an array, which is similar to JavaScript’s traversal syntax

v-for="item in list"

Where list is an array and item is the array element currently iterated over

v-for="(item,index) in list"

Index is the index of the current loop, with subscripts starting from 0

  • V – the bind command

V-bind dynamically binds one or more features, usually attributes of HTML elements, such as V-bind: class, followed by a parameter separated by a colon

Class can coexist with v-bind:class, which means that adding v-bind:class does not overwrite the original style class, but instead adds a new class name to it

V-bind is available as: alternative

v-bind:class="isLogo? '':'product'" = :class="isLogo? '':'product'"

  • V – on command

V-on is used to listen for DOM events in a similar way to V-bind, for example by adding the click event 👇 to a button

<button v-on:click="show">
Copy the code

Also, like v-bind, v-on can be abbreviated and replaced with the @ sign to modify the above line:

<button @click="show">
Copy the code

Vue data binding

1. Bind attributes:

<template> <div id="app"> <img src="#"/> <br> <! - binding properties - > < img v - bind: SRC = "url" / > < / div > < / template > < script > export default {data () {return {url: '#'}}} < / script >Copy the code

2. Two-way data binding:

Vue.js is actually a framework for MVVM.

What is MVVM, M is Model, V is View.

So MVVM stands for model changes that affect the view view, and view view changes in turn affect model.

For example, here is a bidirectional binding example of a form:

<! -- Bidirectional binding data: Forms -->
<h2>{{msg}}</h2>
<input type="text" v-model="msg"/>
Copy the code

Effect:

When the data inside the input box changes, the data outside it also changes. This is called bidirectional binding.

Iv. Vue event

First define the method:

<button v-on:click="run1()">The first way to execute a method<button>
<button @click="run2()">The second way to execute a method<button>
Copy the code

Then the writing method:

run1(){
alert(The first way to write it.);
},
run2(){
alert('Second way');
}
Copy the code

For example, we write a button request data method:

    <! -- Request data -->
    <hr>
    <button @click="requestData()">The request data</button>
    <ul>
        <li v-for="(item,key) in list">
            {{key}} <br>
            {{item}}
        </li>
    </ul>
Copy the code
    run1(){
        alert(The first way to write it.);
    },
    run2(){
        alert('Second way');
    }
Copy the code

The effect is that when we request the data button, the page loads the data in our list.

Lifecycle functions of components in VUE

Lifecycle functions are a set of methods that fire when a component is mounted and updated and destroyed.

Let’s say we create a component:

<template> <! -- Life cycle function --><div >
        <h2>Life cycle function --{{MSG}}</h2>
        <button @click="beforeCreate()">run</button>
    </div>
</template>
<script>
    export default {
        data(){
            return{
            msg:'msg'}},methods: {setMsg(){
            this.msg="I am changed data."}},// The life hook function
        beforeCreate(){
            console.log('Before instance creation');
        },
        created(){
            console.log('Instance creation completed');
        },
        beforeMount(){
            console.log('Template before compilation');
        },
        mounted(){
            console.log('Template compiled'); // Request data, manipulate DOM, put in this}}</script>
Copy the code

Then it is introduced, mounted and used in app. vue, and the final effect is as follows:

Parent component passes value to child component

In VUE, it is possible to pass a value to a child component through the parent component. The steps are as follows: 1. When the parent component calls the child component, bind the dynamic property

    <v-header :title="title"></v-header>
Copy the code

2, in the parent component, props is used to receive data from the parent component:

<script>
    export default {
        data(){
            return{
            msg:'msg'}},methods: {},props: ['title', MSG]// Receive the title of the parent component
    }
</script>
Copy the code

The parent component actively obtains the data and methods of the child component

In addition to having the parent pass values to the child, the parent can also actively fetch the child’s data.

The first step is to define a ref when calling the child component

    <v-header ref="header"></v-header>
Copy the code

The second step. Called from the parent component via the this.$refs.header. property

getChildData(){
    alert(this.$refs.header.msg);
}
Copy the code

Effect of 👇

The child component actively obtains the data and methods of the parent component

If a child wants to get the parent’s data proactively, it simply calls this.$parent. Data/methods

getParentData(){
    alert(this.$parent.msg)
}
Copy the code

Ix. Vue non-parent and child components transfer values

You can start by using an empty Vue instance as the event bus,

1. Create a new JS file, import vUE, instantiate vUE, and expose the instance

// Introduce an empty vue instance
import Vue from 'vue';

var VueEvent=new Vue()

export default VueEvent
Copy the code

2. Introduce the instance just defined where you want to broadcast

<script>
    // Import the vue instance
    import VueEvent from '.. /model/VueEvent.js';
<script/>
Copy the code

$emit(‘ name ‘,’ data ‘)

methods:{
    emitHome(){
        VueEvent.$emit('to-home'.this.msg)
    }
}
Copy the code

VueEmit.$on(‘ name ‘, function(){});

mounted(){
    VueEvent.$on('to-news'.function(data){
        console.log(data)
    })
}
Copy the code

Routing in VUE

The first is the routing configuration in vUE

1, install,

npm install vue-router --save     
cnpm install vue-router --save
Copy the code

Vue.use(VueRouter) (main,js)

import VueRouter from 'vue-router'

Vue.use(VueRouter)
Copy the code

3. Configure routes

1) Create components import components. 2) Define routes

    const routes = [
      { path: '/foo'.component: Foo },
      { path: '/bar'.component: Bar }
    ]
Copy the code

(3) Instantiate VueRouter

    const router = new VueRouter({
        routes // routes: routes
    })
Copy the code

(4) Mount

   new Vue({
       el:'#app',
       router,
       render:h= >h(App)
   })
Copy the code

(5) To be placed in the template of the root component

    <! -- Routing matched components will be rendered here in app.vue -->
    <router-view></router-view>
Copy the code

4. Transformation of navigation routes

    <p>
        <! -- Use the router-link component to navigate.
        <! -- Specifies the link by passing in the 'to' attribute.
        <! -- <router-link> will be rendered as a '<a>' tag by default.
        <router-link to="/foo">Go to Foo</router-link>
        <router-link to="/bar">Go to Bar</router-link>
    </p>
Copy the code

5. Redirect the default forward route

    { path: The '*'.redirect: '/home' }
Copy the code

Use of ElementUI and webpack.config.js configuration

1. ElementUI website

2, installation,

    cnpm i element-ui  --save
Copy the code

3. Introduce CSS and related plug-ins for Element UI

     import ElementUI from ' element-ui ' ;
     import ' element-ui.lib.theme-chalk/index.css' ;
     Vue.use( ElementUI ) 
Copy the code

4. Configure file_loader

    {
       test: /\ . (eot\svg\ttf\woff\woff2) ( \? \S*) ? $/,
       loader: ' file-loader'
    }
Copy the code

5, see the document to use.

Instead of importing the entire elementUI directly, we can also import it on demand to reduce the size of the project.

Install 👇 with babel-plugin-Component

npm install babel-plugin-component -D
Copy the code

2. Locate the. Babelrc configuration file

{
    "presets": [["env", { "modules": false}]."stage-3"]}Copy the code

Modified into

{
    "presets": [["env", { "modules": false }]],
    "plugins": [["component",
            {
            "libraryName": "element-ui"."styleLibraryName": "theme-chalk"}}]]Copy the code

3, Use to import one of the elmentUI components we need:

import { Button, Select } from 'element-ui';
Copy the code

Then use:

Vue.use(Button)
Vue.use(Select)
Copy the code

The simple summary here requires a deeper understanding to digest the knowledge ~~