vue第二篇之指令

v-text相当于{{}}

html代码

<span v-text="msg"></span>
<!-- 和下面是一样的 -->
{{msg}}

js代码

new Vue({
    el: "#app",
    data: {
        msg: "hello"
    }
});

v-html

html代码

<div v-html="msg"></div>

js代码

new Vue({
    el: "#app",
    data: {
        msg: "hello"
    }
});

v-show

html代码

<span v-show="vs">aa</span>

js代码

new Vue({
    el: "#app",
    data: {
        vs: true
    }
});

v-if v-else-if v-else

html代码

    <span v-if="msg == 'hello'">a</span>
    <span v-else-if="msg == 'hi'">b</span>
    <span v-else>c</span>

js代码

new Vue({
    el: "#app",
    data: {
        msg: "hello"
    }
});

v-for

html代码

<ul>
    <li v-for="li in list" v-text="li"></li>
</ul>

js代码

new Vue({
    el: "#app",
    data: {
        list: ['aa','bb','cc']
    }
});

v-on缩写@

绑定事件监听器

html代码

<div @click="test()">
        <!-- v-on:click点击事件 -->
        <button type="button" v-on:click="click()">点我</button>
        <!-- @click.stop停止冒泡 -->
        <button type="button" @click.stop="click()">点我1</button>
</div>  
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">
<!-- 点击回调只会触发一次 -->
<button v-on:click.once="doThis">点我2</button>

js代码

new Vue({
    el: "#app",
    data: {},
    methods: {
        click(){
            alert(1);
        },
        test(){
            alert(2);
        },
        onEnter(){
            alert(3);
        },
        doThis(){
            alert(4);
        }
    }
});

v-bind缩写

用于绑定 DOM 属性

css代码

.classA{
    color: red;
    font-size: 18px;
}   

html代码

<!--v-bind绑定一个属性-->
<img v-bind:src="imgSrc" alt="">
<!--缩写-->
<img :src="imgSrc" alt="">
<!--内联字符串拼接-->
<img :src="'./images/'+fileName" alt="">
<!--class 绑定-->
<div :class="{classA: isRed}">1111111</div>
<div :class="classB">2222222</div>
<!--style绑定-->
<div :style="{color: activeColor,fontSize: activeFont}">3333333</div>
<div :style="classC">44444444</div>

js代码

new Vue({
    el: "#app",
    data: { 
        imgSrc: "./images/1.jpg",
        fileName: "1.jpg",
        isRed: true,
        classB: {
            classA: true  // 当值为true时有效，false无效
        },
        activeColor: 'red',
        activeFont: '18px',
        classC: {
            color: 'red',
            fontSize: '18px'
        }
    }
});

v-model

随表单控件类型不同而不同

html代码

<!-- 文本框 -->
<input type="text" v-model="msg">
<span>{{msg}}</span>
<br/>
<!-- 复选框 -->
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
<br/>
<!-- 下拉列表 -->
<select v-model="selectde">
    <option v-for="option in options" :value="option.value">
        {{option.text}}
    </option>
</select>
<span>{{selectde}}</span>

js代码

new Vue({
    el: "#app",
    data: {
        msg: 'hello',
        selectde: [],
        checkedNames: [],
        options: 
            [
                {value:'aa',text: 'aa'},
                {value:'bb',text: 'bb'}
            ]
    }
});

v-cloak

一般放在根元素上，这样{{}}不会显示，直到编译结束。

html代码

<div id="app" v-cloak>
</div>