VUE-文本-事件-屬性指令

一、Vue文本指令

文本指令：

1、{{ }}

2、v-text：不能解析html語法的文本，會原樣輸出

3、v-html：能解析html語法的文本

4、v-once：處理的標簽的內容只能被解析一次

HTML：

<div id="app">
    <!--這里的值可以利用字符串方法-->
    <p>{{ msg.split('') }}</p>
    <!--有值就會被文本指令代替了-->
    <p v-text="msg.split('')">12345</p>
    <p v-text="info"></p>
    <p v-html="info"></p>
    <hr>
    <p v-on:click="pClick" v-once>{{ msg + info }}</p>
    <p>{{ msg }}</p>
</div>

JS：

new Vue({
    el: '#app',
    data: {
        msg: 'message',
        info: '<i>info</i>'
    },
    methods: {
        pClick: function () {
            this.msg = '信息'
        }
    }
})

二、Vue事件指令

事件指令：

​ v-on:事件名='方法變量'，

可以簡寫成：

​ @事件名='方法變量'

HTML代碼：

<div id="app">
    <!--
事件指令：   v-on:事件名="方法變量"
簡寫：       @事件名="方法變量"
-->
    <p v-on:click="f1">{{ msg }}</p>
    <p @click="f1">{{ msg }}</p>
    <hr>
    <!--mouseover mouseenter  |  mouseout mouseleave-->
    <p @mouseover="f2" @mouseout="f3" @mouseup="f5" @mousemove="f6" @contextmenu="f7">{{ action }}</p>
    <hr>

    <!-- 事件變量，不添加()，默認會傳事件對象: $event -->
    <!-- 事件變量，添加()，代表要自定義傳參，系統不再傳入事件對象，但是可以手動傳入事件對象 -->
    <p @click="f8($event, '第一個')">{{ info }}</p>
    <p @click="f8($event, '第二個')">{{ info }}</p>
</div>

JS代碼：

new Vue({
    el: '#app',
    data: {
        msg: '點擊切換',
        action: '鼠標事件',
        info: '確定點擊者'
    },
    methods: {
        f1 () {
            this.msg = '點擊了'
        },
        f2 () {
            this.action = '懸浮';
            console.log('懸浮')
        },
        f3 () {
            this.action = '離開'
        },
        f4 () {
            this.action = '按下'
        },
        f5 () {
            this.action = '抬起'
        },
        f6 () {
            this.action = '移動';
            console.log('移動')
        },
        f7 () {
            this.action = '右鍵';
        },
        f8 (ev, argv) {
            console.log(ev, argv);
            this.info = argv + '點擊了';
        }
    }
})

三屬性指令

屬性指令：

​ v-bind:屬性名='變量'

簡寫：

​ ：屬性名='變量'

HTML代碼：

<div id="app">
    <!--
屬性指令：   v-bind:屬性名="變量"
簡寫：       :屬性名="變量"
-->
    <p style="color: red" class="dd1" abc="def" title="懸浮提示">紅色字體</p>

    <!--1、簡單使用-->
    <p v-bind:title="pTitle" :abc="def" @click="changeImg">簡單使用</p>
    <!--<img :src="img_src" alt="">-->


    <!--2、class屬性綁定-->
    <!--c1變量的值就是類名-->
    <p :class="c1"></p>

    <!--多類名可以用[]語法，采用多個變量來控制-->
    <p :class="[c2, c3]"></p>
    <!--選擇器位可以設置為變量，也可以設置為常量-->
    <p :class="['d1', c4]"></p>

    <!--{類名: 布爾值}控制某類名是否起作用-->
    <!--<p :class="{x1: false}"></p>-->
    <!--多種語法混用-->
    <p :class="['d1', {d2: is_true}]" @click="is_true = !is_true"></p>


    <!--3、style屬性綁定(了解)-->
    <p :style="myStyle">樣式屬性</p>
    <p :style="{width: w,height: h, backgroundColor: bgc}">樣式屬性</p>
</div>

JS代碼：

new Vue({
    el: '#app',
    data: {
        pTitle: '簡單使用',
        def: '自定義屬性',
        img_src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3819296004,574391848&fm=26&gp=0.jpg',
        c1: 'd1 d2',
        c2: 'd1',
        c3: 'd3',
        c4: 'd3',
        is_true: true,
        myStyle: {
            width: '100px',
            height: '100px',
            backgroundColor: 'red'
        },
        w: '200px',
        h: '100px',
        bgc: 'green'
    },
    methods: {
        changeImg() {
            this.img_src = 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1371195756,4187769521&fm=26&gp=0.jpg'
        }
    }
})