Vue.js + vue-element set up their own back-end management templates: What is Vue.js (a)?
Vue.js + vue-element set up their own back-end management templates: What Vue.js is (a)?
Foreword
This tutorial explains technical knowledge on the front Vue.js framework, by learning step by step learn to build their own background template management, and records and technical points the problem I encountered in the learning process, explain the basics of individuals sharing the same time learning experience for readers and learning, this tutorial requires a certain amount of JavaScript programming capabilities, and to master the basics of HTML and CSS, if with web development experience, will be easier to interpret this tutorial. If in doubt you can leave a message for discussion in the comments section, we have beginner progress together with you. (Author writing hard, do not accept any extraneous Technical Review, do not like do not spray! I recorded the learning bit by bit, the project for the future combat for reference.)
background
The company decided to discuss re-architecture of the old project, requiring separate front and rear end, back-end Spring cloud + .net core micro-service architecture, front-end MVVM pattern, SAP single-page rich applications. R & D department finally decided VUE front-end framework, because it learn the lowest cost, and meet current demand. Before most people R & D team did not come into contact with the MVVM pattern, plus a large business complex project, degree of difficulty of the unknown, the spot a little mean, but fortunately, I had a Vue.js learning accumulated before, barely elementary level , taking advantage of before the project started, the experience I have learned before sorting out a simple technical documentation, can be considered their own re-review it again, the original intention was for those who do not understand Vue.js framework has not been exposed Vue.js of want to know the difference between the traditional way of front-end development, such as the compiler with which novices doubt this tutorial have a preliminary understanding, and hope to achieve quick start by short-term self-study, which started research and development projects. By understanding each person can be considered in advance as a team and make a final decision. Novice also recommend reading the official documentation in the technical documentation as the ultimate reference and with reading. I first met VUE could not understand some deep level of knowledge or misunderstanding, hope later to give the reader correction and evaluation of teaching (Baoquan).
What Vue.js that?
Official documents introduced, Vue.js is a progressive framework for building user interfaces, easy to use, flexible and efficient, it seems that any scale applications are applicable. It uses the MVVM pattern, with well-known front-end framework Angular, Ember, etc., like, make Web development easier, but also to subvert the traditional front-end development mode, Vue belong lightweight, approachable, lower learning costs.
MVVM pattern
MVVM is a Model-View-ViewModel shorthand, i.e. the model - view - view model. When the View (view level) changes automatically updated to the ViewModel (model view), and vice versa, by way binding between View and ViewModel.
And the difference between MVC, MVC is one-way communication, based on a framework VUE MVVM pattern is implemented, in the VUE Model layer refers to data in the data js, View layer refers to a page view, refers to the ViewModel object instance vue .
Vue.js first example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="你的名字">
<h1>你好，{{ name }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
name, ''
data: {
el '#app'
was app = new Vue ({
Vue.js + vue-element set up their own back-end management templates: What Vue.js is (a)?
Foreword
This tutorial explains technical knowledge on the front Vue.js framework, by learning step by step learn to build their own background template management, and records and technical points the problem I encountered in the learning process, explain the basics of individuals sharing the same time learning experience for readers and learning, this tutorial requires a certain amount of JavaScript programming capabilities, and to master the basics of HTML and CSS, if with web development experience, will be easier to interpret this tutorial. If in doubt you can leave a message for discussion in the comments section, we have beginner progress together with you. (Author writing hard, do not accept any extraneous Technical Review, do not like do not spray! I recorded the learning bit by bit, the project for the future combat for reference.)
background
The company decided to discuss re-architecture of the old project, requiring separate front and rear end, back-end Spring cloud + .net core micro-service architecture, front-end MVVM pattern, SAP single-page rich applications. R & D department finally decided VUE front-end framework, because it learn the lowest cost, and meet current demand. Before most people R & D team did not come into contact with the MVVM pattern, plus a large business complex project, degree of difficulty of the unknown, the spot a little mean, but fortunately, I had a Vue.js learning accumulated before, barely elementary level , taking advantage of before the project started, the experience I have learned before sorting out a simple technical documentation, can be considered their own re-review it again, the original intention was for those who do not understand Vue.js framework has not been exposed Vue.js of want to know the difference between the traditional way of front-end development, such as the compiler with which novices doubt this tutorial have a preliminary understanding, and hope to achieve quick start by short-term self-study, which started research and development projects. By understanding each person can be considered in advance as a team and make a final decision. Novice also recommend reading the official documentation in the technical documentation as the ultimate reference and with reading. I first met VUE could not understand some deep level of knowledge or misunderstanding, hope later to give the reader correction and evaluation of teaching (Baoquan).
What Vue.js that?
Official documents introduced, Vue.js is a progressive framework for building user interfaces, easy to use, flexible and efficient, it seems that any scale applications are applicable. It uses the MVVM pattern, with well-known front-end framework Angular, Ember, etc., like, make Web development easier, but also to subvert the traditional front-end development mode, Vue belong lightweight, approachable, lower learning costs.
MVVM pattern
MVVM is a Model-View-ViewModel shorthand, i.e. the model - view - view model. When the View (view level) changes automatically updated to the ViewModel (model view), and vice versa, by way binding between View and ViewModel.
And the difference between MVC, MVC is one-way communication, based on a framework VUE MVVM pattern is implemented, in the VUE Model layer refers to data in the data js, View layer refers to a page view, refers to the ViewModel object instance vue .
Vue.js first example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<input type="text" v-model="name" placeholder="你的名字">
<h1>你好，{{ name }}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
name, ''
data: {
el '#app'
was app = new Vue ({