Vue.js——常用的指令
阿新 • • 發佈:2017-12-05
ack scrip ems src special 一個 分享圖片 spa 視圖 指令需要使用
1、v-on:指令監聽DOM事件,並在觸發時運行一些javaScript代碼。
<div id=‘myView‘> <img src="img/se.png" v-on:click="queryBook"> </div>
在視圖模型中調用聲明的監聽事件
var myViewModel = new Vue({
el:‘#myView‘,
data:myModel,
methods:{
queryBook:function(){
alert(‘ok?‘);
});
2、v-for:指令根據一組數組的選項列表進行渲染。v-for
item in items
形式的特殊語法,items
是源數據數組並且 item
是數組元素叠代的別名。
<ul id="example-1"> <li v-for="item in items"> {{ item.message }} </li> </ul>
var example1 = new Vue({ el: ‘#example-1‘, data: { items: [ { message: ‘Foo‘ }, { message: ‘Bar‘ } ] } })
運行結果:
3、v-bind:動態地綁定一個或多個特性,或一個組件 prop 到表達式。
<!-- 綁定一個屬性 --> <img v-bind:src="imageSrc"> <!-- 縮寫 --> <img :src="imageSrc"> <!-- 內聯字符串拼接 --> <img :src="‘/path/to/images/‘ + fileName"> <!-- class 綁定 --> <div :class="{ red: isRed }"></div> <div:class="[classA, classB]"></div> <div :class="[classA, { classB: isB, classC: isC }]"> <!-- style 綁定 --> <div :style="{ fontSize: size + ‘px‘ }"></div> <div :style="[styleObjectA, styleObjectB]"></div> <!-- 綁定一個有屬性的對象 --> <div v-bind="{ id: someProp, ‘other-attr‘: otherProp }"></div> <!-- 通過 prop 修飾符綁定 DOM 屬性 --> <div v-bind:text-content.prop="text"></div> <!-- prop 綁定。“prop”必須在 my-component 中聲明。--> <my-component :prop="someThing"></my-component> <!-- 通過 $props 將父組件的 props 一起傳給子組件 --> <child-component v-bind="$props"></child-component> <!-- XLink --> <svg><a :xlink:special="foo"></a></svg>
4、v-model:在表單控件元素上創建雙向數據綁定,負責監聽用戶的輸入事件以更新數據,並特別處理一些極端的例子。
<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p>
運行結果:
5、component(組件):可以擴展 HTML 元素,封裝可重用的代碼。(自定義元素)
<div id="myDiv"> //調用自定義組件 <student v-for="stu in stuList" v-bind:stu="stu" v-bind:key="stu.name"> </student> </div>
<script> var model = {stuList : [{id:1,name : "zhangsan", age : 18}, {id:2,name : "lisi", age : 18}, {id:3,name : "wangwu", age : 18}]}; var vm = new Vue({ el : "#myDiv", data : model }); <script>
//如果在同一個頁面中,要在確保viewModel啟動之前先註冊組件 //在js中自定義組件目的是為了可復用 //註冊 Vue.component(‘student‘, { //聲明props props:[‘data‘], template: ‘<div><span style="color:red">{{data.id}}</span><span style="color:green">{{data.name}}</span><span style="color:blue">{{data.height}}</span></div>‘ });
Vue.js——常用的指令