Vue一个简单dome

最新推荐文章于 2022-04-23 23:22:20 发布
转载 最新推荐文章于 2022-04-23 23:22:20 发布 · 1.1k 阅读 · 1 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>信息统计</title>
    <link rel="stylesheet" href="bootstrap.min.css"/>
    <script src="jquery-1.7.2.js"></script>
    <script src="bootstrap.js"></script>
    <script src="vue2018.js"></script>

    <script>
        window.onload = function () {
            new Vue({
                el: '#box',
                data: {
                    myData: [],
                    username: '',
                    age: '',
                    nowIndex:-100
                },
                methods: {
                    add: function () {
                        this.myData.push({
                            name: this.username,
                            age: this.age
                        });

                        this.username='';
                        this.age='';
                    },
                    deleteMag:function(n){
                        if(n==-2){
                            this.myData=[];
                        }else{
                            this.myData.splice(n,1);
                        }
                    }
                }
            });
        };
    </script>
</head>
<body>
<div class="container" id="box">
    <form role="form">
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" id="username" class="form-control" placeholder="输入用户名" v-model="username">
        </div>
        <div class="form-group">
            <label for="age">年 龄:</label>
            <input type="text" id="age" class="form-control" placeholder="输入年龄" v-model="age">
        </div>
        <div class="form-group">
            <input type="button" value="添加" class="btn btn-primary " @click="add()">
            <input type="reset" value="重置" class="btn btn-danger">
        </div>
    </form>
    <hr>
    <table class="table table-bordered table-hover">
        <caption class="h3 text-info">用户信息表</caption>
        <tr class="text-danger">
            <th class="text-center">序号</th>
            <th class="text-center">名字</th>
            <th class="text-center">年龄</th>
            <th class="text-center">操作</th>
        </tr>
        <tr class="text-center" v-for="(item,index) in myData">
            <td>{{index+1}}</td>
            <td>{{item.name}}</td>
            <td>{{item.age}}</td>
            <td>
                <button class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer" @click="nowIndex=index">删除</button>
            </td>
        </tr>
        <tr v-show="myData.length!=0">
            <td colspan="4" class="text-right">
                <button class="btn btn-danger btn-sm" @click="nowIndex=-2" data-toggle="modal" data-target="#layer">删除全部</button>
            </td>
        </tr>
        <tr v-show="myData.length==0">
            <td colspan="4" class="text-center text-muted">
                <p>暂无数据...</p>
            </td>
        </tr>
    </table>

    <!--模态框 动态弹出框-->
    <div role="dialog" class="modal fade bs-example-modal-sm" id="layer" >
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>×</span>
                    </button>
                    <h4 class="modal-title">确认删除吗?</h4>
                </div>
                <div class="modal-body text-right">
                    <button class="btn btn-primary btn-sm" data-dismiss="modal">取消</button>
                    <button class="btn btn-danger btn-sm" data-dismiss="modal" @click="deleteMag(nowIndex)">确认</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Sugar_wzy
