Detaillierte Erläuterung der Verwendung des progressiven Frameworks von vue.j-js-Tutorial-php.cn

Dieses Mal werde ich Ihnen eine detaillierte Erklärung zur Verwendung des progressiven Frameworks von vue.js geben. Was sind die Vorsichtsmaßnahmen für die detaillierte Erklärung der Verwendung des progressiven Frameworks von vue.js? Fall, werfen wir einen Blick darauf.

Vue.js ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen. Im Gegensatz zu anderen Schwergewichts-Frameworks bietet Vue Nehmen Sie grundsätzlich ein schrittweise anpassbares Design mit minimalen Kosten an. Vue Die Kernbibliothek konzentriert sich nur auf die Ansichtsebene und lässt sich leicht in andere Bibliotheken von Drittanbietern oder bestehende Projekte integrieren. In Kombination mit Einzeldateikomponenten und Bibliotheken, die vom Vue-Ökosystem unterstützt werden, bietet Vue Es ist auch in der Lage, leistungsstarke Treiber für komplexe Single-Page-Anwendungen bereitzustellen.

Vue.js wurde auf 2.x aktualisiert, mit bestimmten Upgrades und Änderungen an Funktionen und Syntax. In diesem Artikel werden zunächst die grundlegenden Inhalte vorgestellt.

1. Anfängerleitfaden

Die Verwendung von vue ist sehr einfach. Laden Sie vue.js oder vue.min.js herunter und importieren Sie es direkt.

2. Erste Einführung in Vue

2.1 Deklaratives Rendering

Der Kern von Vue.js besteht darin, dass Sie eine prägnante Vorlagensyntax verwenden können, um Daten deklarativ in DOM zu rendern:

<p id="app">
 {{ message }}
</p>
var app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

Nach dem Login kopieren

Dies wird eingegeben: Hallo Vue!

Wir haben unsere erste Vue-Anwendung erstellt! Dies sieht dem Rendern einer String-Vorlage sehr ähnlich, Vue erledigt jedoch viel Arbeit im Hintergrund. Jetzt Daten und DOM Alle Daten und DOM sind bereits miteinander verknüpft und reaktiv. Wie können wir das alles klar verstehen? Aktivieren Sie einfach JavaScript in Ihrem Browser Konsole (jetzt auf der aktuellen Seite geöffnet) und legen Sie den Wert von app.message fest. Sie werden sehen, dass das im obigen Beispiel gerenderte DOM-Element entsprechend aktualisiert wird.

Zusätzlich zur Textinterpolation können wir DOM-Elementattribute auch auf diese Weise binden:

<p id="app-2">
 <span v-bind:title="message">
 鼠标悬停此处几秒，
 可以看到此处动态绑定的 title！
 </span>
</p>
var app2 = new Vue({
 el: '#app-2',
 data: {
 message: '页面加载于 ' + new Date().toLocaleString()  }
})

Nach dem Login kopieren

Nachdem Sie die Maus einige Sekunden lang bewegt haben, werden dynamische Eingabeaufforderungen angezeigt.

„Hier stoßen wir auf etwas Neues. Die angezeigten V-Bind-Attribute werden Direktiven genannt. Direktiven wird das Präfix „v-“ vorangestellt, um anzuzeigen, dass sie von Vue generiert werden Besondere Eigenschaften zur Verfügung gestellt. Wie Sie vielleicht schon vermutet haben, erzeugen sie ein spezielles reaktives Verhalten im gerenderten DOM. Kurz gesagt, was diese Anweisung hier bewirkt, ist: „Das Titelattribut dieses Elements mit abgleichen.“ Die Nachrichteneigenschaft der Vue-Instanz bleibt relevant und aktualisiert.“

Wenn Sie die JavaScript-Konsole des Browsers erneut öffnen und app2.message = 'Some new message' eingeben, sehen Sie erneut, dass der an das Titelattribut gebundene HTML-Code aktualisiert wurde.

2.1 Bedingungen und Schleifen

Auch die Steuerung der Anzeige eines Elements ist ganz einfach:

<p id="app-3">
 <p v-if="seen">现在你可以看到我</p>
</p>
var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

Nach dem Login kopieren

ˆGeben Sie weiterhin app3.seen = false in die Konsole ein und Sie sollten sehen, wie span verschwindet.

Dieses Beispiel zeigt, dass wir nicht nur Daten an Text und Attribute binden können, sondern auch Daten an DOM-Strukturen. Darüber hinaus bietet Vue auch ein leistungsstarkes Übergangseffekt-System, das automatisch Übergangseffekte verwenden kann, wenn Vue Elemente einfügt/aktualisiert/löscht.

„Es gibt noch weitere Befehle, jeder mit seinen eigenen Sonderfunktionen. Beispielsweise kann die v-for-Direktive Daten in einem Array verwenden, um eine Liste von Elementen anzuzeigen:

