1. Beauty and the Beast
2. 9-up
3. goodgood
4. Petty and Low Group
5. Team Wang

• Overview
• what is Vue.js
• Progressive framework
• Components System of Vue.js
• The development history of Vue. js
• Advantage of Vue.js
• Disadvantage of Vue.js
• Lifecycle of Vue.js
• 3 reasons to use Vue.js
• Template syntax of Vue.js
• Common Method of Vue.js
• Helloworld in Vue.js
• Who is using Vue.js
• Vue.js Frontend with a Spring Boot Backend
• Vue.js and the Ecosystem
• Conclusion
• Reference

Vue is a javascript framework for building user interfaces. It is capable of powering sophisticated Single -Page Applications (SPAs). It is one of the three most popular modern JavaScript frameworks, with the other two frameworks being Angular and React.

Vue has a reputation of being fairly easy to grasp and as straightforward as it gets when it comes to writing code. It can also be used to target Native when used with a combination of other libraries and tools.

• Vue.js is a lightweight, high-performance, componentizable MVVM library, and has a very easy-to-use API.

• Vue.js is a library for building data-driven web interfaces.

• Vue.js is a progressive framework for building user interfaces. Unlike other heavyweight frameworks, Vue uses a bottom-up incremental development design. Vue's core library only focuses on the view layer, and is very easy to learn and integrate with other libraries or existing projects. On the other hand, Vue is fully capable of driving complex single-page applications developed with single-file components and libraries supported by the Vue ecosystem. Data-driven + componentized front-end development.

In short: Vue.js is a progressive framework for building data-driven web interfaces. The goal of Vue.js is to implement responsive data binding and combined view components through the simplest possible API. The core is a responsive data binding system.

Whether it is a single page or multiple pages. The first is to declare each field through declarative rendering, which is a basic requirement.

The basic requirement is that no matter what page or function, declarative rendering will be used to render our fields, because we need to display some information and some functions, then we must pass rendering. Usually we will extract the common head and tail to make a component. At this time, you need to use the component system.

Single-page applications often require routing. At this time, we need to pull in the vue-router to do routing. If our project is complex enough, a large number of components are used and it is difficult to manage the state of the component. Vue-resource is centralized to manage our state. After the project is completed, we need build tools to build our system to improve our effect, and finally form the completed project.

With Vue, you can use it to implement one or two components on the original large system as jQuery. It can also be developed with the whole part of vue as an angular. You can also use its view to match the whole lower layer of your own design. You can use OO and design patterns in the underlying data logic. It can also be functional. It's just a lightweight view, only doing what it should do, not doing what it shouldn't do, that's all. You don't have to use all the part of Vue from the beginning. According to the scene, the official provides a convenient framework for you to use.

MVVM: MVVM is to change the Controller in MVC and Presenter in MVP to ViewModel. Model + View + ViewModel. View changes will be automatically updated to ViewModel, ViewModel changes will be automatically synchronized to the View to display. View is a js template for HTML text ViewModel is the business logic layer (all js visual business logic, such as form button submission, custom event registration and processing logic are responsible for monitoring the data on both sides in the viewmodel) Model data layer Processing of data (such as addition, deletion, and modification)

##Components System of Vue.js One of the most powerful features of Vue.js are Components. Components can extend HTML elements and encapsulate reusable code. At a higher level, components are custom elements, Vue.js The compiler for adds special features to it. In some cases, components can also be represented as native HTML elements extended with the is feature.

The component system uses Vue.js Build the foundation for large-scale applications. Large applications can be built with independent reusable small components. Almost any type of application interface can be abstracted as a component tree.

The emergence of components is to solve a series of problems such as page layout. There are two kinds of components in Vue: global component and local component.

After creating a global component Vue.component (), we can use this component as a custom element in a root instance of Vue created by new Vue.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="app">
    <!--use-->
    <global_component></global_component>
</div>
<script>
    // register
    Vue.component("global_component", {
        template: `
        <div>
            <h2>Hello Vue</h2>
        </div>
      `
    });

    new Vue({
        el: "#app",
    });