关注
Vue实战：简易布局Dome
若水弹丸之地
02-16 1万+
一、show 1、介绍 组件：App、MyHeader、Mybody、MyNav、MyMain、MyFooter（App是所有的父组件，Mybody是 MyNav和MyMain 的父组件） 数据data：[{name: ‘bty’, age: 12}, {name: ‘张三’, age: 13}, {name: ‘oppen’, age: 14}] 传值：将全局数据data传给App...
用class实现一个简单Vue原理dome
yw_hard的博客
01-21 513
按照vue基本原理，分别给class Vue定义两个方法，observe和compile，再添加一个更新视图的watcher， observe()，用来实现数据变化的监听，使用object.defineProperty，当有数据更新时，触发watch和订阅器watcher。 compile()，用来解析DOM，获取每个节点及指令信息，初始化数据并创建watcher。 watcher()，订阅...
vue渲染dome案例
李特成的博客
07-17 843
&lt;!DOCTYPE html&gt; &lt;html lang="en" dir="ltr"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;渲染小案例&lt;/title&gt; &lt;/head&gt; &lt;body&gt;
vue2.0单页dome 3个页面简单易懂
10-13
vue2.0单页dome 3个页面简单易懂 结合了vue的双向绑定,渲染列表,数据绑定,组件,自定义指令,消息传递,条件渲染等,运行方法
vue项目demo
05-29
vue 代码demo学习 请勿在未经授权的情况下上传任何涉及著作权侵权的资源，除非该资源完全由您个人创作
Vue之完整Dome
qq_40286424的博客
04-08 1019
项目介绍： 一个前后端分离的管理系统。前端使用vue框架，后端使用Java的springboot框架。 项目框架：SpringBoot+SpringSecurity+jwt+mybatis-plus+swagger2 环境：JDK1.8 软件： idea 后端教程：Java后端管理系统 前端框架：vue ,vue_cli,element 软件： HBuilder x 前端教程：xx 1.创建项目vue-cli-3.0 cmd中输入命令： vue create 项目名 结构： 结构描述见：Vue之vue-
Vue系列(二)之简单demo
安妍妍的博客
12-30 553
简单demo 今天就写一个极简单的小案例，大家来感受一下Vue给开发带来的便捷。 先看效果图： 很简单，一个头像图片，一个姓名，一个年龄，这三个字段是模拟从网络请求得到的数据。 先看使用原生js怎么实现： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...
vue-ssr-dome:vue-ssr-dome
04-27
注意：实际上，没有必要对这种大小的应用程序进行代码拆分（每个异步块只有几千字节），也不是提取额外CSS文件（仅为1kb）的最佳选择-它们是之所以使用它，是因为这是一个演示应用程序，其中展示了所有受支持的功能...
在vue中使用天地图dome
05-31
在Vue.js项目中集成天地图（Tianditu）是一个常见的前端开发任务，特别是在构建地理信息系统（GIS）应用时。天地图是中国国家基础地理信息中心提供的免费地图服务，它提供了丰富的地图资源，包括矢量地图、影像地图...
Vue demo实例下载
05-10
vue demo vue.js-饿了吗全套
Vue 介绍以及如何使用，配有demo案例
02-25
Vue 介绍以及如何使用，配有demo案例，Vue 介绍以及如何使用，配有demo案例
vue2.0单页dome结构（目前csdn上的没有路由都是用v-if进行显示的）
10-16
vue2，简单搭建项目，路由，入门者的最好练习文件，包含，简单组件，和rout，因为只有结构，所以把css部分省略掉了简单易懂
vue demo实例
02-16
本项目是asp.net mvc5+vue2.5的项目。适合新手参考和学习，本项目实现的功能如下： 1.不仅有vue的基本功能，而且设计到vue的组件功能。 2.实现了增删改查的功能，而且是一对多的。 3.实现了分页的功能。 4.另外，本项目无论是前台还是后台都对代码进行了注释，使得项目非常容易理解，请给打5分，非常感谢。
vuejs学习系列-第一个小demo
弼码温
04-17 4289
现在上节中安装的项目的src目录中建立pages文件用来装demo源码 我们现在的目录结构是这样的 首先在pages里新建demo01文件夹，顺便在demo01下，建立index.vue文件，然后在router里添加{ path: '/demo01', name: 'DEMO01', component: demo01 }index.vue里将会放置我们所有的demo
Vue.js中的虚拟DOM
qq_59076775的博客
04-23 1244
出自深入浅出Vue.js 在Vue.js中,我们使用模板来描述状态与DOM之间的映射关系,Vue.js通过编译模板转换成渲染函数(render)，执行渲染函数就可以得到一个虚拟节点树，使用这个虚拟节点树就可以渲染页面。 模板---------------->渲染函数------------------>vnode-------------------->视图 虚拟DOM的最终目标是将虚拟节点(vnode)渲染到视图上。但是如果直接使用虚拟节点覆盖旧节点的话,会有很多不必要的DOM操作
简单的Vuex练习的dome
qq_40886900的博客
06-22 527
    先通过vue-cli快速搭建项目，再通过npm install 安装vue运行安装包的依赖。在通过npm install vuex -save安装vuex,安装成功后在src里面创建state文件夹在里面创建store.js文件。import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const store = new Vue...
