AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

vue脚手架基础demo1

2022-11-15 100
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： vue脚手架基础demo1

bootstrap CSS样式引入

image.png


在main.js中引入


import 'bootstrap/dist/js/bootstrap.js'
import 'bootstrap/dist/css/bootstrap.css'

image.png


在根目录创建【vue.config.js】文件

image.png


const webpack = require("webpack")
module.exports = {
    // 配置插件参数
    configureWebpack: {
        plugins: [
            // 配置 jQuery 插件的参数
            new webpack.ProvidePlugin({
                // 引入jquery
                $: 'jquery',
                jQuery: 'jquery',
                'window.jQuery': 'jquery',
                // 引入popper.js
                Popper: ['popper.js', 'default']
            })
        ]
    }
}

增删查demo

包含技术点：

image.png



源码


<template>
       <div id="show">
       <p>
            编号:<input type="text" v-model="id" class="form-control" placeholder="请输入id" /> 诗名:
            <input type="text" v-model="name" class="form-control" placeholder="请输入诗名" /> 作者:
            <input type="text" v-model="worker" class="form-control" placeholder="请输入作者" /><br/> 经典词:
            <input type="text" v-model="famous" class="form-control" placeholder="请输入经典词" />
            <button v-on:click="addInfo" class="btn btn-primary">提交</button>
        </p>
        <hr/>
        <p><input type="text" v-model="SelectKey" placeholder="请输入搜索内容" /></p>
        <hr/>
        <table class="table table-hover table-bordered" style="text-align: center">
            <tr class="info">
                <td>编号</td>
                <td>诗名</td>
                <td>作者</td>
                <td>名句</td>
                <td>操作</td>
            </tr>
            <tr v-for="(item,index) in newlist" :key="item">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.worker}}</td>
                <td><pre>{{item.famous}}</pre></td>
                <td><button v-on:click="del(index)" class="btn btn-primary">删除</button></td>
            </tr>
        </table>
        </div>
</template>
<script>
export default {
    name:"demo1",
    data:function(){
        return {
                list: [{
                    id: 1,
                    name: "将进酒",
                    worker: "李白",
                    famous: "烹羊宰牛且为乐，会须一饮三百杯！"
                }, {
                    id: 2,
                    name: "长恨歌",
                    worker: "白居易",
                    famous: "回眸一笑百媚生，六宫粉黛无颜色。"
                }, {
                    id: 3,
                    name: "永遇乐",
                    worker: "辛弃疾",
                    famous: "想当年，金戈铁马，气吞万里如虎。"
                }, ],
                SelectKey: "",
                id: 0,
                name: "",
                worker: "",
                famous: ""
            }
    },
            computed: {
                newlist: function() {
                    //复制一个this的分身
                    var _this = this;
                    return _this.list.filter(function(item) {
                        console.log(item);
                        return item.famous.indexOf(_this.SelectKey) != -1;
                    });
                }
            },
            methods: {
                addInfo: function() {
                    this.list.push({
                        id: this.id,
                        name: this.name,
                        worker: this.worker,
                        famous: this.famous
                    });
                },
                del: function(index) {
                    if (confirm("是否删除此条信息?")) {
                        this.list.splice(index, 1);
                    }
                }
            }
}
</script>


bootstrap常用样式

常用样式：


table


【table-striped】【table-bordered】【table-hover】【table-condensed】


form


【form-control】【btn-primary】【btn-warning】【btn-danger】【disabled】【btn-block】


ul


【nav nav-pills水平ul】【nav-stacked垂直ul】【active选中】【badge徽章】


pre


【pre-scrollable滚动条】


template原型

demo1【template的声明以及使用】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        body {
            overflow: hidden;
        }
        .myh {
            background-color: #2E6EC2;
            color: white;
            font-size: 3rem;
            height: 10vh;
        }
        .myc {
            background-color: #F8F1DC;
            font-size: 5rem;
            height: 85vh;
            text-align: center;
            line-height: 85vh;
        }
        .myf {
            background-color: #2E6EC2;
            font-size: 2rem;
            height: 5vh;
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 自定义组件名称·一定要是小写字母 -->
        <myheader></myheader>
        <mycontent></mycontent>
        <myfooter></myfooter>
    </div>
    <script src="js/vue.js"></script>
    <script>
        //创建模板
        var myh = Vue.extend({
            template: "<div class='myh'>后台管理系统</div>"
        });
        var myc = Vue.extend({
            template: "<div class='myc'>后台管理中心内容</div>"
        });
        var myf = Vue.extend({
            template: "<div class='myf'>版权所有：项目开发组</div>"
        });
        //绑定组件
        Vue.component("myheader", myh);
        Vue.component("mycontent", myc);
        Vue.component("myfooter", myf);
        //加载vue
        new Vue({
            el: "#app"
        })
    </script>
</body>
</html>


demo2(自定义组件名称)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <!-- 视图 -->
    <div id="app">
        <h1>软件1804班三好学生表</h1>
        <!-- 自定义组件 -->
        <threegoodstudent :newlist="list"></threegoodstudent>
    </div>
    <template id="good3">
        <ul>
            <li v-for="item in newlist">{{item}}</li>
        </ul>
    </template>
    <!-- 环境 -->
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                list: ["闫春娜", "牛龙珠", "王笑涵", "刘梓佳", "董新颖", "魏慧娟", "李鑫焱", "王航", "柴尚涛", "刘世龙"]
            },
            components: {
                "threegoodstudent": {
                    props: ["newlist"],
                    template: "#good3"
                }
            }
        })
    </script>
