1. Einführung in Vue.js
1. Die Hauptmerkmale von Vue: (1) Einfachheit (2) Leichtgewicht (3) Schnell (4) Datengesteuert (5) Modulfreundlich (6) Komponentisierung
(1) Einfachheit
Sehen wir uns einen Teil des Angular-Codes an, der die bidirektionale Bindung implementiert
// 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 = '';
]);Dann schauen wir uns den Vue-Code an:
// 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: ''
}
})Im Vergleich Ich persönlich denke, dass der Codierungsstil von Vue prägnanter und leichter zu verstehen ist.
(2) Eleganz
Obwohl Vue ein relativ leichtes Framework ist, ist es einfach und leicht und sehr benutzerfreundlich, und die bereitgestellte API ist auch sehr leicht zu verstehen einige sehr praktische Anweisungen und Attribute.
Zum Beispiel:
1), Klickereignis binden
2), Bindung dynamischer Attribute
3), praktische Modifikatoren
<!-- 阻止单击事件冒泡 --> <a @click.stop="doSomething"></a> <!-- 只在按下回车键的时候触发事件 --> <input @keyup.enter="submit">
4), wie wäre es mit praktischen Parameterfunktionen
<!-- debounce 设置一个最小的延时 --> <input v-model="note" debounce="500"> <!-- 在 "change" 而不是 "input" 事件中更新数据 --> <input v-model="msg" lazy>
, fühlt es sich nicht sehr elegant an?
(3) Kompakt
Apropos Kompaktheit: Sie sollten zunächst auf die Quellcodegröße von Vue achten. Der Quellcode der Produktionsversion von Vue (d. h. Min.-Version) beträgt nur 72,9 KB, und die offizielle Website nennt es gzip Nach der Komprimierung sind es nur 25,11 KB, was halb so groß ist wie die 144 KB von Angular.
Einer der Vorteile der Kompaktheit besteht darin, dass Benutzer die entsprechenden Lösungen freier auswählen können und Benutzern mehr Raum für die Koordination mit anderen Bibliotheken bietet.
Zum Beispiel enthält der Kern von Vue standardmäßig keine Routing- und Ajax-Funktionen. Wenn das Projekt jedoch Routing und AJAX benötigt, können Sie direkt die offizielle Bibliothek Vue-Router und die von Drittanbietern verwenden Von Vue bereitgestellte Plug-In-Vue-Ressourcen. Gleichzeitig können Sie auch andere Bibliotheken oder Plug-Ins verwenden, die Sie verwenden möchten, z. B. jQuery, AJAX usw.
Fühlt es sich nicht sehr flexibel an?
(4) Es gibt keinen Mangel an Meistern
Obwohl Vue klein ist, verfügt es über alle inneren Organe, obwohl es klein ist, und es ist auch praktisch beim Erstellen groß angelegter Anwendungen.
1) Modularisierung
In Kombination mit einigen Modulerstellungstools von Drittanbietern wie CommonJS, RequireJS oder SeaJs kann der Code einfach modularisiert werden.
Der Herausgeber empfiehlt hier jedoch nicht, die oben genannten Build-Tools zu verwenden. Die direkte Nutzung der modularen Funktion von ES6 und die Kombination mit Webpack für entsprechende Verpackungen ist derzeit die beliebteste Lösung.
Wenn Sie die Funktionen des ES6-Moduls nicht verstehen, lesen Sie bitte: http://es6.ruanyifeng.com/#docs/module
In zukünftigen Artikeln werde ich es auch vorstellen, einschließlich Webpack.-Konfiguration.
2), Komponentisierung
Vues Komponentisierungsfunktion kann als eines seiner Highlights bezeichnet werden, indem der HTML-, CSS- und JS-Code einer bestimmten Komponente auf der Seite in eine .vue-Datei eingefügt wird Die Verwaltung in Dateien kann die Wartbarkeit des Codes erheblich verbessern.
Zum Beispiel:
// App.vue
<template>
<div class="box" v-text="note"></div>
</template>
<script>
export default {
data () {
return {
note: '这是一个组件的html模板！'
}
}
}
</script>
<style scoped>
.box {
color: #000;
}
</style>Wir können auch eine Vorverarbeitungssprache in die Komponente schreiben:
// App.vue
<template>
div(class="box" v-text="text")
</template>
<script>
export default {
data () {
return {
note: '这是一个组件的html模板！'
}
}
}
</script>
<style>
.box
color: #000
</style>Natürlich müssen wir es über Webpack verpacken Es wird empfohlen, Webpack + Vue-Loader zu verwenden. Für die Konvertierung muss die ES6-Syntax installiert werden. Da es sich bei dem Artikel um eine kurze Diskussion von Vue.js handelt, werde ich hier keine ausführliche Einführung geben.
3), Routing
Wie Angular verfügt auch Vue über eine Routing-Funktion. Durch die Routing-Funktion können wir jede Komponente nach Bedarf laden und problemlos eine einseitige Anwendung erstellen. Das Folgende ist eine einfache Routing-Konfigurationsdatei:
// 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)
}
}
})
}(1) Verwendung von
In der .vue-Komponentendatei schreiben wir die Vorlage wie folgt, also den 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" :data="lists" :lens="lenArr" :page-len="pageLen"></boot-page> </div> </td> </tr> </tfoot> </table>
Der JavaScript-Code, der statische Daten verwendet, ist wie folgt:
<script>
import bootPage from './components/BootPage.vue'
export default {
data () {
return {
lenArr: [10, 50, 100], // 每页显示长度设置
pageLen: 5, // 可显示的分页数
lists: [
{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'},
{num: 1, author: 'luozh', contents: '123', remark: 'bootPage'}
], // 表格原始数据，使用服务器数据时无需使用
tableList: [] // 分页组件传回的分页后数据
}
},
components: {
bootPage
},
events: {
// 分页组件传回的表格数据
'data' (data) {
this.tableList = data
}
}
}
</script>Im Allgemeinen verwenden wir selten statische Tabellendaten, die meisten Anwendungsdaten werden alle vom Server abgerufen. Hier ist also eine Methode zum Abrufen von Server-Paging-Daten:
Die HTML-Komponente, die vom Server verwendet wird Die Daten lauten wie folgt:
Wobei url die Anforderungsadresse des Servers ist; param ist die Anforderungsadresse, an die das Parameterobjekt vom Server gesendet wird
Der Code für die Verwendung von Serverdaten-Javascript lautet wie folgt :
<script>
import bootPage from './components/BootPage.vue'
export default {
data () {
return {
lenArr: [10, 50, 100], // 每页显示长度设置
pageLen: 5, // 可显示的分页数
url: '/bootpage/', // 请求路径
param: {}, // 向服务器传递参数
tableList: [] // 分页组件传回的分页后数据
}
},
methods: {
refresh () {
this.$broadcast('refresh') // 这里提供了一个表格刷新功能
}
},
components: {
bootPage
},
events: {
// 分页组件传回的表格数据（这里即为服务器传回的数据）
'data' (data) {
this.tableList = data
}
}
}
</script>Hinweis: Zusätzlich zum an die Komponententabelle übergebenen Array-Inhalt benötigt der Server auch einen Schlüsselnamen für die Gesamtzahl der Seiten mit dem Namen page_num
Für weitere Informationen Artikel zu Tabellen-Paging-Komponenten basierend auf Vue.js, beachten Sie bitte die chinesische PHP-Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
