Heim > Artikel > Web-Frontend > Zusammenfassung einiger einfacher Vue.js-Anweisungen
Der in diesem Artikel vorgestellte Inhalt ist eine Zusammenfassung einiger einfacher Vue.js-Anweisungen, die einen gewissen Referenzwert haben. Jetzt können Freunde in Not darauf verweisen
HTML-Seite:Die Daten auf der Seite sind die Daten in Daten
<p id="app">{{message}}</p>Vorlagenbefehl: Steuern Sie den Inhalt des Moduls
v-text (Steuern Sie den Textinhalt des Elements)
eg: <p v-text="a"></p> --> a 是data中的av-html (Steuern Sie den Inhalt des Elements, einschließlich interne Struktur)
eg:<p v-html="a"></p>Steuermodul ausgeblendet
v-if
eg:<p v-if="isShow"></p> -->isShow的值是布尔值,true:显示, false,隐藏
eg:<p v-if="isShow"></p> -->isShow的值是布尔值,true:显示, false,隐藏Render-Loop-Liste v-for
eg: <ul> <li v-for="item in items"> <p v-text="item.label"></p> -->item是items里的每一个对象,items是data里的数组 </li></ul>Ereignisbindung Definieren Sie v-on
eg:<button v-on:click="doSomething"></button> click 可以是hover,focus等事件 eg: <button @click="doSomething"></button> 简写形式Attributbindung
v-bind eg:<img v-bind:src="imageSrc"> src属性赋值 imgSrc (简写)eg: <p :class="{red:isRed}"></p> isRed:true:加上类red,false:不加类red eg: <p :class="[classA, classB]"></p> 绑定多个类名 eg: <p :class="[classA,{classB: isB, classC: isC}]"></p>Beispiel:
js:var app = new Vue({ el:"#app", data:{ 这里填写数据,以键值对的形式 a:"heollo", demo:1, items:[{label:"vue1"},{label:"vue2"}] }, methods:{这里可以写自己定义的函数, doSomething:function(){ console.log(this.a); --> this指代的是vue的对象, a 是data里的a } }, watch:{ 监听,监听demo的变化, 参数是变化前后的值变化 'demo':function(val, oldVal){ console.log(val, oldVal); } } });
Verwendung und Beispiele der benutzerdefinierten Anweisungen von Vue.js
Erste Schritte mit Vue.js – integrierter Befehl v-html
Vue.js-Wissenszusammenfassung – Befehl
Hinweise zur Verwendung von vue.js
Das obige ist der detaillierte Inhalt vonZusammenfassung einiger einfacher Vue.js-Anweisungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!