Erste Schritte mit der vue.js1.0-Version

vue

　vue.js ist eine Bibliothek zum Erstellen interaktiver Webschnittstellen. Es bietet MVVM-Datenbindung und ein zusammensetzbares Komponentensystem mit einer einfachen, flexiblen API. Technisch gesehen konzentriert sich Vue.js auf die Ansichtsmodellebene des MVVM-Musters und verbindet Ansicht und Modell durch bidirektionale Datenbindung. Die tatsächliche DOM-Manipulation und Ausgabeformatierung wird in Anweisungen und Filter abstrahiert. Im Vergleich zu anderen MVVM-Frameworks ist der Einstieg in Vue.js einfacher.

Vue.js ist eine Bibliothek zum Erstellen interaktiver Webschnittstellen. Sie können damit datengesteuerte UI-Komponenten über eine einfache und flexible API erstellen.

 <br>

Gemeinsame Vue1.0-Syntax

<span style="font-size: 18px"><code class="hljs oxygene"><span class="hljs-keyword">var vm = <span class="hljs-keyword">new Vue(<span class="hljs-comment">{

　　el: "选择器",  挂载到页面的那个元素里，即确定vue的作用范围  外部可通过vm.$el访问，得到的是一个原生dom元素，可进行对应操作

　　a: '',  //自定义属性  外部可通过vm.$options访问

　　data: { }, <span class="hljs-comment">//实例属性都在这里面，外部通过实例名,即vm.$data调用

　　computed: <span class="hljs-comment">{ }, <span class="hljs-comment">//计算属性，也是实例属性，只是以方法的形式存在，并可以有逻辑运算的属性

　　<span class="hljs-function"><span class="hljs-keyword">method: <span class="hljs-comment">{ }, <span class="hljs-comment">//实例方法都在这里

　　watch: <span class="hljs-comment">{ }, <span class="hljs-comment">//对data和computed的属性进行监听，当属性有变化时自动触发，以方法的形式存在 外部通过$.watch调用

　　<span class="hljs-comment">//注意：以上属性和方法，实例内部都通过this调用,外部则通过对应的实例方法访问

　　<span class="hljs-comment">//在vue的生命周期过程中，它自身还提供了一系列的钩子函数供我们使用，进行自定义逻辑的注入：　　　

　　created: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 实例已经创建 }

　　<span class="hljs-title">beforeCompile: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 模块编译之前 }

　　<span class="hljs-title">compiled: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 模块编译之后；即模板占位符被是内容替换}

　　<span class="hljs-title">ready: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 模板插入到文档中了；相当于window.onload }//<span class="hljs-title">Vue2.0已改为<span class="hljs-title">mounted

　　注意： 以上4个方法在对象被实例化后即按顺序执行，以下2个方法需通过事件触发，并通过调用 实例名.$<span class="hljs-title">destory<span class="hljs-params">() 才执行

　　<span class="hljs-title">beforeDestroy: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 对象销毁之前 }

　　<span class="hljs-title">destroyed: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 对象销毁之后 }

});<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span>

Vue-Objektanalyse:

1, Objekteigenschaften

Daten, El, Optionen, Überwachung, berechnet

2, Objektmethode

Lebenszyklus-Hook-Funktion

3, Objektinstanzzugriff und Aufrufattribute und -methoden

A: Instanzattributaufruf: $options, $el, $data, $watch

Hier konzentrieren wir uns auf $watch, seine allgemeine Syntax lautet:

