Mixins + operational dom (ref and $refs) + a little understanding of component exposure in vue.

Mixing (Mixins) What is mixins?Is a way to reuse functions during component development in vue When the page styles are different, but the methods you perform and the data you need are similar, you can use Mix Bar, a common and identical part of the extract to encapsulate, reduce the amount of code and make modifications and tests more diff ...

Posted by barry_p on Wed, 06 May 2020 17:14:50 -0700

vue introduces public css file

After creating the project directory through Vue cli If you don't want to write css in a single file component as follows: <template> <div id="app"> <div class='nav-box'> <ul class='nav'> <li> <a href="#/">home</a> </li ...

Posted by infini on Mon, 04 May 2020 01:21:23 -0700

Notes on ES7 and ES8

ES7 has two more features than ES6 1.Array.prototype.includes 2. Exponent operator ES8 new proposal: 1.Object.values / Object.entries 2. String padding 3.Object.getOwnPropertyDescriptors 4. Trailing commas in function parameter list and call 5. Asynchronous functions Detailed explanation: 1.A ...

Posted by usawh on Mon, 04 May 2020 01:05:12 -0700

Vue family bucket practice (4) --- Vue router

Recently, the company wants to rewrite the operation management system. It doesn't want to maintain the previous backbone anymore. It needs to rewrite the whole front-end quickly. It took more than two weeks to re open the new pit, and the first edition was published. It was a great harvest. In practice, learning is ...

Posted by BigTime on Fri, 01 May 2020 09:11:50 -0700

vue+axios set token and add request interceptor

1, When the front and back ends are completely separated, the idea of implementing token verification in Vue project is as follows: When logging in for the first time, the front end calls the login interface of the back end, and sends the user name and password The back end receives the request, verifies the user name and password, and returns ...

Posted by buraks78 on Wed, 29 Apr 2020 08:10:44 -0700

iview Modal application: pop up the add / edit data page on the list application page, and then close the pop-up page to refresh the list page

In practical application, a report list page is often needed to support the addition or modification of form data. After the operation, close the sub page and refresh the list page, as shown in the following figure   Main page code key code: 1) Introduce the components of the modal page to be popped up in the main page <product ...

Posted by pets2soul on Thu, 23 Apr 2020 07:51:32 -0700

User authentication with jwt under front-end and back-end separation

0 User Information Authentication with Front-end and Back-end Separation The front end uses Vue+axios and the back end uses SpringBoot+SpringSecurity. To solve the stateless problem of http, I use jwt(json web token) to save user information, bring it with the front end each time a request is made, and give it to the back end for user authentic ...

Posted by mega77 on Wed, 22 Apr 2020 18:43:37 -0700

Vue-based server-side rendering framework Nuxt.js case description

background To develop a new official website (education company), the website needs to consider drainage, promotion, keyword search ranking, so the website needs to do SEO.Vue.js is a framework for building client applications that, by default, can output Vue components in a browser for DOM generation and operationsDOM, like this client-side re ...

Posted by sledgeweb on Sun, 19 Apr 2020 00:51:45 -0700

Life cycle function in React

Life cycle function refers to the function that the component will automatically execute at a certain time constructor can be regarded as a common life cycle function of a class, but it is not a unique life cycle function of react render() is a function that automatically executes when the data changes, so it belongs to the life cycle function ...

Posted by wmvdwerf on Tue, 14 Apr 2020 10:16:16 -0700

vue search page development (hot search, historical search, Taobao interface demonstration)

Full effect demonstration   Complete the pseudo search box first src/components/search/index.vue (general search box component) <template> <div class="mine-search-box-wrapper"> <i class="iconfont icon-search"></i> <div class="mine-search-box" v-if="fake">{{placeholder}}</div> <input ...

Posted by Lagreca on Sat, 11 Apr 2020 07:46:12 -0700