<p id="app-4">
 <ol>
 <li v-for="todo in todos">
  {{ todo.text }}
 </li>
 </ol>
</p>
var app4 = new Vue({
 el: '#app-4',
 data: {
 todos: [
  { text: '学习 JavaScript' },
  { text: '学习 Vue' },
  { text: '创建激动人心的代码' }
 ]
 }
})

Nach dem Login kopieren

3, Vue-Instanz

Jede Vue-Anwendung beginnt mit der Erstellung einer neuen Vue-Instanz über die Vue-Funktion:

var vm = new Vue({
 // 选项
})

Nach dem Login kopieren

Auch wenn es dem MVVM-Muster nicht vollständig folgt, ist das Design von Vue dennoch davon inspiriert. Als Konvention verwenden wir normalerweise die Variable vm (kurz für ViewModel), um eine Vue-Instanz darzustellen.

3.1Daten und Methoden

„Wenn Sie eine Vue-Instanz erstellen, werden alle im Datenobjekt gefundenen Eigenschaften dem reaktiven System von Vue hinzugefügt. Immer wenn sich die Werte dieser Eigenschaften ändern, reagiert die Ansicht und wird mit den entsprechenden neuen Werten aktualisiert.

// data 对象
var data = { a: 1 }
// 此对象将会添加到 Vue 实例上
var vm = new Vue({
 data: data
})
// 这里引用了同一个对象！
vm.a === data.a // => true
// 设置实例上的属性，
// 也会影响原始数据
vm.a = 2
data.a // => 2
// ... 反之亦然
data.a = 3
vm.a // => 3

Nach dem Login kopieren

Jedes Mal, wenn sich das Datenobjekt ändert, wird die Ansicht neu gerendert. Es ist zu beachten, dass nach der Erstellung der Instanz nur die Eigenschaften reaktiv sind, die bereits in den Daten vorhanden sind. Das heißt, wenn Sie nach der Erstellung der Instanz ein neues Attribut hinzufügen, zum Beispiel:

vm.b = 'hi'

Nach dem Login kopieren

然后，修改 b 不会触发任何视图更新。如果你已经提前知道，之后将会用到一个开始是空的或不存在的属性，你就需要预先设置一些初始值。例如：

data: {
 newTodoText: '',
 visitCount: 0,
 hideCompletedTodos: false,
 todos: [],
 error: null
}

Nach dem Login kopieren

除了 data 属性， Vue 实例还暴露了一些有用的实例属性和方法。这些属性与方法都具有前缀 $，以便与用户定义(user-defined)的属性有所区分。例如：

var data = { a: 1 }
var vm = new Vue({
 el: '#example',
 data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
 // 此回调函数将在 `vm.a` 改变后调用
})

Nach dem Login kopieren

3.2vue实例的声明周期

vue实例的声明周期是一个很重要的概念，理解之后可以通过它实现很多功能。

看下这段代码。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <p id="container">我的声明周期，大家看吧！</p>
 </body>
 <script type="text/javascript" src="js/jquery-3.1.1.min.js" ></script>
 <script type="text/javascript" src="js/vue.js" ></script>
 <script type="text/javascript">
  //以下代码时显示vm整个生命周期的流程
  var vm = new Vue({
   el: "#container",
   data: {
    test : 'hello world'
   },
   beforeCreate: function(){
    console.log(this);
    showData('创建vue实例前',this);
   },
   created: function(){
    showData('创建vue实例后',this);
   },
   beforeMount:function(){
    showData('挂载到dom前',this);
   },
   mounted: function(){
    showData('挂载到dom后',this);
   },
   beforeUpdate:function(){
    showData('数据变化更新前',this);
   },
   updated:function(){
    showData('数据变化更新后',this);
   },
   beforeDestroy:function(){
    vm.test ="3333";
    showData('vue实例销毁前',this);
   },
   destroyed:function(){
    showData('vue实例销毁后',this);
   }
  });
  function realDom(){
   console.log('真实dom结构：' + document.getElementById('container').innerHTML);
  }
  function showData(process,obj){
   console.log(process);
   console.log('data 数据：' + obj.test)
   console.log('挂载的对象：')
   console.log(obj.$el)
   realDom();
   console.log('------------------')
   console.log('------------------')
  }
 </script>
</html>

Nach dem Login kopieren

通过控制台的打印效果可以看出来，实例化 vue 对象大致分为创建vue实例、挂载到dom、数据变化更新、vue实例销毁 4个阶段，，注意每个阶段都有对应的钩子，我们可以通过对这些钩子进行操作，达成一些功能。虽然初学者用不太上，但是提前了解一下还是好的，到时候碰到实际功能要能想得到生命周期的钩子。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！