有效沟通问答-【官方】百战程序员_IT在线教育培训机构

import Vue from 'vue'
import VueRouter from "vue-router"
import MSite from "../pages/MSite/MSite"
import Search from "../pages/Search/Search"
import Order from "../pages/Order/Order"
import Profile from "../pages/Profile/Profile"
// 声明使用插件
Vue.use(VueRouter)
export  default new VueRouter({
  //所有路由
  routes:[
    {
      path:'/msite',
      component:MSite,
    },
    {
      path:'/order',
      component:Order,
    },
    {
      path:'/profile',
      component:Profile,
    },
    {
      path:'/search',
      component:Search,
    },
    //默认应该是Msite
    {
      patch:'/',
      redirect:'/miste'
    }
  ]
})

这是我的index.js路由配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
  // render: h => h(App),
  router
})

这是我的main.js

<template>
  <div id="#app">
    <router-view></router-view>
    <FooterGuide/>
  </div>
</template>

<script>
import FooterGuide from './components/FooterGuide/FooterGuide.vue'

export default {
  components: {
    FooterGuide
  }
}
</script>

<style>

</style>

这是我的APP.vue

运行页面没有内容，但是

FooterGuide.vue

有内容。

报错如下：我的路由配置没有问题！

WEB前端全系列/第十九阶段：Vue2知识体系（旧）/Vue基础知识 78楼

老师这个报错咋搞我已经用管理者权限得了

WEB前端全系列/第十九阶段：Vue2知识体系（旧）/Vue基础知识 79楼

老师cli4打包出错npm run serve 的时候正常 npm run build后访问index看不到页面

demo.rar

WEB前端全系列/第十九阶段：Vue2知识体系（旧）/Vue基础知识 80楼

老师这个文件夹和这个文件里面的内容是怎么出来的啊

WEB前端全系列/第十九阶段：Vue2知识体系（旧）/Vue基础知识 81楼

老师，这个插槽我不太理解，为什么要使用插槽而不是直接在页面内写元素呢，插槽内的样式在哪个页面去定义呢

WEB前端全系列/第十九阶段：Vue2知识体系（旧）/Vue基础知识 82楼

</template>

<p>标题:{{slotMsg.msg}}</p>

</template>

有一个v-slot:default之后，p标签就不再显示了，为什么会这样呢？

WEB前端全系列/第十九阶段：Vue2知识体系（旧）/Vue基础知识 83楼

在拉取 2.x 模板 (旧版本)，运行之后报错，应该说是包被弃用了，最后说请求被驳回了，

我该怎么做？

而直接使用vue create创建项目显示

这又是什么原因，麻烦老师说的详细点

WEB前端全系列/第十九阶段：Vue2知识体系（旧）/Vue基础知识 84楼

老师为啥我的vue环境不可以？？？我根据网站安装vue devtools的

WEB前端全系列/第十九阶段：Vue2知识体系（旧）/Vue基础知识 85楼

<template>
    <div>
        <button @cilck="showA">A组件</button>
        <button @click="showB">B组件</button>
        <button @click="showC">kong组件</button>
        <keep-alive>
            <component :is="current"></component>
        </keep-alive>
        

        动态组件    
    </div>
</template>

<script>
import AComponent from "./child/AComponent";
import BComponent from "./child/BComponent";
export default {
    name:"dongtai_components",
    data(){
        return{
            current:AComponent,

        }
    },
    components:{
        AComponent,
        BComponent,
    },methods:{
        showA(){
            this.current=AComponent;
        },
        showB(){
            this.current=BComponent;
        },showC(){
            this.current=AComponent;
        }


    }
}
</script>
<template>
    <div>
        AComponentaaa
    </div>
</template>
<script>
export default {
    name:"AComponent",
    data(){
        return{

        }
    }
}
</script>
<template>
    <div>
        BComponent
        {{msg}}
        <button @click="handle">改变数据</button>
        
    </div>
</template>
<script>
export default {
    name:"BComponent",
    data(){
        return{
            msg:"原有数据"

        }
    },
    methods:{
        handle(){
            this.msg="这是修改后的数据"

        }
    }
}
</script>

