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'
        }
    }
})