首頁 > web前端 > js教程 > 主體

一些簡單的Vue.js的指令總結

零到壹度
發布: 2018-04-21 11:16:49
原創
1344 人瀏覽過

這篇文章介紹的內容是一些簡單的Vue.js的指令總結,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

HTML頁面:

<p id="app">{{message}}</p>
登入後複製

頁面中的資料就是data中的資料

#模版指令:控制模組的內容


v-text (控制元素的文字內容)  

eg: <p  v-text="a"></p>   --> a 是data中的a
登入後複製
v-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>
登入後複製

事件綁定v-on

     

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

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

    }

    }

  });
登入後複製

#相關推薦:

Vue.js自訂指令的用法與實例

##Vue.js入門-內建指令v-html 

#########Vue.js知識總結-指令################# #vue.js使用注意事項##########

以上是一些簡單的Vue.js的指令總結的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板