老师我这个showA点击之后没效果，而且把整个showA删除之后，后面两个事件也没效果了。是怎么回事

WEB前端全系列/第十九阶段：Vue2知识体系（旧）/Vue基础知识 86楼

请问提供的源码全码？为什么发过来的源码和视频里完全不一样，缺少很多文件

WEB前端全系列/第十九阶段：Vue2知识体系（旧）/Vue基础知识 87楼

vueinit.zip

老师我那个只能切换一次就不能切换了，我也不知道是什么原因

WEB前端全系列/第十九阶段：Vue2知识体系（旧）/Vue基础知识 88楼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .grid{
            margin: auto;
            width: 500px;
            text-align: center;
        }
        .grid table{
            width: 100%;
            border-collapse: collapse;
            /*margin: 0 auto;*/
        }
        .grid th,td{
            padding: 10px;
            border: 1px dashed orange;
            height: 35px;
            line-height: 35px;

        }
        .grid th{
            background-color: orange;
        }
        .grid .book{
            padding-bottom: 10px;
            padding-top: 5px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
<!--        1.建立表格-->
<!--        2.添加图书-->
<!--            ·实现表单的静态效果-->
<!--            ·添加图书表单域数据绑定-->
<!--            ·添加按钮事件绑定-->
<!--            ·实现添加业务逻辑-->
<!--        3.修改图书-->
<!--            ·修改信息填充到表单-->
<!--            ·修改后重新提交表单-->
<!--            ·重用添加和修改的方法-->
<!--        4.删除图书-->
<!--             ·删除按钮绑定事件处理方法-->
<!--             ·实现删除业务逻辑-->
<div id="app">
    <div class="grid">
        <div class="book">
            <h1>图书管理系统</h1>
            <div>
                <label for="id" >编号:</label>
                <input type="text" id="id" v-model="id" :disabled="flag">
                <label for="name" >名称:</label>
                <input type="text" id="name" v-model="name">
                <input type="button" value="提交" @click="handle">
            </div>
        </div>
        <table>
            <thead>
            <tr>
                <th>编号</th>
                <th>名称</th>
                <th>时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr :key="item.id"   v-for="item in books">
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.date | format('yyyy-MM-dd hh:mm:ss')}}</td>
                <td><a href="" @click.prevent="toEdit(item.id)">修改</a>
                    <span>|</span>
                    <a href="" @click.prevent="deleteBook(item.id)">删除</a>
                </td>
            </tr>
