信息管理实践第十二周周记

最新推荐文章于 2024-07-05 02:51:26 发布

梦瑾い

最新推荐文章于 2024-07-05 02:51:26 发布

阅读量259

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Bili_Meng_Jin/article/details/118225391

版权

第十二周周记

知识点
- Vue中基础知识
网页展示
代码

知识点

Vue中基础知识

Vue是一个渐进式的构建用户界面的js框架，能做到小到的简单的表单处理，大到复杂的数据操作比较频繁的单页面应用程序。优点有方便阅读的中文文档、容易上手（学习曲线比较缓和）、体积小、基于组件化的开发方式、代码的可读性、可维护性得到了提高。工作方式：可以通过丰富的指令扩展模板，可以通过各种各样的插件来增强功能。

网页展示

本次学习是根据菜鸟教程进行的，代码中部分源于菜鸟教程。
运行后的界面：
在这里插入图片描述
点击文字后在文字上方出现输入框：

在输入框中输入文字则下面文字跟着改变：

点击输入框其他的地方则隐藏输入框：

代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LSQ的Vue修改文本尝试</title>
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <style>
		body {background-color:lightblue;}
        [v-cloak] {
          display: none;
        }
    
	    *{
            margin:0;
        }

        body{
            font:15px/1.3 'Open Sans', sans-serif;
           color: #00ffff;
            text-align:center;
        }

        .tooltip{
            background-color:#5c9bb7;
            background-image:-webkit-linear-gradient(top, #5c9bb7, #5392ad);
            background-image:-moz-linear-gradient(top, #5c9bb7, #5392ad);
            background-image:linear-gradient(top, #5c9bb7, #5392ad);
            box-shadow: 0 1px 1px #ccc;
            border-radius:3px;
            width: 290px;
            padding: 10px;
            position: absolute;
            left:50%;
            margin-left:-150px;
            top: 80px;
        }

        .tooltip input{
            border: none;
            width: 100%;
            line-height: 34px;
            border-radius: 3px;
            box-shadow: 0 2px 6px #bbb inset;
           text-align: center;
            font-size: 16px;
            font-family: inherit;
            color: #8d9395;
            font-weight: bold;
            outline: none;
        }

        p{
            font-size:22px;
            font-weight:bold;
            color:#6d8088;
            height: 30px;
            cursor:default;
        }

        #main{
            height:300px;
            position:relative;
            padding-top: 150px;
        }
    </style>
</head>
<body>
    <div id="main" v-cloak v-on:click="hideTooltip">
        <div class="tooltip" v-on:click.stop v-if="show_tooltip">
            <input type="text" v-model="text_content" />
        </div>
    <p v-on:click.stop="toggleTooltip">{{text_content}}</p>
    </div>
	<script>
        var demo = new Vue({
            el: '#main',
            data: {
                show_tooltip: false,
                text_content: '点击出现输入框，在框中编辑内容'
            },
            methods: {
                hideTooltip: function(){
                    this.show_tooltip = false;
                },
                toggleTooltip: function(){
                    this.show_tooltip = !this.show_tooltip;
                }
            }
        })
    </script>
</body>
</html>

梦瑾い

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
信息管理实践第十二周周记

第十二周周记知识点Vue中基础知识网页展示代码知识点Vue中基础知识Vue是一个渐进式的构建用户界面的js框架，能做到小到的简单的表单处理，大到复杂的数据操作比较频繁的单页面应用程序。优点有方便阅读的中文文档、容易上手（学习曲线比较缓和）、体积小、基于组件化的开发方式、代码的可读性、可维护性得到了提高。工作方式：可以通过丰富的指令扩展模板，可以通过各种各样的插件来增强功能。网页展示本次学习是根据菜鸟教程进行的，代码中部分源于菜鸟教程。运行后的界面：点击文字后在文字上方出现输入框：在输入
复制链接

扫一扫