Introduction of Vue.js
1, the main features of the Vue: (1) Concise (2) Lightweight (3) Fast (4) data-driven (5) module-friendly (6) component
(1) Concise
here's a angular of code that implements two-way binding
HTML
<body ng-app= "myApp" >
<div ng-controller= "Myctrl" >
<p>{{Note}}</p>
<input type= "text" ng-model= "note" >
</div>
</body>
//js
var mymodule = Angular.module (' myApp ', []);
Mymodule.controller (' Myctrl ', [' $scopp ', function ($scope) {
$scope. Note = ';
]);
And then look at the Vue code:
HTML
<body>
<div id= "app" >
<p>{{Note}}</p>
<input type= "text" V-model= "Note" >
</div>
</body>
//js
var vm = new Vue ({
el: ' #app ',
Data: {Note
: '
}
}]
I personally think Vue's code writing style is simpler and easier to understand.
(2) without losing elegance
Although Vue is a lightweight framework, simple lightweight and very user-friendly, its API is also very easy to understand, but also provides some very convenient instructions and attributes.
For example:
1), Binding click event
<a v-on:click= "DoSomething" ></a>
can be abbreviated as:
<a @click = "DoSomething" ></a>
2), binding dynamic properties
<a v-bind:href= "url" ></a>
can be abbreviated as:
<a:href= "url" ></a>
3), convenient modifier
<!--Prevent Click event bubbling--> <a @click. stop= "DoSomething" ></a> <!--triggers events only when the ENTER key is pressed--> <input @keyup. enter= "Submit" >
4), Practical parameter characteristics
<!--debounce set a minimum delay--> <input v-model= "note" debounce= "" "> <!--in" change "instead of" input " Update Data--> <input v-model= "MSG" lazy> in Events
How about, is not feeling very elegant.
(3) Compact
Speaking of small, it should be the first to pay attention to the source size of the Vue, Vue version (that is, min version) source only 72.9kb, the official website said gzip compressed only 25.11kb, compared to the angular 144kb reduced by half.
A small advantage is that it allows users to choose the appropriate solution more freely, in conjunction with other libraries it gives users more space.
such as Vue's core default is not to include routing and AJAX functionality, but if the project requires routing and AJAX, you can directly use the Vue provided by the official library Vue-router and Third-party plug-ins Vue-resource, and you can also use the other you want to use the library or plug-ins, such as jquery Ajax.
is not feeling very flexible.
(4) No shortage of great craftsmen
Vue Although small, but "though small spite", in the construction of large-scale applications is also handy.
1), Modular
Combining some Third-party module building tools, such as COMMONJS, Requirejs, or SEAJS, you can easily modularize your code.
But here is not recommended to use the above construction tools, direct use of ES6 modular functions, combined with webpack packaging is currently the hottest solution.
Do not understand ES6 module features can be described in the following: http://es6.ruanyifeng.com/
In future articles, I will also introduce them, including the Webpack configuration.
2), modular
Vue's component function is a big bright spot, by putting a component on the page HTML, CSS, JS code into a. vue file management can greatly improve the maintenance of the code.
For example:
App.vue
<template>
<div class= "box" v-text= "note" ></div>
</template>
<script>
Export Default {
data () {return
{
Note: ' This is an HTML template for a component! '
}
}
</script>
<style scoped>
. Box {
color: #000;
}
</style>
We can also write some preprocessing languages in the component:
App.vue
<template lang= ' jade ' >
div (class= "box" v-text= "text")
</template>
< Script>
Export Default {
data () {return
{
Note: ' This is an HTML template for a component! '
}
}
</script>
<style lang= ' stylus ' >
. Box
color: #000
</style>
Of course, we need to do this by Webpack to package, recommend the use of Webpack + Vue-loader, while using the ES6 syntax, need to install Babel to convert. Because the article is about Vue.js, so here do not do in-depth introduction.
3), routing
Like angular, Vue also has its routing capabilities. Through the routing function, we can implement the loading of each component on demand and easily build a single page application. The following is a simple routing configuration file:
Router.js
' use strict '
export default function (Router) {
router.map ({
'/': {
component: function (resolve) {
require (['./components/foo.vue '], resolve)
}
},
'/foo ': {
component: function (resolve) {
require (['./components/foo.vue '], resolve)
}
},
'/bar ': {
component: function (resolve) {
require (['./components/bar.vue '], Resolve)}}
)
}
Ii. Introduction to Bootpage components
It's not really a tall component anymore, instead, it is a simple page-paging component, primarily a form-paging component in its most recent project, and the Vue official component library is either too powerful or not suitable for me, so I wrote a makeshift Maybe someone and I need such a simple paging component to achieve a simple paging function, I will be here to share, we consciously landfills slightly.
For tall components, you can vue the official component library: Https://github.com/vuejs/awesome-vue
(1) Use method
In the. Vue component file, we write template, that is, HTML code:
<table class= "Table Table-hover table-bordered" > <thead> <tr> <th width= "10%" > id</th> <th width= "30%" >name</th> <th width= "40%" >content</th> <th Width= "20%" >remark</th> </tr> </thead> <tbody> <tr v-for= "data in Tablelist "> <td v-text=" Data.num "></td> <td v-text=" Data.author "></td> <td v-text= "data.contents" ></td> <td v-text= "Data.remark" ></td> </tr > </tbody> <tfoot> <tr> <td colspan= "4" > <div class= " col-sm-12 pull-right "> <boot-page:async=" false ":d ata=" lists ": lens=" Lenarr ":p age-len=" Pagelen "> </boot-page> </div> </td> </tr> </tfoot> </table>
<boot-page> Label Async refers to whether to obtain data from the server side, False is no; Data is a static array of paginated tables; lens an array of rows for each page; Page-len is the number of pages that can be displayed;
The JavaScript code that uses static data, which is inside the script tag, reads as follows:
<script>
import bootpage from './components/bootpage.vue '
export default {
data () {return
{
Lenarr: [10, 50, 100],//per page display length set
pagelen:5,//can display pagination
lists: [
{num:1, Author: ' Luozh ', contents: ' 1 Remark: ' Bootpage '},
{num:1, Author: ' Luozh ', Contents: ' 123 ', remark: ' Bootpage '},
{num:1, author: ' Luozh ', Contents: ' 123 ', remark: ' Bootpage '},
{num:1, Author: ' Luozh ', Contents: ' 123 ', remark: ' Bootpage '},
{num:1 , author: ' Luozh ', Contents: ' 123 ', remark: ' Bootpage '},
{num:1, Author: ' Luozh ', Contents: ' 123 ', remark: ' Bootpage '}
],//table raw data, use server data without using
tablelist: []//Paging component returned data
}
},
components: {
bootpage
Events: {
//Page component returns the form data
{
this.tablelist = Data
}}
}
</script>
In general, we rarely use static tabular data, most applications are obtained from the server side, so this provides a way to get server paging data:
The component HTML that uses server data is as follows:
<boot-page:async= "true": lens= "Lenarr": url= "url":p age-len= "Pagelen":p aram= "param" ></boot-page>
where the URL is the server's request address; Param is the parameter object that needs to be sent to the server;
The code for using the server data JavaScript is as follows:
<script>
import bootpage from './components/bootpage.vue '
export default {
data () {return
{
Lenarr: [10, 50, 100],//per page display length set
pagelen:5,//Can be displayed pagination
URL: '/bootpage/',///request path
param: {},///Send to Server Parameter
tablelist: []//page after paging component returned data
}
},
methods: {The
refresh () {this
. $broadcast (' Refresh ')//This provides a table refresh feature
}
},
components: {
bootpage
},
events: {
// The tabular data returned by the paging component (here is the data returned by the server)
' data ' {
this.tablelist = Data
}}
</script >
Note: The server, in addition to the array content to the Component table, also requires a key name for the total number of pages, named Page_num
(2) Component source code
As for paging the realization of the source code here is not shown, all the source code I have uploaded to my github, the address is: https://github.com/luozhihao/BootPage
Here in advance a wake up: Because this component is I use a few hours to drive out, so for the Vue components of the writing format and norms must be considered ill-conceived, not completely independent out, so consciously landfills slightly, here only to share.
Of course, you can also arbitrarily modify the components of the code to suit the use of their own projects, after all, the implementation of all-inclusive paging component is still relatively complex.
This article has been organized into the "Vue.js front-end component Learning course", welcome to learn to read.
The above is the entire content of this article, I hope to help you learn.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