vm.$watch("监听的实例属性名",function() { // 对于监听数据变化后的业务处理代码 });     --浅度监听

Wenn das überwachte Attribut ein Basisdatentyp ist, gibt es bei der oben genannten Verwendung kein Problem. Wenn das überwachte Attribut jedoch ein Objekt ist, haben sich die Daten innerhalb des Objekts geändert und das oben Genannte Methode kann nicht überwacht werden. Ja, für eine detaillierte Überwachung ist ein Parameter erforderlich. Die spezifische Syntax lautet wie folgt:

vm.$watch("监听的实例属性名",function() { // 对于监听数据变化后的业务处理代码 },{deep: true});　　--深度监听

B: Instanzmethodenaufruf: $mount(), $log(), $destroy()

4, integrierte Filter und benutzerdefinierte Filter

A: Die integrierten Filter von Vue sind:

Capitalize (den ersten Buchstaben groß schreiben), Großbuchstaben, Währung, JSON (entspricht JSON.Stringify()), Debounce (gefolgt von der Anzahl der Sekunden). , passende Ereignisse, verzögerte Ausführung)

　 limitBy(parameter 1, Parameter 2) Häufig verwendete Ausdrücke v-für Array, begrenzen Sie die Anzahl der Ausgaben und wo ausgegeben werden soll; Parameter 1 stellt die Anzahl dar der Ausgänge stellt Parameter 2 die Anzahl der Ausgänge dar

filterBy (Parameter) filtert Daten, filtert Daten, die Parameter enthalten, und arbeitet mit dem Eingabefeld zusammen, um Eingabevariablen zu filtern, um den Effekt zu erzielen der Hot-Suche

orderBy (Parameter) Sortieren Sie die Daten in positiver Reihenfolge, wenn sie -1 sind Parameter gibt es? 1 und -1 sind also grundsätzlich häufige Situationen

　B: Benutzerdefinierte Filtersyntax (für die Zeitstempelverarbeitung handelt es sich um einen allgemeinen benutzerdefinierten Filter)

<span style="font-size: 18px"><code class="hljs actionscript">Vue.filter(<span class="hljs-string">"过滤器名称",<span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(参数<span class="hljs-rest_arg">...){

　　　　...  //业务处理

　　　　return <span class="hljs-rest_arg">...;

　　});<br></span></span></span></span></span></span></code></span>

5, integrierte Anweisungen und benutzerdefinierte Anweisungen

Die Anweisungen sind eine Erweiterung der HTML-Syntax und müssen mit v- beginnen. Im Allgemeinen sind die Anweisungen in unserem Mund tatsächlich Es bezieht sich zur Attributanweisung. Das Element, das diese Attributanweisung verwendet, hat die entsprechende Attributfunktion. Das folgende C bezieht sich auf die Elementanweisung, die sich von der Attributanweisung unterscheidet

A: Kommt mit Anweisungen : v-if, v-show, v-else, v-module, v-text, v-html, v-bind, v-on, v-el, v-cloak...

Hier konzentrieren wir uns auf V-Text und V-Cloak: Wenn wir Instanzattributdaten in der Vorlage aufrufen, tun wir dies normalerweise {{Instanzattribut}}, sodass die Seite bei relativ langsamer Netzwerkgeschwindigkeit angezeigt wird Die geschweiften Klammern und der ursprüngliche Inhalt im Inneren werden angezeigt, was keine gute Benutzererfahrung bietet. Es gibt zwei Möglichkeiten, mit dieser Situation umzugehen:

　1. Verwenden Sie die V-Uhr Anweisung für größere Absatzelemente und legen Sie das CSS des Elements fest: display:none

　　　2. Verwenden Sie v-text/v-html anstelle von geschweiften Klammern. Vue2.0 unterstützt dies ebenfalls. und es dauert Die Klammermethode kann abgebrochen werden

B: Benutzerdefinierte Direktivensyntax:

　Vue.directive("指令名称",function(..){
　　　　this.el.style.background = 'red';   //这里的this代表new出来的实例，this.el代表原生的dom元素
　　});

Verwenden Sie den v-Direktivennamen im Vorlage oder v-Befehlsname = „Parameter“, Sie können beim Aufrufen des Befehls Parameter übergeben

Fügen Sie beim Definieren des Befehlsnamens nicht v- hinzu, sondern v-

bei Verwendung der Vorlage

C: Benutzerdefinierter Elementbefehl (es wird gesagt, dass er nicht sehr nützlich ist und ignoriert werden kann. Der gewünschte Effekt wurde von der Komponente übertroffen)

 Vue.elementDirective("自定义元素名称",{
　　　　bind: function() {};
　　});

B-Case-Syntax wird nicht unterstützt, aber die B-Case-Syntax ist standardmäßig auf bind

6, benutzerdefinierte Tastatur eingestellt Informationen

Vue.directive('on'),keyCodes.ctrl = 17;  //17是ctrl的键码  等号前的ctrl是定义ctrl的别名，可以随便取，实际绑定的就是键盘上的ctrl键

Vorlagenaufruf @keydown.ctrl="Benutzerdefinierte Methode"

Das obige ist der detaillierte Inhalt vonErste Schritte mit der vue.js1.0-Version. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!