Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung einiger einfacher Vue.js-Anweisungen

Zusammenfassung einiger einfacher Vue.js-Anweisungen

零到壹度
零到壹度Original
2018-04-21 11:16:491351Durchsuche

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中的a
v-html (Steuern Sie den Inhalt des Elements, einschließlich interne Struktur)

eg:<p v-html="a"></p>
Steuermodul ausgeblendet

v-if

v-show
 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的变化, 参数是变化前后的值变化

    &#39;demo&#39;:function(val, oldVal){      console.log(val,  oldVal);  

    }

    }

  });


Verwandte Empfehlungen:

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn