疑问汇总

1.弹性盒子的具体理解
https://www.cnblogs.com/nuannuan7362/p/5823381.html

2.Vue在import xxx from ‘xxx’
xxx不能使用xxx-xxx的格式要使用xxxXxx的格式

3.Vue 的作用域插槽的使用

<mlist-card icon="iconmenu" title="新闻资讯" :categories="newsCats">
            <template  #items="{category}">
                    <div v-for="(items, i) in category.newsList" :key="i" class="py-2 px-3">
                        <span>[{{ items.categoryName }}]</span>
                        <span>|</span>
                        <span>{{ items.title }}</span>
                        <span>{{ items.data }}</span>
                </div>
            </template>
            <template  slot="items" slot-scope="categories">
                    <div v-for="(items, i) in categories.category.newsList" :key="i" class="py-2 px-3">
                        <span>[{{ items.categoryName }}]</span>
                        <span>|</span>
                        <span>{{ items.title }}</span>
                        <span>{{ items.data }}</span>
                </div>
            </template>
            <template  slot="items" slot-scope="{category}">
                    <div v-for="(items, i) in category.newsList" :key="i" class="py-2 px-3">
                        <span>[{{ items.categoryName }}]</span>
                        <span>|</span>
                        <span>{{ items.title }}</span>
                        <span>{{ items.data }}</span>
                </div>
            </template>
</mlist-card>

这里的三种写法相同第一种是最新的写法后两种在Vue3.0中将被弃用
（categories categories.category.newsList）和（{category} category.newsList)的区别在于categories 是父组件直接接收到的值为当前组件传入的变量 而{category}是slot插槽中定义的<slot name="items" :category="category"></slot>传出的变量和import{}按需导入有些类似
注意：不能写成slot-scope="category"，slot-scope能直接接受的变量只能是在父组件中已经定义好的
注：#items="{category} 是v-slot:items="category"的简写是Vue2.6新推荐的写法

4.使用es6的模板字符串拼接路由地址时需要注意：

//axios
import Vue from 'vue'
import axios from 'axios'
const ajax = axios.create({
   baseURL:'http://127.0.0.1:3000/web/api/'
})
Vue.prototype.$ajax = ajax
//在baseURL中即使在结尾设置了/，在普通的路径中字符串中可以不加/但是在模板字符串中一定要加/
const res = await this.$ajax('news/list')
const res = await this.$ajax(`/articles/${this.id}`)

5.在vue中如果对一个对象中一开始不存在的属性赋值会出现赋值不成功的问题

const model={}
model.name = a
//这是时候会出现赋值不成功的问题
//应该使用下面的赋值方法，这是vue中的显性赋值
$set(model,'name',a)

6.vue 中computed计算属性和watch监听的区别

https://segmentfault.com/a/1190000012948175?utm_source=tag-newest

7.轮播图解决抖动的问题

    .swiper {
        overflow: hidden;
        width: 100%;
        height: 0;
        //根据宽度相对撑开55%的高度
        //根据自己图片的宽高比
        padding-bottom: 55%;
    }

image.png

如图想让文字在盒子的下方显示 除了浮动和定位以外使用flex布局更加方便

        <div class="banner" :style="{ 'background-image': `url(${model.banner})` }">
            <div class="info-text pl-3 pb-3 h-100 text-white d-flex flex-column jc-end">
                <p class="py-2">{{ model.title }}</p>
                <strong class="fs-xxl">{{ model.name }}</strong>
                <!-- join() 方法用于把数组中的所有元素放入一个字符串 /为每个数组元素之间的分隔符默认为，-->
                <p class="py-1">{{ model.categories.map(v=>v.name).join('/') }}</p>
                <div class=" d-flex jc-between">
                    <div>
                        <span>难度</span>
                        <span class="scores-bgc bg-primary mx-1">{{ model.scores.difficult }}</span>
                        <span>技能</span>
                        <span class="scores-bgc bg-blue mx-1">{{ model.scores.skills }}</span>
                        <span>攻击</span>
                        <span class="scores-bgc bg-danger mx-1">{{model.scores.attack}}</span>
                        <span>生存</span>
                        <span class="scores-bgc bg-dark mx-1">{{model.scores.survival}}</span>
                    </div>
                    <router-link to="/" tag="span"><span class="pr-2">皮肤：4&nbsp;&gt;</span></router-link>
                </div>
            </div>
        </div>

除了更改对齐方式外小盒子的高度一定要设置为100%和父元素一样高，这样才能在最下方显示，若盒子没有高度（宽度）而是根据内容撑开的则
flex-start 和flex-end没有效果

**router-link和router-view
router-link对应的router-view规律为：

1.根据to的值而定，值为一层（如 /child）则对应app.vue中的router-view；

值为两层，如 /second/child，则对应的是/second组件中的router-view；以此类推

2.router-link映射的结果为其对应组件的整个页面内容，如 to='/second/child'，则其对应的view会显示app.vue和/second和/second/child等父子组件的整个页面内容；

同样的，若to='/child'，则得到的页面结果为app.vue和/child父子组件的整个页