vue周测题

1、MVVM的理解

Model view viewmodel

2. vue中html上如何加载data中数据（列举三种）

插值表达式、v-cloak、v-text、v-html

3、如何绑定属性和事件

v-on @

v-bind :

4、vue中常见的事件修饰符有哪些，分别是做什么的？

l.stop阻止冒泡
l.prevent阻止默认事件
l.capture添加事件侦听器时使用事件捕获模式
l.self只当事件在该元素本身（比如不是子元素）触发时触发回调
l.once事件只触发一次

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

v-model

6、v-if与v-show区别，以及应用场景。

v-if()是直接删除或添加当前元素，v-show()是设置样式：display:block display: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:”男”}]
        }
    })

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

Vue.filter("dateTime", (data,format="YYYY-MM-DD hh-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

Application/form-data

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: "/指定的地址"

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

引入路由的js

创建路由实例。 new VueRouter

配置地址和组件的映射关系。 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 @ 2020-09-14 20:44 橘雎阅读(187) 评论(0) 收藏举报

刷新页面返回顶部

橘雎

vue周测题

区别

公告