vue常用的指令
阿新 • • 發佈:2017-09-21
發生 tro app sna nbsp col 實例 spa 使用
vue常用的指令
<body>
<div id="app">
<h1>{{ msg }}</h1> //數據寫入方式
<h2 v-text="msg"></h2> //v-text寫入數據,但是標簽名內不能再寫入其他的值,因為會被v-text覆蓋
<h2 v-once="msg">{{ msg }}</h3> //v-once本身不能寫入值,他只是制定標簽內的某個相關的值不會隨實例中數據動態發生改變
<h2>{{ msg }}</h2>
<input type="text" v-model="msg"> //使用v-model進行雙向綁定 讓h2標簽內的數據與表單裏面的數據聯動
<h2 v-bind:title="msg">給h2綁定title屬性</h2> //v-bind為h2標簽綁定title屬性 <h2 :title="msg">v-bind的簡寫方式</h2> //v-bind為h2標簽綁定title屬性的簡寫方式 <h2 v-bind={id:"id", class:"class"}>綁定id,className</h2> //v-bind也可以綁定一個對象
</div>
<script> var vm = new Vue({ el: "#app", data: { msg: "vue中常用指令!" } }) </script> </body>
<h2>{{ msg }}</h2>
<h2 v-bind:title="msg">給h2綁定title屬性</h2> //v-bind為h2標簽綁定title屬性 <h2 :title="msg">v-bind的簡寫方式</h2> //v-bind為h2標簽綁定title屬性的簡寫方式 <h2 v-bind={id:"id", class:"class"}>綁定id,className</h2> //v-bind也可以綁定一個對象
<script> var vm = new Vue({ el: "#app", data: { msg: "vue中常用指令!" } }) </script> </body>
vue常用的指令