使用Vue写记事本

最新推荐文章于 2023-05-29 21:12:11 发布

日落也会逃跑~

最新推荐文章于 2023-05-29 21:12:11 发布

阅读量180

点赞数 2

文章标签： vue.js

日落也会逃跑 ~~~

本文链接：https://blog.csdn.net/weixin_52555763/article/details/119711437

版权

本文展示了作者利用Vue.js和Bootstrap创建的一款记事本应用。文章中，作者将注释融入代码，便于读者理解和使用。同时提供了Vue和Bootstrap的下载链接，并分享了应用的运行效果。

摘要由CSDN通过智能技术生成

大家好鸭！又和大家见面了哦！

现在我给大家看的就是我今天早上写的一个记事本，现在有我来带大家看看吧！

我感觉把代码的注释或者不理解的地方写在外面的话，大家看的灰常迷，所以我把注释写在代码里面，大家用的时候会非常方便欧~~~

我里面运用到了Bootstrap的代码，所以要引用一下，Vue引用那是必须的！

    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/vue-2.4.0.js"></script>

这是Vue的下载的地址，打开就能用哦！

<a href="https://www.bootcdn.cn/vue/">Vue.js的下载地址</a>

这是Bootstrap的下载的地址，打开就能用哦！

<a href="https://www.bootcdn.cn/twitter-bootstrap/">Bootstrap.css的下载地址</a>

现在就看看代码吧~~~

<body>
    <!-- 将你的 app 为 Vue data中的挂载点 将里面的值及其属性都挂载在app上面,在app的外面没有任何影响！ -->
    <!-- container 的类 运用在 bootstrap 框架里面 是一个固定的宽度并居中状态！ -->
    <div id="app" class=" container">
        <!-- h1 标题 为 星河记事本 -->
        <h1 class=" text-center">星河记事本</h1>
        <div class="form-group">
            <!-- 输入框 v-model 实现数据的双向绑定 @keyup.enter 键盘按下并且为回车enter(键值为 13 做个了结)-( @ 为v-on的缩写)-->
            <!-- @keyup.enter = "add" add为一个键盘按下的一个方法 进行 数据添加 -->
            <input type="text" class=" form-control" v-model = "val" @keyup.enter = "add">
        </div>
        <ul class="list-group">
            <!-- v-for = "(item,index) in list" 为整体的样子 item 为循环里面值 index为索引  -->
            <li class="list-group-item" v-for = "(item,index) in list">
                <!-- 将你里面的值添加 索引显示 index 索引为 0 一般显示都为 1 卡开始 index+1 -->
                <span v-text = "index+1"></span>
                <!-- {{item}} 为 list 数组里面的 值  -->
                {{item}}
                <!-- text-danger pull-right 第一个类名 为文本颜色为红色 第二个为 右边显示 -->
                <!-- 这一块的 CSS 的代码 就不展示了大概为-
                    1、鼠标滑过你的父级 li 标签,去掉下划线显示&times;为警告的 X  
                    2、当你的鼠标滑过的 li 标签 会实现一个显示隐藏的效果
                    当点击 红色的 叉叉 的时候 会根据 list 里面数组的下标来删除 点击那个就会删除那一项！
                -->
                <a href="#" class=" text-danger pull-right" @click = "splice(index)">&times;</a>
            </li>
            <!--Total的中文意思 总计 {{list.length}} 这个是data数据里面的长度
                Empty的中文意思 清空 @click = "del" 单击事件为del 会将你整个数组的值清空！
            -->
            <p><span class=" text-info">Total : {{list.length}}</span><span class="text-info" @click = "del">Empty</span></p>
        </ul>
    </div>
    <script>
        var vm = new Vue({
            // app的挂载点 为本文中 id为app
            el:'#app',
            data:{
                // list 数组 
                list:['吃饭','睡觉','打豆豆'],
                // val 为 v-model 数据的绑定
                val:""
            },
            methods:{
                add(){
                    this.list.push(this.val);
                    this.val = ''
                },
                del(){
                    this.list = []
                },
                splice(e){
                    this.list.splice(e,1)
                }
            }
        })
    </script>
</body>

展示一下效果哦~~~