• vue脚手架基础demo1

    vue脚手架基础demo1

    目录

    vue脚手架基础demo1

    bootstrap CSS样式引入

    增删查demo

    bootstrap常用样式

    template原型

    demo1【template的声明以及使用】

    demo2(自定义组件名称)

    demo3(自定义组件传参)

    demo4(子父组件传参) 

    demo4(slot插槽使用)

    bootstrap CSS样式引入

    npm i jquery bootstrap@4.6 popper.js -S

    在main.js中引入

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

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

    1. const webpack = require("webpack")
    2. module.exports = {
    3.     // 配置插件参数
    4.     configureWebpack: {
    5.         plugins: [
    6.             // 配置 jQuery 插件的参数
    7.             new webpack.ProvidePlugin({
    8.                 // 引入jquery
    9.                 $: 'jquery',
    10.                 jQuery: 'jquery',
    11.                 'window.jQuery': 'jquery',
    12.                 // 引入popper.js
    13.                 Popper: ['popper.js', 'default']
    14.             })
    15.         ]
    16.     }
    17. }

    增删查demo

    包含技术点：

     源码

    1. <template>
    2.        <div id="show">
    3.        <p>
    4.             编号:<input type="text" v-model="id" class="form-control" placeholder="请输入id" /> 诗名:
    5.             <input type="text" v-model="name" class="form-control" placeholder="请输入诗名" /> 作者:
    6.             <input type="text" v-model="worker" class="form-control" placeholder="请输入作者" /><br/> 经典词:
    7.             <input type="text" v-model="famous" class="form-control" placeholder="请输入经典词" />
    8.             <button v-on:click="addInfo" class="btn btn-primary">提交button>
    9.         p>
    10.         <hr/>
    11.         <p><input type="text" v-model="SelectKey" placeholder="请输入搜索内容" />p>
    12.         <hr/>
    13.         <table class="table table-hover table-bordered" style="text-align: center">
    14.             <tr class="info">
    15.                 <td>编号td>
    16.                 <td>诗名td>
    17.                 <td>作者td>
    18.                 <td>名句td>
    19.                 <td>操作td>
    20.             tr>
    21.             <tr v-for="(item,index) in newlist" :key="item">
    22.                 <td>{{item.id}}td>
    23.                 <td>{{item.name}}td>
    24.                 <td>{{item.worker}}td>
    25.                 <td><pre>{{item.famous}}pre>td>
    26.                 <td><button v-on:click="del(index)" class="btn btn-primary">删除button>td>
    27.             tr>
    28.         table>
    29.         div>
    30. template>
    31.  
    32. <script>
    33. export default {
    34.     name:"demo1",
    35.     data:function(){
    36.         return {
    37.                 list: [{
    38.                     id: 1,
    39.                     name: "将进酒",
    40.                     worker: "李白",
    41.                     famous: "烹羊宰牛且为乐，会须一饮三百杯！"
    42.                 }, {
    43.                     id: 2,
    44.                     name: "长恨歌",
    45.                     worker: "白居易",
    46.                     famous: "回眸一笑百媚生，六宫粉黛无颜色。"
    47.                 }, {
    48.                     id: 3,
    49.                     name: "永遇乐",
    50.                     worker: "辛弃疾",
    51.                     famous: "想当年，金戈铁马，气吞万里如虎。"
    52.                 }, ],
    53.                 SelectKey: "",
    54.                 id: 0,
    55.                 name: "",
    56.                 worker: "",
    57.                 famous: ""
    58.             }
    59.     },
    60.             computed: {
    61.                 newlist: function() {
    62.                     //复制一个this的分身
    63.                     var _this = this;
    64.                     return _this.list.filter(function(item) {
    65.                         console.log(item);
    66.                         return item.famous.indexOf(_this.SelectKey) != -1;
    67.                     });
    68.                 }
    69.             },
    70.             methods: {
    71.                 addInfo: function() {
    72.                     this.list.push({
    73.                         id: this.id,
    74.                         name: this.name,
    75.                         worker: this.worker,
    76.                         famous: this.famous
    77.                     });
    78.                 },
    79.                 del: function(index) {
    80.                     if (confirm("是否删除此条信息?")) {
    81.                         this.list.splice(index, 1);
    82.                     }
    83.                 }
    84.             }
    85. }
    86. 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的声明以及使用】

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9.     <style>
    10.         * {
    11.             margin: 0px;
    12.             padding: 0px;
    13.         }
    14.         
    15.         body {
    16.             overflow: hidden;
    17.         }
    18.         
    19.         .myh {
    20.             background-color: #2E6EC2;
    21.             color: white;
    22.             font-size: 3rem;
    23.             height: 10vh;
    24.         }
    25.         
    26.         .myc {
    27.             background-color: #F8F1DC;
    28.             font-size: 5rem;
    29.             height: 85vh;
    30.             text-align: center;
    31.             line-height: 85vh;
    32.         }
    33.         
    34.         .myf {
    35.             background-color: #2E6EC2;
    36.             font-size: 2rem;
    37.             height: 5vh;
    38.         }
    39.     style>
    40. head>
    41.  
    42. <body>
    43.     <div id="app">
    44.         
    45.         <myheader>myheader>
    46.         <mycontent>mycontent>
    47.         <myfooter>myfooter>
    48.     div>
    49.     <script src="js/vue.js">script>
    50.     <script>
    51.         //创建模板
    52.         var myh = Vue.extend({
    53.             template: "
      后台管理系统
      "
    54.         });
    55.         var myc = Vue.extend({
    56.             template: "
      后台管理中心内容
      "
    57.         });
    58.         var myf = Vue.extend({
    59.             template: "
      版权所有：项目开发组
      "
    60.         });
    61.         //绑定组件
    62.         Vue.component("myheader", myh);
    63.         Vue.component("mycontent", myc);
    64.         Vue.component("myfooter", myf);
    65.         //加载vue
    66.         new Vue({
    67.             el: "#app"
    68.         })
    69.     script>
    70. body>
    71.  
    72. html>

    demo2(自定义组件名称)

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     
    13.     <div id="app">
    14.         <h1>软件1804班三好学生表h1>
    15.         
    16.         <threegoodstudent :newlist="list">threegoodstudent>
    17.     div>
    18.     <template id="good3">
    19.         <ul>
    20.             <li v-for="item in newlist">{{item}}li>
    21.         ul>
    22.     template>
    23.     
    24.     <script src="js/vue.js">script>
    25.     <script>
    26.         new Vue({
    27.             el: "#app",
    28.             data: {
    29.                 list: ["闫春娜", "牛龙珠", "王笑涵", "刘梓佳", "董新颖", "魏慧娟", "李鑫焱", "王航", "柴尚涛", "刘世龙"]
    30.             },
    31.             components: {
    32.                 "threegoodstudent": {
    33.                     props: ["newlist"],
    34.                     template: "#good3"
    35.                 }
    36.             }
    37.         })
    38.     script>
    39. body>
    40.  
    41. html>

    demo3(自定义组件传参)

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9.     <link rel="stylesheet" href="css/bootstrap.css">
    10.     <script src="js/jQuery.min.js">script>
    11.     <script src="js/bootstrap.js">script>
    12. head>
    13.  
    14. <body>
    15.     <div id="app">
    16.         <h1>脑筋急转弯！h1>
    17.         
    18.         <menus :newlist="list">menus>
    19.     div>
    20.     <template id="showlist">
    21.         <table class="table table-hover table-border">
    22.             <tr class="info">
    23.                 <td>编号td>
    24.                 <td>问题td>
    25.                 <td>提示td>
    26.                 <td>答案td>
    27.             tr>
    28.             <tr v-for="item in newlist">
    29.                 <td>{{item.id}}td>
    30.                 <td>{{item.question}}td>
    31.                 <td>{{item.title}}td>
    32.                 <td>{{item.answer}}td>
    33.             tr>
    34.         table>
    35.     template>
    36.     <script src="js/vue.js">script>
    37.     <script>
    38.         new Vue({
    39.             el: "#app",
    40.             data: {
    41.                 list: [{
    42.                     id: 1,
    43.                     question: "蚂蚁牙齿的颜色",
    44.                     title: "与歌曲有关",
    45.                     answer: "o-zone中唱的，蚂蚁牙黑，蚂蚁牙红"
    46.                 }, {
    47.                     id: 2,
    48.                     question: "为什么寒假比暑假短",
    49.                     title: "物理因素",
    50.                     answer: "热胀冷缩"
    51.                 }, {
    52.                     id: 3,
    53.                     question: "最残忍的歌词",
    54.                     title: "爱",
    55.                     answer: "把你的心我的心串一串"
    56.                 }]
    57.             },
    58.             components: {
    59.                 "menus": {
    60.                     props: ["newlist"],
    61.                     template: "#showlist"
    62.                 }
    63.             }
    64.         })
    65.     script>
    66. body>
    67.  
    68. html>

    demo4(子父组件传参) 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9.     <link rel="stylesheet" href="css/bootstrap.css">
    10.     <script src="js/jQuery.min.js">script>
    11.     <script src="js/bootstrap.js">script>
    12. head>
    13.  
    14. <body>
    15.     <div id="app">
    16.         
    17.         <h1>好孩子亲子系统h1>
    18.         
    19.         <fu-temp :showlist="list">fu-temp>
    20.     div>
    21.     
    22.     <template id="fu">
    23.         <div>
    24.             简介：<input type="text" v-model="SelectKey" placeholder="请输入搜索关键字"/>
    25.             <hr/>
    26.             <zi-temp :newlist="filterlist">zi-temp>
    27.         div>
    28.     template>
    29.     
    30.     <template id="zi">
    31.         <div>
    32.             <table class="table table-border table-hover" style="text-align: center">
    33.                 <tr>
    34.                     <td>编号td>
    35.                     <td>姓名td>
    36.                     <td>家长td>
    37.                     <td>简介td>
    38.                 tr>
    39.                 <tr v-for="item in newlist">
    40.                     <td>{{item.id}}td>
    41.                     <td>{{item.name}}td>
    42.                     <td>{{item.fama}}td>
    43.                     <td><pre>{{item.introduct}}pre>td>
    44.                 tr>
    45.             table>
    46.         div>
    47.     template>
    48.     <script src="js/vue.js">script>
    49.     <script>
    50.         new Vue({
    51.             el: "#app",
    52.             data: {
    53.                 list: [{
    54.                     id: 1,
    55.                     name: "李昊天",
    56.                     fama: "李鑫焱·闫紫瑞",
    57.                     introduct: "上天下地，如入无人之境，盖一世英雄俾睨天下，无敢不从者。"
    58.                 }, {
    59.                     id: 2,
    60.                     name: "李暖暖",
    61.                     fama: "李宁·贺子怡",
    62.                     introduct: "花比你，不温柔。玉比你，也含羞，风雨蝶花间四友，呆打的珂儿都歇在豆蔻梢头！"
    63.                 }, {
    64.                     id: 3,
    65.                     name: "闫崇义",
    66.                     fama: "闫岩·未知",
    67.                     introduct: "为把我国建设成富强民主文明的社会主义现代化国家而奋斗终生。"
    68.                 }, {
    69.                     id: 4,
    70.                     name: "徐雅楠",
    71.                     fama: "徐荣杨·某某某",
    72.                     introduct: "风雅卓资，形如春风，笑如桃花。眉宇间凝愁，朱唇里吟秋。"
    73.                 }, {
    74.                     id: 5,
    75.                     name: "王雨晴",
    76.                     fama: "王笑涵·暂无",
    77.                     introduct: ""
    78.                 }]
    79.             },
    80.             //组件
    81.             components: {
    82.                 "fu-temp": {
    83.                     props: ["showlist"],
    84.                     data: function() {
    85.                         return {
    86.                             SelectKey: "" //用作搜索的参数
    87.                         }
    88.                     },
    89.                     template: "#fu",
    90.                     components: { //组件
    91.                         "zi-temp": {
    92.                             props: ["newlist"],
    93.                             template: "#zi"
    94.                         }
    95.                     },
    96.                     computed: {
    97.                         filterlist: function() {
    98.                             var _this = this;
    99.                             return _this.showlist.filter(function(o) {
    100.                                 return o.introduct.indexOf(_this.SelectKey) != -1;
    101.                             });
    102.                         }
    103.                     }
    104.                 }
    105.             }
    106.         })
    107.     script>
    108. body>
    109.  
    110. html>

    demo4(slot插槽使用)

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>Documenttitle>
    9. head>
    10.  
    11. <body>
    12.     <div id="app">
    13.         <h1>三好学生h1>
    14.         
    15.         <good3 :newlist="list">
    16.             <template slot="cache" slot-scope="props">
    17.                 <li>{{props.item}}li>
    18.             template>
    19.         good3>
    20.     div>
    21.     <template id="show">
    22.         <div>
    23.             <slot name="cache" v-for="item in newlist" :item="item">slot>
    24.         div>
    25.     template>
    26.     <script src="js/vue.js">script>
    27.     <script>
    28.         new Vue({
    29.             el: "#app",
    30.             data: {
    31.                 list: ["李鑫焱", "董新颖", "刘梓佳", "王笑涵"]
    32.             },
    33.             components: {
    34.                 "good3": {
    35.                     props: ["newlist"],
    36.                     template: "#show"
    37.                 }
    38.             }
    39.         })
    40.     script>
    41. body>
    42.  
    43. html>

  • 相关阅读:
    计算机组成原理---第七章输入输出系统---I/O系统基本概念，外部系统---选择题
    口袋参谋：如何快速挑选宝贝核心关键词？三种方法，简单有效！
    计算机毕业设计（附源码）python音蕾心动
    纯CSS3流光边框特效
    基于柯西变异的蚁狮优化算法 - 附代码
    阿里云服务器经济型e实例租用价格和CPU性能测评
    服务器在被病毒入侵时快速排出的方法
    opencv c++ 边缘提取
    PACS外围硬件--九五小庞
    【洛谷】P1828 [USACO3.2] 香甜的黄油 Sweet Butter （最短路）
  • 原文地址：https://blog.csdn.net/feng8403000/article/details/126928151