1. Introduction to Vue.js
1. The main features of Vue: (1) Concise (2) Lightweight (3) Fast (4) Data driver (5) Module friendly (6) Componentization
(1) Concise
Here is a piece of Angular's code to implement two-way binding
// html<body ng-app="myApp"> <div ng-controller="myCtrl"> <p>{{ note }}</p> <input type="text" ng-model="note"> </div></body>// jsvar myModule = angular.module('myApp', []);myModule.controller('myCtrl', ['$scopp', function($scope) { $scope.note = '';]);Then look at the code of Vue:
// html<body> <div id="app"> <p>{{ note }}</p> <input type="text" v-model="note"> </div></body>// jsvar vm = new Vue({ el: '#app', data: { note: '' }})In comparison, I personally think that Vue's code writing style is more concise and easy to understand.
(2) Not without elegance
Although Vue is a relatively lightweight framework, it is simple and lightweight and very user-friendly. The API it provides is also very easy to understand, and it also provides some very convenient instructions and attributes.
For example:
1) Bind click event
<a v-on:click="doSomething"></a>
It can be abbreviated as:
<a @click="doSomething"></a>
2) Bind dynamic attributes
<a v-bind:href="url"></a>
It can be abbreviated as:
<a :href="url"></a>
3) Convenient modifier
<!-- Prevent the click event from bubbled --><a @click.stop="doSomething"></a><!-- Events are triggered 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="500"><!-- Update data in "change" instead of "input" events --><input v-model="msg" lazy>
How about it, does it feel so elegant?
(3) Small Tips
Speaking of smallness, we should first pay attention to the source code size of Vue. The source code of Vue's production version (i.e., min version) is only 72.9kb. The official website says that gzip is only 25.11kb after compression, which is half smaller than Angular's 144kb.
One advantage of compactness is that it allows users to choose corresponding solutions more freely, and it gives users more room in terms of matching other libraries.
For example, the core of Vue does not include routing and Ajax functions by default, but if you need routing and AJAX in your project, you can directly use the official library Vue-router and third-party plug-in vue-resource provided by Vue. At the same time, you can also use other libraries or plug-ins you want to use, such as jQuery's AJAX, etc.
Doesn't it feel very flexible?
(4) There are many great masters
Although Vue is small, it is "sparrow is small and has all the internal organs", and it is also easy to build large-scale applications.
1) Modular
Combined with some third-party module building tools, such as CommonJS, RequireJS or SeaJs, the code modularity can be easily achieved.
However, here I do not recommend using the above-mentioned construction tools. It is currently the most popular solution to directly use the modular function of ES6 and then package it accordingly with Webpack.
If you don't understand the functions of the ES6 module, please refer to the link address for details:
In future articles, I will also introduce it, including the configuration of Webpack.
2) Componentization
Vue's componentization function is a highlight of it. By putting the html, CSS, and js code of a certain component on the page into a .vue file for management, the maintenance of the code can be greatly improved.
For example:
// App.vue<template> <div v-text="note"></div></template><script>export default { data () { return { note: 'This is a component's html template! ' } }}</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 a component's html template! ' } }}</script><style lang="styles">.box color: #000</style>Of course, we need to package it through webpack. It is recommended to use Webpack + vue-loader, and use ES6 syntax at the same time. Babel needs to be installed for conversion. Because the article is a brief discussion of Vue.js, I will not give an in-depth introduction here.
3) Routing
Like Angular, Vue has its routing capabilities. Through the routing function, we can realize on-demand loading of each component and easily build a single-page application. Here 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) } } })}2. Introduction to BootPage Components
Actually, it is not a high-end component. On the contrary, it is really just a simple table paging component. It is mainly because I need a table paging component in my recent project. The Vue official component library pagination components are too powerful or not suitable for me, so I wrote one myself to make do with it. Maybe someone like me needs such a simple paging component to implement simple paging functions. I will share it here, and everyone will fill in the pits.
If you need high-end components, you can move to the official Vue component library
(1) How to use
In the .vue component file, we write template like this, that is, html code:
<table> <thead> <tr> <th>id</th> <th>name</th> <th>content</th> <th>remark</th> </tr> </thead> <tbody> <ttr 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> </tbody> <tfoot> <tr> <td colspan="4"> <div> <boot-page :async="false" :data="lists" :lens="lenArr" :page-len="pageLen"></boot-page> </div> </td> </tr> </tfoot> </table>
In the <boot-page> tag async refers to whether to obtain data from the server side, false is no; data is a static tabular data array; lens is an array of rows displayed per page; page-len is the number of pages that can be displayed;
JavaScript code that uses static data, that is, the contents in the script tag are as follows:
<script> import bootPage from './components/BootPage.vue' export default { data () { return { lenArr: [10, 50, 100], // Display length per pageLen: 5, // Number of pages that can be displayed: [ {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, no need to use tableList when using server data: [] // post-paging data returned by the pagination component} }, components: { bootPage }, events: { // table data returned by the pagination component 'data' (data) { this.tableList = data } } } </script>Generally, we rarely use static tabular data, and most applications' data are obtained from the server side, so here is a method to obtain server pagination data:
The component HTML that uses server data is as follows:
<boot-page :async="true" :lens="lenArr" :url="url" :page-len="pageLen" :param="param"></boot-page>
where url is the request address of the server; param is the parameter object that needs to be sent to the server;
The code using server data javascript is as follows:
<script> import bootPage from './components/BootPage.vue' export default { data () { return { lenArr: [10, 50, 100], // Display length per pageLen: 5, // Number of pages that can be displayed url: '/bootpage/', // Request path param: {}, // Pass parameter tableList to the server: [] // Post-paging data returned by the pagination component} }, methods: { refresh () { this.$broadcast('refresh') // A table refresh function is provided here} }, components: { bootPage }, events: { // The table data returned by the pagination component (here is the data returned by the server) 'data' (data) { this.tableList = data } } } }</script>Note: In addition to the array content passed to the component table, the server also needs a key name of the total number of pages, named page_num
(2) Component source code
As for the implementation of pagination, the source code here will not be displayed. I uploaded all the source code to my github, address
Let me remind you in advance: Because I took several hours to drive out this component, I must have been inadequate in writing formats and specifications of Vue components and have not been completely independent, so I consciously fill in the pit. I will only share it here.
Of course, you can also modify the component's code at will to suit your project's use. After all, it is quite complicated to implement large and complete paging components.
This article has been compiled into the "Vue.js Front-end Component Learning Tutorial", and everyone is welcome to learn and read.
For tutorials on vue.js components, please click on the special topic vue.js component learning tutorial to learn.
The above is all about this article, I hope it will be helpful to everyone's learning.