</script>
</body>
</html>

Global registration is sometimes not ideal. For example, if you use a build system like webpack, global registration of all components means that even if you no longer use one component, it will still be included in your final build results. This has resulted in a needless increase in JavaScript downloaded by users. Local components are recommended.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../statics/vue.min.js"></script>
</head>
<body>
<div id="component-demo">
</div>
<script>
     // The attributes is same to the global components
    let Header = {
        template: `
        <button @click="count++">{{ count }}</button>
      `,
        data() {
            return {
                count: 0
            }
        }
    };

    new Vue({
        el: "#component-demo",
        // does not render div into DOM, with template as root element
        template: `<my-header></my-header>`,
        components: {
            'my-header': Header
        }
    });
</script>
</body>
</html>

Vue.js was officially released in February 2014. For the current Vue. js: In terms of number of developers, it covers more than 70 contributors. In terms of popularity, GitHub has more than 20,000 stars. From scaffolding, construction, plug-in, componentization, to editor tools, browser plug-in, etc., basically covered from development to testing and other aspects. The development milestones of Vue. js are as follows: On December 24, 2013, 0.7.0 was released. On January 27, 2014, it released 0.8.0. On February 25, 2014, it released 0.9.0. On March 24, 2014, it released 0.10.0. On October 27, 2015, 1.0.0 was officially released. Preview 2.0 will be released on April 27, 2016. A more stable version of 1.0.24 is currently recommended.

1. Two-way data binding

This is the so-called responsive data binding. Responsive here is not a responsive layout in @media Query, but it means that vue.js will automatically respond to changes in certain data on the page. This is the biggest advantage of vue.js. The two-way binding of data is realized through the idea of MVVM, so that developers no longer need to manipulate dom objects and have more time to think about business logic.

2. Component development

In front-end applications, can we also encapsulate modules like programming? This introduces the idea of component development.

Vue.js uses components to split the various modules in a single-page application into a single component. We only need to write the various component labels in the parent application (accounting for pits), and in Write the parameters of the component in the component label (just like passing parameters to the function, this parameter is called the property of the component), and then write the implementation of each component separately, and then the entire application is finished.

3. Lightweight and efficient

Vue.js provides efficient data binding and flexible component system through a concise API

4. Virtual DOM

Now the network speed is faster and faster. Many people have dozens or even hundreds of megabytes of optical fiber in their homes. The mobile phone also started 4G. A web page is only a few hundred kilobytes, and the browser itself will cache many resource files. Why is it that tens of megabytes of optical fiber open a page that has been opened before and has been cached still feels slow? This is because there is also a performance bottleneck in the browser's processing of DOM. Especially in the traditional development, when the DOM is frequently operated by jQuery or native JavaScript DOM operation functions, the browser constantly renders a new DOM tree, which makes the page look very stuck.

Virtual DOM, in short, is a kind of computing that can be done through JavaScript in advance to calculate and optimize the final DOM operation. Because this DOM operation is a preprocessing operation, there is no real DOM operation, so it is called virtual dom. Finally, the DOM operation is actually submitted after the calculation, and the DOM operation changes are reflected on the DOM tree.

• The ecosystem is not complete.
• Less scalability.

1. Less Plugins/Components

Common plugins are useful as they work with various other tools to make development easy. Vue.js does not have most of the common plugins, and that is the drawbacks of Vue.js.

2. Vue.js Evolving Fast

What is working in Vue today may be outdated tomorrow. This is the most significant drawbacks of Vue as developers find it is rather complicated, and they have to learn the framework quite frequently.

3. Issues with iOS & Safari

If you are using Vue.js app on older version iOS and Safari, then you are supposed to get some problems, though they are fixable.

4. Small Community

Vue was initially launched in 2014, and therefore it is still new and evolving very fast. As a result, it is not so popular compared to other frameworks such as React and Angular. Besides, as a Chinese company has created the framework, most of the code has been written in the Chinese language, which creates some issues for English speaking users. Most of the members in the community are non-English speakers that too in small numbers which may not be supportive.

