Shulou(Shulou.com)06/01 Report--

Recently, I used Vue.js in a certain project, and I stepped on a lot of holes step by step from the development to the release of the project. This article attempts to summarize some of the experience in using Vue.js in the past month, which can be regarded as a little experience. I would like to share it with you. Welcome to communicate more.

Introduction to Vue.js

Vue.js is a JavaScript framework for building astonishing web applications. Vue.js is a JavaScript library for creating web interfaces. Vue.js is a tool that leverages the use of MVVM architecture.

This is an explanation from the official website of Vue.js, where we are no longer going to translate the concept according to the script, but only based on the author's experience in using Vue.js. Readers familiar with ReactJS or Angular may be familiar with this.

Vue.js, like ReactJS and AngularJS, share the same development philosophy, extending native structured tags such as HTML as its template language, and further providing concepts such as two-way data binding and interactive data model through grammatical extensions, thus freeing developers from complicated DOM operations and paying more attention to the content of the business itself.

In addition, similar to React, both put forward the concept of virtual DOM and component-based development, thus improving the maintainability and performance of the code. Vue.js tries to realize the advantages of these frameworks in a minimalist way, so Vue.js is lighter, more concise, and more elegant than React and Angular.

Next, before we delve further into Vue.js, let's take a look at some of the core concepts of Vue.js.

Componentization

Component-based development is a popular concept in the last two or three years. Components created by using Vue.js, like bricks that build tall buildings, have good encapsulation and reusability. Each component has its own independent style and data field, and is completely isolated from other components. To put it simply, any front-end interface can be divided into components with different responsibilities through reasonable planning. We will not further develop the concept of component-based development, interested students can further read this article front-end engineering-basic article.

Plug-in of Vue.js

As you know, the core of Vue.js retains only content related to data binding and component-based development. Therefore, it ensures its minimalist mechanism. In addition, it also provides an efficient and flexible plug-in mechanism for additional functions. Plug-ins that are familiar to everyone include vue-router, vee-validator, vue-touch and so on. In addition, it also provides a mechanism that allows developers to encapsulate their own components. This allows you to more effectively abstract certain functions for team development. For example, you can abstract the logic about data calculation into separate plug-ins that can be used by team members, and so on.

State and vuex

If your project is very brief and has no complex logic, then you don't need to introduce vuex at all. Vuex is a module used to manage and share application state between the various components of the application. If you have used React, then you should be familiar with Flux. Vuex plays a similar role.

Vue-cli

Vue.js also provides a very efficient command line tool, which can quickly build Vue.js-based components and applications by using a few simple commands, which greatly reduces the developer's workload and frees the developer from the complicated and repetitive work. With regard to vue-cli, we will no longer expand, readers can read vue-cli to learn more about the functions of vue-cli.

Common instruction

Vue.js provides internal instructions, including v-for, v-if, v-show, v-bind, v-model, v-on, v-html and so on. The usage of each instruction is not described in detail here. Readers can refer to the documentation.

What needs to be noted is the difference between v-if and v-show. V-show is hidden or not by changing the display attribute of the DOM element, while unlike v-show, v-if is hidden or not by completely removing the DOM element. So, if your hidden content does need to be repeated, use v-show for better performance.

V-bind differs from v-model in that v-model is bidirectional data binding while v-bind is unidirectional.

When using v-for, it is best to provide a key to vue.js.

Data transmission

The parent component passes data to the child component through props, and the child component passes data changes to the parent component through events. For simple data modification, you can do so in this way. But for complex data logic, it is recommended to manage it through vuex. For example, the parent component passes title to the child component:

/ / in the parent component / / the child component export default {props: ['title'], / / then you can use it through this.title}

The child component is passed to the parent component through the event

/ / export default {methods: {changeTitle (text) {this.title = text;} / / Child component export default {methods: {onChangeTitle (text) {this.$emit ('changeTitle', this.id, text)}

For global state, it can be encapsulated through vuex. For example, user login information, constant information used globally, and so on. There are a lot of contents about vuex, you can see here. Vuex api .

Life cycle approach

Vue.js provides a complete set of component lifecycle hook methods, and you can do what needs to be done at all stages of the component lifecycle. The methodology for its complete lifecycle is shown below:

Vue-resource

Front-end development is inevitable front-end interaction, vue-resource is highly recommended here. It is recommended that all API involved in front-end interaction be placed in a separate api.js file for easy management. Then import the corresponding method where the interface is needed. Here is an example:

Import Vue from 'vue'import VueResource from' vue-resource'Vue.use (VueResource) const API = {"getYAndMGrade": "/ / localhost:3000/demo/getYAndMGrade", "createMonthPlan": "/ / localhost:3000/demo/createMonthPlan"}; const post = (url,params) = > {return Vue.http.post (url, {params: params}) .then (function (res) {return res.data;});} / / Interface 1export const getYAndMGrade = (user) = > {return post (API.getYAndMGrade, {user:user});}; / / Interface 2export const createMonthPlan = (user, month) = > {return post (API.createMonthPlan, {user:user, month: month});}

Vue-router

Vue-router is a solution based on vue.js to solve front-end routing. Vue-router provides features including dynamic routing. An example is also given here:

Export default [{name: 'about', path:' / about/', component: require ('. / pages/about.vue')}, {name: 'blog', path:' / blog/:blogId', component: require ('. / pages/blog.vue')}]

As you can see from the blog in the example, we can pass the id parameter and pass id in the component. In addition, we can pass multiple parameters, such as'/ blog/:blogID/:postId', and so on. It is recommended that no more than 2, because the transmission of more and more, it is no longer easy to manage.

Component refresh

The author has repeatedly encountered a problem in the process of using vue.js, that is, the problem of component refresh. For example, menus are used in the author's project, and different menus are opened for different routes and components. If you click again in the current component to open the menu of the current component, the component will not be refreshed.

This leads to a headache because the user clicks on the menu itself to refresh the current page, and the component's data is not refreshed, so the latest data cannot be seen. The solution is to add a time parameter to the component routing, and then add a watch to this time parameter in the component. The specific implementation is as follows:

/ / add the current timestamp _ parameter and then watch the time parameter in the component: export default {... Watch: {"this.$router._": function () {/ / refresh data here}}...}

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.