Vue学习第一天

最新推荐文章于 2024-08-07 20:34:45 发布
原创 最新推荐文章于 2024-08-07 20:34:45 发布 · 206 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #Vue 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lib</title>
    <link rel="stylesheet" href="./bootstrap/css/bootstrap.css">
    <script src="./bootstrap/js/jquery-3.2.1.js"></script>
    <script src="./bootstrap/js/bootstrap.min.js"></script>
    <script src="./bootstrap/js/vue.min.js"></script>
</head>
<body>
<div id="box" class="container">
    <form role="form">
        <div class="form-group">
            <label for="username">用户名：</label>
            <input v-model="name" type="text" id="username" class="form-control form-group-sm">
        </div>
        <div class="form-group">
            <label for="age">年 龄：</label>
            <input v-model="age" type="number" id="age" class="form-control form-group-sm">
        </div>
        <input type="button" class="btn btn-info btn-group-lg" value="添加" v-on:click="add()">
        <input type="reset" class="btn btn-danger btn-group-lg" value="重置">
    </form>
    <div class="modal fade " id="modal">
        <div class="modal-dialog" role="dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <a class="close" data-dismiss="modal">&times;</a>
                    <h3>确认删除吗？</h3>
                    <div class="text-right">
                        <input type="text" class="btn btn-primary text-right btn-sm" value="取消" data-dismiss="modal">
                        <input type="text" class="btn btn-danger text-right btn-sm" value="删除"
                               v-on:click="deleteMsg()" data-dismiss="modal">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <table role="table" class="table table-bordered table-hover">
        <caption class="text-center h2 text-success">用户信息表</caption>
        <tr>
            <th class="text-center">序号</th>
            <th class="text-center">用户名</th>
            <th class="text-center">年龄</th>
            <th class="text-center">操作</th>
        </tr>
        <tr v-for="(item,index) in myData">
            <td class="text-center">{{index+1}}</td>
            <td class="text-center">{{item.name}}</td>
            <td class="text-center">{{item.age}}</td>
            <td class="text-center">
                <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#modal"
                        v-on:click="currentIndex(index)">删除
                </button>
            </td>
        </tr>
        <tr v-show="myData.length != 0">
            <td colspan="4" class="text-right">
                <button class="btn btn-danger btn-sm">删除全部</button>
            </td>
        </tr>
        <tr v-show="myData.length == 0">
            <td colspan="4" class="text-primary text-center">暂无数据……</td>
        </tr>
    </table>
</div>
<script>
    window.onload = function () {
        new Vue({
            el: "#box",
            data: {
                myData: [],
                name: "",
                age: "",
                nowIndex: -100
            },
            methods: {
                add: function () {
                    if (this.name.trim()=="" || this.age == "") {
                        return false;
                    } else {
                        this.myData.push({name: this.name, age: this.age});
                        this.name = "";
                        this.age = "";
                    }
                },
                deleteMsg: function () {
                    this.myData.splice(this.nowIndex, 1)
                },
                currentIndex: function (n) {
                    this.nowIndex = n;
                }
            }
        })
    }
</script>
</body>

