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