1、MVVM的理解

Model view viewmodel

2.vue中html上如何加载data中数据（列举三种）
插值表达式、v-text、v-html

3、如何绑定属性和事件
v-on@
v-bind:

4、vue中常见的事件修饰符有哪些，分别是做什么的？
.stop阻止冒泡
.prevent阻止默认事件
.capture添加事件侦听器时使用事件捕获模式
.self只当事件在该元素本身（比如不是子元素）触发时触发回调
.once事件只触发一次

5、vue中如何实现双向数据绑定

v-model

6、v-if与v-show区别，以及应用场景。
v-if()是直接删除或添加当前元素，

v-show()是设置样式：display:blockdisplay:none

7、代码实现v-for渲染数据，并要求隔行换色

<body>
    <div id="app">
        <ul>
            <li v-for="(item,i) in list" 
    ：style=”{backgroundColor:index%2==0?”green”:”hotpink”}”>name：{{item.name}} ----age：{{item.age}}----sex:{{item.sex}}</li>
        </ul>
    </div>
</body>
<script>
    const vm = new Vue({
        el: "#app",
        data: {
            
            list: [{name:”张三”,age:”18”,sex:”男”},
{name:”李四”,age:”19”,sex:”女”},
{name:”王五”,age:”20”,sex:”男”}]
        }
    })
</script>

8、自定义过滤器实现日期的格式化

Vue.filter("dateTime",(data,format="YYYY-MM-DDhh-mm-ss")=>{
let year=data.getFullYear();
let month=String(data.getMonth()+1).padStart(2,"0");
let day=String(data.getDate()).padStart(2,"0");
let hour=data.getHours().toString().padStart(2,"0");
let minute=data.getMinutes().toString().padStart(2,"0");
let second=data.getSeconds().toString().padStart(2,"0");
return format.replace("YYYY",year)
.replace("MM",month)
.replace("DD",day)
.replace("hh",hour)
.replace("mm",minute)
.replace("ss",second)
})

9、自定义指令实现自动聚焦功能

Vue.directive("focus",{
bind(el,binding){
},
inserted(el,binding){
el.focus();
},
update(el,binding){
}
})

10、Vue生命周期函数有哪些，都有哪些作用

BeforeCreate()创建实例之前，这个阶段拿不到data上面的数据。此阶段进行页
面重定向
Created()界面还没有渲染，但是可以拿到data值了，也是最早可以对数据进行初始化的
地方
beforeMount()执行之前，这个阶段已经准备好了要编译的模板，但还没有渲染到界面
Mounted()界面已经渲染好了，如果依赖于dom的组件初始化可以放到这里
beforeUpdate()数据更新之前，但是界面还没有更新
Updated()如果界面改变了，有些组件可能还需要渲染，渲染过程就放在这里
beforeDestroy()销毁之前
Destroyed()销毁了

11、axios如何进行get和post请求
Axios.get(地址,{}).then()
Axios.post(地址,{},配置).then()

12.编码实现通过axios进行文件上传。
接口地址http://myhope365.com/upload/file
参数：
file上传的文件
name文件名字

<div id='app'>
        <input type="file" @change="onSelectFile">
        <button @click="uploadFile">文件上传</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
                file: null
            },
            methods: {
                onSelectFile(e) {
                    console.log(e.target.files)
                    this.file = e.target.files[0];
                },
                uploadFile() {

                    //三种方式
                    // json {}
                    // application/x-www-form-urlencoded   URLSearchParams()
                    // multipart/form-data   FormData() 
                    //FormData
                    const formdata = new FormData();
                    formdata.append("file", this.file);
                    axios.post("http://59.111.92.205:13010/api/nos/upload/image", formdata
                    ).then(res => {
                        console.log(res);
                    })
                }
            }
        })
    </script>
</body>

13.post请求中常见的三种请求体格式是什么？如何传递这些数据

Json格式:Content-type:application/json
表单格式:application/x-www-form-urlencoded new URLSearchParams()

文件上传 Application/form-data new FormData()

14、代码实现，父组件分别将名为header内容为“我是头部”和名为footer，内容
为“我是底部“插槽，填充到子组件

<body>
    <template id="comp">
        <div>
            <slot name="header"></slot>
            <h3>自定义组件</h3>
            <!-- 写在那里，组件里html就在那里 -->
            <slot></slot>
            <slot name="footer"></slot>

        </div>
    </template>
    <script>
        //插槽我们组件中HTML该被放在那里
        const comp = {
            template: "#comp",
        }
    </script>
    <div id='app'>
        <comp>
            <!-- 希望把指定的html宣染到指定的位置 -->
            <header slot="header">
                这是一个头部
            </header>
            这是主题内容
            <footer slot="footer">
                这是一个尾部
            </footer>
        </comp>
    </div>
    <script>
        const vm = new Vue({
            el: '#app',
            data: {
            },
            components: {
                comp: comp
            }
        })
    </script>

15、如何进行路由重定向

             {
                    path: "/",
                    redirect: "/list"
                }

16、定义路由的步骤有哪些？

引入路由的js
创建路由实例。newVueRouter
配置地址和组件的映射关系。routes
把路由实例挂载到vue上。
指定路由到这个地址之后，
组件显示的位置<router-view></router-view>

17、路由如何跳转？（两种方式）

(1) <router-link to = "地址"></router-link>

(2)this.$router.push()

18、路由跳转如何传递参数，如何获取路由跳转的参数？

query参数：？参数名=参数值&参数名=参数值

params参数： /：id/：name

要先定义，且必须赋值

区别

params必传，query不传也可以跳转
params使用前要先声明，query可以直接使用
params是通过this.$route.params获取，query通过this.$route.query获取的

19、简述一下vue的计算属性，已经应用场景？

计算属性：本质上是一个属性，它别的属性的一个派生。计算属性会进行缓存，只有它依赖的属性发生的时候才会重新计算（不能写异步操作的）

20、Vue中列表循环中为什么要设置key值？

让界面元素和数组里的每条元素进行绑定提高重排效率，唯一性

21、全局定义一个组件，该组件有一个输入框和一个按钮，组件下展示一个数组。
要求数组的数据从父组件传递进来，用户输入内容后，点击按钮，按照输入值进
行筛选。

<body>
    <template id="search">
        <div>
            <input type="text" v-model="keywords">
            <button @click="search">
                按钮
            </button>
            <ul>
                <li v-for="(item,index) in list" :key="item.id">id:{{item.id}} name:{{item.name}}</li>
            </ul>
        </div>
    </template>
    <script>
        const search = {
            template:"#search",
            data(){
                return {
                    keywords:""
                }
            },
            props:{
                list:{
                    type:Array,
                    default:[],
                }
            },
            methods:{
                search(){
                    this.$emit("search",this.keywords)
                }
            }
        } 
        Vue.component("search",search)
    </script>
    <div id='app'>
        <search :list="newlist" @search="onSearch"></search>
    </div>
    <script>
    const vm = new Vue({
        el: '#app',
        data: {
            list: [{
                id: 1,
                name: '老板'
            }, {
                id: 2,
                name: '经理'
            }, {
                id: 3,
                name: '运营总监'
            }, {
                id: 4,
                name: 'CEO'
            }, {
                id: 5,
                name: '销售'
            }],
            keyword:""
        },
        methods:{
            onSearch(e){
                this.keyword = e;
            }
        },
        computed:{
            newlist(){
                return this.list.filter(item => item.name.includes(this.keyword));
            }
        }

    })

posted on 2020-09-14 20:37 wen22 阅读(186) 评论(0) 收藏举报

刷新页面返回顶部

vue周测题

区别

公告