5. More Flexible than Needed

Flexibility is excellent, but it’s not always good as when you are working on some more significant projects in which developers are involved, then it will create some issues. Over-flexibility causes more errors and irregularity within the code. More errors and irregularity means, projects will get delayed.

Each Vue instance goes through a series of initialization steps when it’s created - for example, it needs to set up data observation, compile the template, mount the instance to the DOM, and update the DOM when data changes. Along the way, it also runs functions called lifecycle hooks, giving users the opportunity to add their own code at specific stages.

For example, the created hook can be used to run code after an instance is created:

new Vue({ data: { a: 1 },created: function () { console.log('a is: ' + this.a) } })

1) Lifecycle function during creation

• beforeCreate： The instance has just been created in memory, at this time, the data and methods properties have not been initialized;
• Created： The instance has been created in memory, at this time data and methods have been created, and the template has not yet been compiled;
• beforeMount： At this point, the template has been compiled, but it has not been mounted on the page;
• Mounted： At this point, the compiled template has been mounted and displayed in the container specified on the page;

2) Life cycle function during operation

• beforeUpdate： This function is executed before the status update. At this time, the status value in data is the latest, but the data displayed on the interface is still old, because at this time, the DOM node has not been re-rendered;
• Updated： This function is called after the instance is updated. At this time, the status value in data and the data displayed on the interface have been updated, and the interface has been re-rendered!

3) Life cycle function during destruction

• beforeDestroy： Called before the instance is destroyed. In this function, the instance is still fully available.
• Destroyed： Called after the Vue instance is destroyed. After calling this function, everything indicated by the Vue instance will be unbound, all event listeners will be removed, and all child instances will also be destroyed.

It's hard to choose a JavaScript framework – because there's too many of them, and because the differences are not immediately obvious. If you agree that productivity ("how fast can I get things done") and performance ("how fast will my website be") are the most important criteria, let me show why Vue.js is a very solid framework for building websites and single-page applications.

• A component library based on HTML, CSS & JS makes it simple to get started
• The essential features like routing and data management are covered by official libraries

Vue.js includes the core module that allows you to build components as we discovered, but it also includes a set of opinionated libraries built by the Vue.js team itself such as vue-router for the routing part, Vuex to manage your data, vue-cli to bootstrap a new project.

• Fast rendering ensured by virtual DOM and minimal load time

Vue.js is only ~30 KB gzipped with the core module, the router and Vuex. A minimal footprint offers short load time, meaning higher speed for users and better ranking on the speed criterium for Google crawler

• Vue.js uses HTML-based template syntax, allowing developers to declaratively bind dom to the data of the underlying vue instance.

• All vue.js templates are legal HTML, so they can be parsed by standard browsers and HTML parsers.

• In the underlying implementation, vue compiles the template into a virtual dom rendering function. Combined with the response system, vue can calculate the minimum number of components that need to be re-rendered and reduce the number of dom operations. This can increase the efficiency of JavaScript.

1. Take DOM element ref="aaa" this.$refs.aaa

2. element-ui

main.js

import Element from 'element-ui'

Vue.use(Element)
Page
<el-carousel :interval="3000">
    <el-carousel-item v-for="(list,ind) in Imgs" :key="ind">
        <img :src="list.picUrl" class="img_res">
    </el-carousel-item>
</el-carousel>

style
 @import url('element-ui/lib/theme-chalk/index.css');

3. mock Download the bag： mock-axios-adapter

import mockjs from 'mockjs';
import axios from 'axios';
import axiosAdapter from 'mock-axios-adapter'  


const mock = new axiosAdapter(axios);

mock.onGet('address').reply(200,{
    errCode:0,
    errMsg:'',
    result:[{
        url:'./static/img/banner.jpg'
    }]
})

   <div id="vueFirst">        

     <p>{{message}}</p>    

   </div>

   new Vue({        

     el: '#vueFirst',        

     data: {            

       message: 'Hello World Vue.js'        

     }    

   })