Vue基础知识完成的小dome
李剑一
09-05 638
使用前面的Vue基础知识完成的小dome 非常基础，练手使用 Dome简述： 通过点击下面的“使劲敲”按钮，将下面的进度条减少，减少到最后，去掉该按钮，同时将上面的图片进行一个变化。 点击下面的“重来”按钮将下面的进度条返回原始状态。 <div id="main"> <!-- 图片 --> <div id="img_div" v-bind:class="{bur...
学习Vue的小dome总结方法，看看就知道对初学者有用
qq_43490372的博客
10-01 560
父组件向子组件传递值 在父组件找到需要值的子组件 :today="today" <template> <div class="home"> <Header :today="today"></Header> <List></List> <Footer></Footer> </div> </template> <script> // @ is
vue的dome
最新发布
04-03
### Vue 示例项目与官方文档 #### 初始化 Vue3 项目 通过 Vue 官方脚手架可以快速创建一个新的 Vue3 项目。具体操作可以通过命令行工具 `npm` 来完成安装和初始化工作[^1]。 ```bash npm install -g @vue/cli vue create my-vue3-project ``` 上述命令会引导用户选择 Vue 版本以及所需的特性插件，最终生成一个完整的项目结构。 --- #### 创建并配置 Vue 组件 在一个标准的 Vue 项目中，通常会在 `src/components/views` 路径下定义视图组件，并通过路由模块将其挂载到应用中[^2]。 以下是创建一个简单组件的具体实现： ##### 步骤说明 1. **新建组件文件** 在 `views` 文件夹下新增名为 `First.vue` 的文件。 2. **编写模板代码** 使用 `<template>` 标签来描述 HTML 结构；利用 `<script>` 部分处理逻辑交互功能；最后借助 `<style>` 块设置样式规则。 ```vue <!-- First.vue --> <template> <div class="first-component"> <h1>欢迎来到我的第一个 Vue 组件</h1> <button @click="handleClick">点击我</button> </div> </template> <script> export default { name: 'FirstComponent', methods: { handleClick() { alert('按钮被点击了！'); } } }; </script> <style scoped> .first-component { text-align: center; margin-top: 50px; } button { padding: 10px 20px; font-size: 16px; cursor: pointer; } </style> ``` 3. **配置路由映射** 打开位于 `src/router/index.js` 中的路由配置文件，在其中加入新页面对应的路径信息。 ```javascript import { createRouter, createWebHistory } from 'vue-router'; import First from '../components/views/First.vue'; const routes = [ { path: '/first', component: First }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 4. **启动本地服务** 运行以下指令开启开发服务器，默认地址为 `http://localhost:8010/#/first` 访问刚才编写的界面效果。 ```bash npm run serve ``` --- #### Ant Design UI 库集成案例 为了增强用户体验，许多开发者会选择第三方库如 antd (Ant Design of Vue)，它提供了丰富的预设组件供调用[^3]。 下面展示如何局部加载 Layout 模块作为布局框架的一部分： ```vue <template> <a-layout> <a-header style="background-color: white; padding-left: 20px;"> 头部区域 </a-header> <a-content style="padding: 24px; min-height: 280px;"> 主体内容部分 </a-content> <a-footer style="text-align: center;">底部版权信息 ©2023</a-footer> </a-layout> </template> <script> import { defineComponent } from 'vue'; import { Layout as ALayout, Header as AHeader, Content as AContent, Footer as AFoot } from 'ant-design-vue'; export default defineComponent({ components: { ALayout, AHeader, AContent, AFoot, }, }); </script> ``` 此片段展示了如何将 antd 的 layout 构建嵌入至单个 vue 页面之中。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值