這篇文章介紹的內容是一些簡單的Vue.js的指令總結,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下
HTML頁面:
<p id="app">{{message}}</p>
頁面中的資料就是data中的資料
#模版指令:控制模組的內容
v-text (控制元素的文字內容)
eg: <p v-text="a"></p> --> a 是data中的av-html(控制元素的內容,包括內部結構)
eg:<p v-html="a"></p>#控制模組隱藏
v-if
eg:<p v-if="isShow"></p> -->isShow的值是布尔值,true:显示, false,隐藏v-show
eg:<p v-if="isShow"></p> -->isShow的值是布尔值,true:显示, false,隐藏渲染循環清單 v-for
eg: <ul> <li v-for="item in items"> <p v-text="item.label"></p> -->item是items里的每一个对象,items是data里的数组 </li></ul>
eg:<button v-on:click="doSomething"></button> click 可以是hover,focus等事件
eg: <button @click="doSomething"></button> 简写形式
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); } } });#########Vue.js知識總結-指令################# #vue.js使用注意事項##########
以上是一些簡單的Vue.js的指令總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!