Communication case between vue components

Summary of communication modes between components Communication between parent and child components How parent-child components communicate // Define props data in the parent component and bind it to the child component <template> <div id="parent"> <input type="text" v-modal="parentMsg"/> ...

Posted on Fri, 03 Apr 2020 00:37:58 -0400 by davidosullivan

Vue watch, computed data monitoring

Data listening is used to listen for changes in the value of memory variables. When the value changes, do some processing.   For example, bind the search box to a two-way binding variable. When the content of the search box changes, provide the corresponding preselected item; For example, when selecting a region, a province is bound to the top ...

Posted on Thu, 02 Apr 2020 18:16:10 -0400 by anth0ny

Non parent child component communication

Method 1: for the communication between non parent and child components, you can use eventBus to listen for an event in the hook function when creating a build, trigger the function in the component that needs to communicate with it, and exchange data at the same time eventBus.js import Vue from 'vue' export default new ...

Posted on Thu, 02 Apr 2020 14:23:18 -0400 by Mr P!nk

Vue Build Course Home

Play effect maps first in accordance with international practice     Project Structure Building Modify app.vue first <template> <div id="app"> <router-view/> </div> </template> <script> export default { name: 'App' } </script> <style> *{ margin:0; padding: 0; list-style:none; } ...

Posted on Thu, 02 Apr 2020 08:18:27 -0400 by kf

Detailed explanation of the binding between vue class and style

1, Several ways to bind a class 1. Object syntax Let's take a look at the example: <div id="app3"> <div :class="{'success':isSuccess,'fail':isFail}">Object binding class</div>  //Simple processing uses data directly to judge <div :class="classes">Compute property binding class</div>  //When ...

Posted on Wed, 01 Apr 2020 22:58:27 -0400 by YodaOfCamarilla

Using vue to write a carousel chart of imitating a simple book

Original address: Bougie's blog Show the final effect first: Vue's idea is to drive the view with data, so it refuses to change the element's margin top to achieve scrolling effect. Write a good css style, just change the class of each picture to achieve the effect of rotation. You can view the rotation chart as two, ...

Posted on Wed, 01 Apr 2020 21:50:52 -0400 by firepages

Some understanding of vue life cycle and hook function

1, Announcement cycle picture on official website 2, Introduction to the life cycle functions of vue1.0 and vue2.0 3, Case explanation 1. Simple case <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"&g ...

Posted on Wed, 01 Apr 2020 16:34:29 -0400 by Drumminxx

The implementation of vue global variables

Recently, the learning of VUE.js involves JS global variables, which are not so much VUE global variables as modular JS development global variables. 1. Global variable specific module It is to organize and manage these global quantities with a specific module. It is convenient to import the module where reference is ...

Posted on Wed, 01 Apr 2020 14:24:23 -0400 by Havok

vuex of vue2.0 -- public data usage management

1, Initial experience of vuex Introduction of vuex npm install vuex --save The appearance of vuex in package.json indicates that the installation is successful Initial use, build public data store Create a new vuex folder and store.js import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); // Declare ...

Posted on Wed, 01 Apr 2020 03:40:55 -0400 by greg_soulsby

Problems encountered by settimeout in vue.js (short time parameter, unstable effect) and Solutions

First look at the effect picture. This is the pop-up effect. The requirement is that the pop-up window is not very abrupt when it appears or disappears, but has a transitional effect. First, look at the implementation idea of pop-up window, first add a beforeActive class, and then add an active class. Let's look at the ...

Posted on Tue, 31 Mar 2020 15:35:07 -0400 by GroundZeroStudio