More than 700 companies are using Vue.js. Some of the most important are: Xiaomi, Alibaba, and Gitlab.

• Spring Boot exports REST Apis using Spring Web MVC & interacts with Database using Spring JPA
• Vue Client sends HTTP Requests and retrieve HTTP Responses using axios, shows data on the components. We also use Vue Router for navigating to pages.
• Database could be MySQL or PostgreSQL.

• The App component is a container with router-view. It has navbar that links to routes paths.
• TutorialsList component gets and displays Tutorials.
• Tutorial component has form for editing Tutorial’s details based on :id.
• AddTutorial component has form for submission new Tutorial.
• These Components call TutorialDataService methods which use axios to make HTTP requests and receive responses.

• The easiest way to create a new Spring Boot app is – start dot spring dot io!
• Just initialize a Spring Boot app with the Web dependency and place the generated zip´s contents into the backend folder.
• We make CRUD operations & finder methods with Spring Data JPA’s JpaRepository.
• The database could be PostgreSQL or MySQL depending on the way we configure project dependency & datasource.

We fairly recommend you to have a glance about another most popular modern JavaScript frameworks(as you metioned in Overview): Angular

The core library comes with tools and libraries both developed by the core team and contributors.

• Devtools - Browser devtools extension for debugging Vue.js applications
• Vue CLI - Standard Tooling for rapid Vue.js development
• Vue Loader - a webpack loader that allows the writing of Vue components in a format called Single-File Components (SFCs)

• Vue Router - The official router for Vue.js
• Vuex - Flux-inspired Centralized State Management for Vue.js
• Vue Server Renderer - Server-Side Rendering for Vue.js

Vue.js is very popular when it comes to creating rich User Interface and Single Page Applications. However, there are plenty of other frameworks which are capable of building fast and interactive UI (User Interface) and SPAs (Single Page Applications). However, as the situation arises, you need to choose the frameworks smartly so that you may not get regretted at the end of the projects. Vue is good if it is demanded according to the projects. According to some expert developers, Vue.js is good choice for small scale projects. That means if you have some large projects in hand, you need to reconsider the selection of frameworks.

• Vue.Js的发展历史. [online] Available at: https://book.51cto.com/art/201610/519257.htm [Accessed 22 May 2020].
• the official document of Vue.js https://vuejs.org/v2/guide/index.html
• Pros and Cons of the Vue.js Framework https://medium.com/@ronak8036/pros-and-cons-of-the-vue-js-framework-8015dcbc05ef
• Blog.csdn.net. 2020. Vue.Js 的 介绍_Javascript_LHQ的博客-CSDN博客. [online] Available at: https://blog.csdn.net/qq_40415721/article/details/81778643 [Accessed 22 May 2020].
• Cnblogs.com. 2020. Vue 组件系统 - 与鹿逐秋 - 博客园. [online] Available at: https://www.cnblogs.com/wangyueping/p/11445766.html [Accessed 22 May 2020].
• 简书. 2020. Github Markdown语法--图文详解. [online] Available at: https://www.jianshu.com/p/8d7325f54ce4 [Accessed 22 May 2020].
• Cloud.tencent.com. 2020. Vue.Js渐进式javascript框架 - 云+社区 - 腾讯云. [online] Available at: https://cloud.tencent.com/developer/article/1585755 [Accessed 22 May 2020].

• Meilin Guo(@juicyguo) what is vue.js
• Ziyue Wang（@Ashley-zy）what is vue.js
• Yilin Li（@SakuraLyl）reference to MVVM
• Ye Tao（@taoye886）reference to MVVM
• Jinran Wang(@Eilands) The advantages of node.js
• Mufeng Su(@su-mufeng) do wikipage The advantages of node.js
• Xinyi Dai(@DaisyDai233) The advantages of vue.js
• Shaofei Xu(@Sophie973) The advantages of vue.js
• Rao Wang(@Wendy-rao) the code of helloworld