</html>
Vue 学习第一天
四川兔兔的博客
01-01 963
毕业时，因为前端很丑折磨了好一段时间。现在有时间，学习一下前端的Vue组件开发。下面是我记录的知识，学习来源是哔站的黑马老师，大家不懂可以点对点去学习。
vue学习第一天
medusa222的博客
11-10 657
vue搭建一、搭建vue项目 一、搭建vue项目 假设Vscode、nodejs等已经安装好了。 全局安装vue-cli，vue-cli可以帮助我们快速构建Vue项目 npm install -g vue-cli 安装webpack，它是打包js的工具 npm install -g webpack 创建一个文件夹用来存放项目，用vscode打开对应的文件夹，并在终端cd到对应的文件夹。比如我的文件夹是myvue，创建项目vue init webpack myvue 运行项目。cd到项目文件夹，执行命令np
7.10 Vue学习第一天
2401_83591542的博客
07-10 731
本文记录了前端小白第一天学习Vue的笔记和感悟
Vue学习第一天（创建第一个Vue项目）
weixin_56998822的博客
01-14 436
安装Node.js 安装Vue脚手架 创建Vue项目
Vue3学习笔记第一天
Word_seeker的博客
08-07 2135
Vue是一种用于构建用户界面的JavaScript框架。MVVM 是Vue采用的一种软件架构模式，用于构建交互式的用户界面。）：模型代表应用程序的数据和业务逻辑。在MVVM模式中，模型通常不直接与视图交互，而是由ViewModel层进行中介。视图是用户直接与之交互的界面。它通常是用户界面的可视化部分，如网页中的HTML页面或移动应用中的屏幕。视图模型是视图的抽象层，它负责处理视图的展示逻辑和用户交互。视图模型通常包含了视图所需的数据和命令，并且负责向视图暴露方法和属性。
学习vue2第一天
weixin_63548440的博客
04-27 1222
vue是一个用于构建用户界面的渐进式框架。
学习Vue的第一天
xj1216wt的博客
03-10 895
学习Vue的第一天啦！
学习vue第一天
2303_82176667的博客
07-24 1101
data(){return{count:0
学习vue的第一天
分享博主日常学习和使用的一些技术
05-03 480
把你的疑惑写在前面： 组件本身是否能够有data()这样的函数？？？ 计算属性缓存 vs 方法？？ 众所周知，我曾经学习过一点vue，对vue也算是略懂。 可惜士别三日，必然忘记，现在的我根本记不得vue是什么了,今天就是我学习vue的第一天。愿山河无恙，岁月静好，吾vue技术必有所成。 魏晋时期的杜预曾经有一篇文章，我的特别喜欢。 vue的安装方式，我最喜欢cdn，因为我不是在生产环境使用，使用cdn方便快捷。 然后粗略的过一下vue的教程目录。基本上比较简单，只有组件化这块我不太理解。所以重点就放在
Vue的第一天学习
qq_44383759的博客
05-18 518
1.什么是Vue？ Vue是构建用户界面的渐进式框架，与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用，由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。 Vue与传统的渲染方式不一样，Vue是声明式渲染，组建系统是Vue的核心库所包含内容，而客户端路由、状态管理、构建工具都有专门解决方案，Vue做了大量的工作，数据与DOM建立了联系，因此Vue上的所有东西是响应式的！有了Vue我们可以不用再直接与HTML交互了，一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这
vue学习第一天——简单vue实例
地铁和人海
08-12 2439
实现简单的vue例子 很简单，不多说了。但在其中： 我们可以定义一个变量来new一个vue实例，也可以直接vue一个实例。 对于data数据，我们可以在data里面直接定义，也可以再vue外面var一个变量然后传进去如： 对于这种定义的变量（在vue外面定义），我们可以设置它不会被改变，就用Object.freeze(data)这个方法。如果你在vue的data里面定义变量还用这个方法，这个方法...
Vue第一天学习笔记.txt
09-07
click函数定义在Vue实例 methods里面 调用函数方法形式:函数名:function(参数){内容} 属性绑定和数据双向绑定： v-bind:title v-bind:title缩写法 :title v-model 模板指令，数据双向绑定 计算属性和侦听器 计算...
Vue第一天.xmind
最新发布
08-26
6.v-once:只渲染元素和组件一次 v-model基本使用： 1.v-model的数据双向绑定 2.视图发生变化，数据也跟着变化 事件的基本使用： 1.简写形式 v-on可以简写为@ 2.当不传递参数的时候加不加括号都一样 3.传递...
学习vue简单项目第一天出现的问题和解决方法
01-07
p1:自己的vue没有高亮显示而且没有代码提示 1、下载vetur插件解决高亮显示 2、代码提示通过设置中的setting.json—–下图 p2：vue里的eslint 代码规则比较反人类 怎么解决 1、下载eslint插件 2、高版本用代码段复制...
27课 Vue项目第一天.rar
09-13
在"27课 Vue项目第一天"的学习中，我们将逐步了解并掌握Vue的基础知识和实践技巧，开启Vue项目开发之旅。 首先，Vue的核心概念是虚拟DOM（Virtual DOM），它允许我们高效地更新UI而无需频繁操作真实的DOM，提高了...
javaScript求0-100之间的偶数和与奇数和
SFwords的博客
05-18 8594
var evenSum = 0; //偶数和 var oddSum = 0; //奇数和 for (var i = 0; i &lt;= 100; i++) { if (i % 2 == 0) { evenSum += i; continue; } else { ...
vue简单class切换
SFwords的博客
02-01 1134
html> lang="en"> charset="UTF-8"> Title src="https://cdn.jsdelivr.net/npm/vue"> .text-success { color: red; } id="app"> v-for
最简单的css3按钮动画
SFwords的博客
02-06 770
lang="en"> charset="UTF-8"> name="viewport" content="width=device-width, initial-scale=1.0"> http-equiv="X-UA-Compatible" content="ie=edge"> Document #box input { display: block; mar
vue-router的基本使用
SFwords的博客
04-20 351
&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &
Vue框架入门：第一天学习总结
"这是关于Vue.js框架的学习笔记，涵盖了对Vue的基本认识、安装方式、初步使用体验，以及列表渲染和计数器的示例。" 在前端开发领域，Vue.js是一个非常流行的渐进式JavaScript框架，它允许开发者构建用户界面并处理...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值