Vue常用指令之一属性、事件绑定与内容渲染

标签

HTML

正则表达式

Json

包管理工具

vite

CSS

XPath

JavaScript

Jquery

less

ES6

Vue

React

Layui

editor.md

sea.js

Zepto.js

mysql.js

mssql.js

NodeJs

Express

前端template

YAML

杂项

外部链接

Vue常用指令之一属性、事件绑定与内容渲染

[TOC]

## v-cloak 指令

解决网络延迟页面出现vue代码，渲染延迟出现内容闪屏问题，记住需要添加隐藏样式

```HTML
<style>
    [v-cloak] {
        display: none;
    }
</style>

<div id="app">
    <div v-cloak>—-{{msg}}—-</div>
    <div v-text="html">我被v-text覆盖了</div>
    <div v-html="html"></div>
    <div v-bind:title="title">哈哈哈！</div>
    <div v-on:click="shwo('我是谁')">点我有惊喜</div>
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "test",
            html: "<label>hello world</label>",
            title: "v-bind绑定属性"
        },
        methods: {
            shwo(tip) {
                alert(tip);
            }
        }
    })
</script>
```

## v-text 指令

v-text的作用与{{}}插值表单式是一样的同样是渲染内容，差别是v-text是覆盖标签内所有内容，而{{}}插值表达式可以在标签内实现内容拼接—-{{msg}}—-

## v-html 指令

v-html同样是渲染内容的指令，与v-text的区别是它可以渲染带html标签的内容，v-text是会将html内容当字符串渲染

## v-bind 指令

v-bind作用是绑定属性，将变量渲染给绑定的属性，v-bind可以简写为英文的 :，v-bind:title="title" 等效于:title="title" ，title是一个变量，可以被渲染到【哈哈哈！】的title提示中，v-bind既然渲染的是变量，那就可以在属性中去拼接字符串:title="title+'加上我！'"也是可以被渲染的。

## v-on 指令

v-on作用是绑定事件，同样也有简写，使用@符号简写绑定事件，@click

下面是一个简单走马灯案例复习下学习内容，使用vue渲染的内容，当变量发生变化时，页面都会重新渲染，基于这个实现一个文字走马灯功能

```HTML
<html>
<hred>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0, maximun-scale=1.0, minimun-scale=1.0">
    <script src="https://cdn.bootcss.com/vue/2.5.2/vue.min.js"></script>;
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</hred>
<div id="app">
    <div v-cloak>{{msg}}</div>
    <input type="button" value="开始" v-on:click="star()" />
    <input type="button" value="停止" @click="end()" />
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "云想衣裳花想容，春风拂槛露华浓",
            interval: null
        },
        methods: {
            star() {
                if (this.interval != null) { return }
                this.interval = setInterval(() => {
                    var star = this.msg.substring(0, 1)
                    this.msg = this.msg.substring(1) + star
                }, 500)

},
            end() {
                clearInterval(this.interval)
                this.interval = null
            }
        }
    })
</script>

</html>
```