Vue.js——經常使用的指令

一、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?');
});

二、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' }
        ]
    }
})

運行結果：

三、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>

四、v-model：在表單控件元素上建立雙向數據綁定，負責監聽用戶的輸入事件以更新數據，並特別處理一些極端的例子。

<input v-model="message" placeholder="edit me">
<p>Message is: {{ message }}</p>

運行結果：

五、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>'
});