<!--            <tr>-->
<!--                <td>1</td>-->
<!--                <td>红楼梦</td>-->
<!--                <td>2018</td>-->
<!--                <td>编号</td>-->
<!--            </tr>-->
<!--            <tr>-->
<!--                <td>1</td>-->
<!--                <td>红楼梦</td>-->
<!--                <td>2018</td>-->
<!--                <td>操作</td>-->
<!--            </tr>-->
<!--            <tr>-->
<!--                <td>1</td>-->
<!--                <td>红楼梦</td>-->
<!--                <td>2018</td>-->
<!--                <td>操作</td>-->
<!--            </tr>-->
            </tbody>
        </table>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    Vue.filter('format', function(value, arg) {
        function dateFormat(date, format) {
            if (typeof date === "string") {
                var mts = date.match(/(\/Date\((\d+)\)\/)/);
                if (mts && mts.length >= 3) {
                    date = parseInt(mts[2]);
                }
            }
            date = new Date(date);
            if (!date || date.toUTCString() == "Invalid Date") {
                return "";
            }
            var map = {
                "M": date.getMonth() + 1, //月份
                "d": date.getDate(), //日
                "h": date.getHours(), //小时
                "m": date.getMinutes(), //分
                "s": date.getSeconds(), //秒
                "q": Math.floor((date.getMonth() + 3) / 3), //季度
                "S": date.getMilliseconds() //毫秒
            };
            format = format.replace(/([yMdhmsqS])+/g, function(all, t) {
                var v = map[t];
                if (v !== undefined) {
                    if (all.length > 1) {
                        v = '0' + v;
                        v = v.substr(v.length - 2);
                    }
                    return v;
                } else if (t === 'y') {
                    return (date.getFullYear() + '').substr(4 - all.length);
                }
                return all;
            });
            return format;
        }
        return dateFormat(value, arg);
    })
    var vm=new Vue({
        el:'#app',
        data:{
            flag:false,
            id:'',
            name:'',
            // date:new date(),
            books:[{
                id:'1',
                name:'西游记',
                date:'20210405085807'
            },{
                id:'2',
                name:'大话西游',
                date:'20210405085807'
            },{
                id:'3',
                name:'红楼梦',
                date:'20210405085807'
            }]
        },
        methods: {
            handle: function () {
                if (this.flag) {
                    //编辑操作
                    //根据当前的id去更新数组中对应的数据
                    //箭头函数this定义的是父级的this,这里的父级就是handle
                    this.books.some((item) => {
                        if (item.id == this.id) {
                            item.name = this.name
                            //完成更新操作之后，需要终止循环
                            return true
                        }
                    })
                    this.flag = false
                } else {
                    //添加
                    //添加图书
                    var book = {};
                    book.id = this.id     //this.id表单中的Id
                    book.name = this.name
                    book.date = ''
                    this.books.push(book);
                    //清空表单
                    this.id = ''
                    this.name = ''
                }
                this.id=''
                this.name=''
            },
            toEdit: function (id) {
                //禁止修改id
                this.flag = true
                // console.log(id)
                //根据id查询出要编辑的数据
                //借助数组的api   过滤出我们需要的数据
                var book = this.books.filter(function (item) {
                    return item.id == id
                })
                //把获取到的信息填充到表单
                this.id = book[0].id
                this.name = book[0].name
            },
            deleteBook:function (id) {
                // var index = this.books.findIndex(function (item) {
                //     return item.id == id
                // });
                // this.books.splice(index,1)
                //--------------
                //方法二通过filter方法
                this.books=this.books.filter(function (item) {
                return item.id !=id
                })

            }
        }
    })
</script>
</body>
</html>

老师，我的date出不来，是哪里有问题吗？

截图：

WEB前端全系列/第十九阶段：Vue2知识体系（旧）/Vue基础知识 89楼

<template>
  <div class="hello">
   {{ msg }}
    <p v-html="room"></p>
    <a v-bind:href="links.url">{{ links.title }}</a>
    <p>{{1+1}}</p>
    <div>
      <template v-if="flag">
        <p>孙悟空</p>
        <p>唐僧</p>
        <p>猪八戒</p>
        <p>沙和尚</p>
      </template>
      <template v-else>
        <p>六耳猕猴1</p>
        <p>六耳猕猴2</p>
        <p>六耳猕猴3</p>
        <p>六耳猕猴4</p>
      </template>
    </div>
    <p v-show="flag">我是show</p>
    <p v-for="(item,index) in names" v-bind:key="index">{{ item }}</p>
    <p v-for="(item,name,index) in obj" v-bind:key="index">{{name}}:{{item}}: {{index}}</p>
    <p>{{count}}</p>
    <button v-on:mouseover="addCountHandler(10,$event)">按钮</button>
  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'HelloWorld',
      flag:true,
      count:0,
      room:"<h2>只是一个h2标签</h2>",
      names:["zhou","jia","quan"],
      obj:{name:"邹雅婷",age:20,sex:"女"},
      id:1002,
      links:{
        title:"周家泉的小屋",
        url:"http://www.baidu.com",
      }
    }
  },
  methods:{
    addCountHandler(data,event){
      console.log(event)
      this.count += data
    }
  }
}
</script>

这个event事件一直报错

WEB前端全系列/第十九阶段：Vue2知识体系（旧）/Vue基础知识 90楼

在拉取 2.x 模板 (旧版本)，运行之后报错，应该说是包被弃用了，最后说请求被驳回了，

同学您好