</body>
</html>


demo3(自定义组件传参)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jQuery.min.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
    <div id="app">
        <h1>脑筋急转弯！</h1>
        <!-- 自定义组件 -->
        <menus :newlist="list"></menus>
    </div>
    <template id="showlist">
        <table class="table table-hover table-border">
            <tr class="info">
                <td>编号</td>
                <td>问题</td>
                <td>提示</td>
                <td>答案</td>
            </tr>
            <tr v-for="item in newlist">
                <td>{{item.id}}</td>
                <td>{{item.question}}</td>
                <td>{{item.title}}</td>
                <td>{{item.answer}}</td>
            </tr>
        </table>
    </template>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                list: [{
                    id: 1,
                    question: "蚂蚁牙齿的颜色",
                    title: "与歌曲有关",
                    answer: "o-zone中唱的，蚂蚁牙黑，蚂蚁牙红"
                }, {
                    id: 2,
                    question: "为什么寒假比暑假短",
                    title: "物理因素",
                    answer: "热胀冷缩"
                }, {
                    id: 3,
                    question: "最残忍的歌词",
                    title: "爱",
                    answer: "把你的心我的心串一串"
                }]
            },
            components: {
                "menus": {
                    props: ["newlist"],
                    template: "#showlist"
                }
            }
        })
    </script>
</body>
</html>

demo4(子父组件传参) 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jQuery.min.js"></script>
    <script src="js/bootstrap.js"></script>
</head>
<body>
    <div id="app">
        <!-- 外层 -->
        <h1>好孩子亲子系统</h1>
        <!-- 父层 -->
        <fu-temp :showlist="list"></fu-temp>
    </div>
    <!-- 父类的模板 -->
    <template id="fu">
        <div>
            简介：<input type="text" v-model="SelectKey" placeholder="请输入搜索关键字"/>
            <hr/>
            <zi-temp :newlist="filterlist"></zi-temp>
        </div>
    </template>
    <!-- 子类的模板 -->
    <template id="zi">
        <div>
            <table class="table table-border table-hover" style="text-align: center">
                <tr>
                    <td>编号</td>
                    <td>姓名</td>
                    <td>家长</td>
                    <td>简介</td>
                </tr>
                <tr v-for="item in newlist">
                    <td>{{item.id}}</td>
                    <td>{{item.name}}</td>
                    <td>{{item.fama}}</td>
                    <td><pre>{{item.introduct}}</pre></td>
                </tr>
            </table>
        </div>
    </template>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                list: [{
                    id: 1,
                    name: "李昊天",
                    fama: "李鑫焱·闫紫瑞",
                    introduct: "上天下地，如入无人之境，盖一世英雄俾睨天下，无敢不从者。"
                }, {
                    id: 2,
                    name: "李暖暖",
                    fama: "李宁·贺子怡",
                    introduct: "花比你，不温柔。玉比你，也含羞，风雨蝶花间四友，呆打的珂儿都歇在豆蔻梢头！"
                }, {
                    id: 3,
                    name: "闫崇义",
                    fama: "闫岩·未知",
                    introduct: "为把我国建设成富强民主文明的社会主义现代化国家而奋斗终生。"
                }, {
                    id: 4,
                    name: "徐雅楠",
                    fama: "徐荣杨·某某某",
                    introduct: "风雅卓资，形如春风，笑如桃花。眉宇间凝愁，朱唇里吟秋。"
                }, {
                    id: 5,
                    name: "王雨晴",
                    fama: "王笑涵·暂无",
                    introduct: ""
                }]
            },
            //组件
            components: {
                "fu-temp": {
                    props: ["showlist"],
                    data: function() {
                        return {
                            SelectKey: "" //用作搜索的参数
                        }
                    },
                    template: "#fu",
                    components: { //组件
                        "zi-temp": {
                            props: ["newlist"],
                            template: "#zi"
                        }
                    },
                    computed: {
                        filterlist: function() {
                            var _this = this;
                            return _this.showlist.filter(function(o) {
                                return o.introduct.indexOf(_this.SelectKey) != -1;
                            });
                        }
                    }
                }
            }
        })
    </script>
</body>
</html>

demo4(slot插槽使用)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h1>三好学生</h1>
        <!-- 外层 -->
        <good3 :newlist="list">
            <template slot="cache" slot-scope="props">
                <li>{{props.item}}</li>
            </template>
        </good3>
    </div>
    <template id="show">
        <div>
            <slot name="cache" v-for="item in newlist" :item="item"></slot>
        </div>
    </template>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: "#app",
            data: {
                list: ["李鑫焱", "董新颖", "刘梓佳", "王笑涵"]
            },
            components: {
                "good3": {
                    props: ["newlist"],
                    template: "#show"
                }
            }
        })
    </script>
