day-02.Vue基本指令和v-bind动态绑定属性

  1. v-once指令表示元素和组件只会渲染一次,不会随着数据的改变而改变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2 v-once>{{message}}</h2>
    </div>

    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: "阳光灿烂的日子"
            }
        })
    </script>
</body>
</html>
  1. v-html指令把得到的数据按照html格式进行解析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-html="link"></h2>
    </div>

    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: '<a href="www.baidu.com"></a>',
                link: '<a href="www.baidu.com">百度一下</a>'
            }
        })
    </script>
</body>
</html>
  1. v-text指令和Mustache比较类似,都是将数据显示在界面中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-text="message"></h2>
    </div>

    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: '阳光灿烂的日子'
            }
        })
    </script>
</body>
</html>
  1. v-pre的作用是跳过这个元素及其子元素的编译,用于显示原本的Mustache的语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2>{{message}}</h2>
        <h2 v-pre>{{message}}</h2>
    </div>

    <script>
        let app = new Vue({
            el: '#app',
            data: {
                message: '阳光灿烂的日子',
            }
        })
    </script>
</body>
</html>
  1. 在某些情况下,浏览器可能直接显示出为编译的Mustache标签,我们如果不想让它进行显示我们可以添加v-cloak指令,然后在css中用属性选择器,将此标签先屏蔽掉,等它编译结束再显现出来。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body>
    <div id="app">
        <h2 v-cloak>{{message}}</h2v>
    </div>

    <script>
        setTimeout(function() {
            let app = new Vue({
            el: '#app',
            data: {
                message: '阳光灿烂的日子',
            }
        })
        }, 1000)
        
    </script>
</body>
</html>
  1. v-bind基础,可以用来动态绑定标签的属性,v-bind:src="url"或者语法糖格式:src=“url”

<!---->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <a v-bind:href="url">百度一下</a>
        <img v-bind:src="location" alt="">
        <a :href="url">百度一下</a>
        <img :src="location" alt="">
    </div>

    <script>
        let app = new Vue({
            el: '#app',
            data: {
                location: 'https://img.alicdn.com/bao/uploaded/i2/T16hPmXaRsXXbzbPo9_103822.jpg_200x200q90.jpg_.webp',
                url: 'http://www.baidu.com'
            }
        })
    </script>
</body>
</html>
  1. v-bind动态绑定class, :class="{‘类名’: boolean, ‘类名’: boolean}" 或者使用函数:class=“getClasses()”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2 :class="{'active': isActive, 'line': isLine}">.........</h2>
        <h3 :class="getClasses()">!!!!!!!</h3>
    </div>

    <script>
        let app = new Vue({
            el: '#app',
            data: {
                isActive: true,
                isLine: true
            },
            methods: {
                getClasses: function() {
                    return {'active': this.isActive, 'line': this.isLine};
                }
            }
        })
    </script>
</body>
</html>
  1. v-bind动态绑定style注意在写css名称的时候,可以使用驼峰式fontSize或者用引号引起来的原名’font-size’最后注意,值都是用引号引起来的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h2 :style="{fontSize: '20px', color: 'pink'}">阳光灿烂的日子</h2>
        <h2 :style="{'font-size': '20px', color: 'pink'}">阳光灿烂的日子</h2>
        <h3 :style="getStyle()">阳光灿烂的日子</h3>
    </div>

    <script>
        let app = new Vue({
            el: '#app',
            data: {
                isActive: true,
                isLine: true
            },
            methods: {
                getStyle: function() {
                    return {fontSize: '40px', color: 'pink'};
                }
            }
        })
    </script>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
毕业设计,基于SpringBoot+Vue+MySQL开发的兼职网,源码+论文答辩+毕业论文+视频演示 随着科学技术的飞速发展,社会的方方面面、各行各业都在努力与现代的先进技术接轨,通过科技手段来提高自身的优势,蜗牛兼职网当然也不能排除在外。蜗牛兼职网是以实际运用为开发背景,运用软件工程原理和开发方法,采用springboot框架构建的一个管理系统。整个开发过程首先对软件系统进行需求分析,得出系统的主要功能。接着对系统进行总体设计和详细设计。总体设计主要包括系统功能设计、系统总体结构设计、系统数据结构设计和系统安全设计等;详细设计主要包括系统数据库访问的实现,主要功能模块的具体实现,模块实现关键代码等。最后对系统进行功能测试,并对测试结果进行分析总结,得出系统中存在的不足及需要改进的地方,为以后的系统维护提供了方便,同时也为今后开发类似系统提供了借鉴和帮助。这种个性化的网上蜗牛兼职网特别注重交互协调与管理的相互配合,激发了管理人员的创造性与主动性,对蜗牛兼职网而言非常有利。 本蜗牛兼职网采用的数据库是MySQL,使用springboot框架开发。在设计过程中,充分保证了系统代码的良好可读性、实用性、易扩展性、通用性、便于后期维护、操作方便以及页面简洁等特点。 功能要求:可以管理首页、个人中心、用户管理、企业管理、兼职信息管理、职位申请管理、留言板管理、系统管理等功能模块。 关键词:蜗牛兼职网,springboot框架 MySQL数据库 Java技术
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值