</body>
</html>
文章标签：
JavaScript
前端开发
关键词：
脚手架VUE.js
vue脚手架VUE.js
VUE.js脚手架
红目香薰
目录
相关文章
程序员彭于晏
|
21天前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
23 1
大树营养快线
|
23天前
|
JavaScript 前端开发 开发者
vue 数据驱动视图
总之，Vue 数据驱动视图是一种先进的理念和技术，它为前端开发带来了巨大的便利和优势。通过理解和应用这一特性，开发者能够构建出更加动态、高效、用户体验良好的前端应用。在不断发展的前端领域中，数据驱动视图将继续发挥重要作用，推动着应用界面的不断创新和进化。
大树营养快线
25 2
雨溪-yuxi
|
24天前
|
JavaScript 前端开发 开发者
vue学习第一章
欢迎来到我的博客！我是瑞雨溪，一名热爱前端的大一学生，专注于JavaScript与Vue，正向全栈进发。博客分享Vue学习心得、命令式与声明式编程对比、列表展示及计数器案例等。关注我，持续更新中！🎉🎉🎉
雨溪-yuxi
27 1
vue学习第一章
雨溪-yuxi
|
24天前
|
JavaScript 前端开发 索引
vue学习第三章
欢迎来到瑞雨溪的博客，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中的v-bind指令，包括基本使用、动态绑定class及style等，希望能为你的前端学习之路提供帮助。持续关注，更多精彩内容即将呈现！🎉🎉🎉
雨溪-yuxi
24 1
vue学习第三章
雨溪-yuxi
|
24天前
|
缓存 JavaScript 前端开发
vue学习第四章
欢迎来到我的博客！我是瑞雨溪，一名热爱JavaScript与Vue的大一学生。本文介绍了Vue中计算属性的基本与复杂使用、setter/getter、与methods的对比及与侦听器的总结。如果你觉得有用，请关注我，将持续更新更多优质内容！🎉🎉🎉
雨溪-yuxi
35 1
vue学习第四章
九月天空
|
21天前
|
JavaScript 前端开发 开发者
Vue是如何劫持响应式对象的
Vue是如何劫持响应式对象的
九月天空
20 1
G0518
|
21天前
|
JavaScript 前端开发 API
介绍一下Vue中的响应式原理
介绍一下Vue中的响应式原理
G0518
27 1
雨溪-yuxi
|
24天前
|
JavaScript 前端开发
vue学习第五章
欢迎来到我的博客，我是瑞雨溪，一名热爱JavaScript和Vue的大一学生。自学前端2年半，正向全栈进发。如果你从我的文章中受益，欢迎关注，我将持续分享更多优质内容。你的支持是我最大的动力！🎉🎉🎉
雨溪-yuxi
25 1
程序员彭于晏
|
21天前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
程序员彭于晏
33 0
程序员彭于晏
|
21天前
|
存储 JavaScript 前端开发
介绍一下Vue的核心功能
介绍一下Vue的核心功能
程序员彭于晏
33 0

热门文章

最新文章

  • 1
    Hadoop迁移MaxCompute神器之DataX-On-Hadoop使用指南
  • 2
    VS Code书写vue项目配置 eslint+prettier 统一代码风格
  • 3
    VueJS && ReactJS 如何？听听别人怎么说。
  • 4
    Vue3+Vite4+Naive-UI 项目自动导入API和组件
  • 5
    前端程序员入门：先学Vue3还是Vue2？
  • 6
    基于element-plus实现vue3+ts后台管理系统的组件封装(只需传入配置对象，就可以渲染出一个页面(表单+表格))
  • 7
    Nestjs+Vue实现阿里云OSS服务端签名直传
  • 8
    vue之webpack打包原理和用法详解
  • 9
    中文代码示例之Vuejs入门教程(一)
  • 10
    将vue项目打包成电脑端应用.exe
  • 1
    Vue.js组件通信策略详解
    59
  • 2
    在 JeecgBoot 项目中基于 Vue 3 配置多页面入口
    125
  • 3
    前端框架与库 - Vue.js 组件与路由
    54
  • 4
    vue代码优化方案
    61
  • 5
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    165
  • 6
    在Vue中，子组件向父组件传递数据
    83
  • 7
    【vue3】Argumnt of type ‘history:RouterHistory；}is not assignable to paraeter of type ‘RouterOptions‘.
    102
  • 8
    【vue3】vue3中路由hash与History的设置
    257
  • 9
    【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
    1261
  • 10
    【vue】 el-table解决分页不能筛选全部数据的问题
    540

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档
  • Node.js 入门教程文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索

    • 相关实验场景

    更多
  • 前端开发基础6：Node.js和LESS预编译工具
  • 搭建Node.js编程环境
    • 下一篇
    阿里云对象存储OSS收费标准：存储、流量和请求等多个计费项详解