Vue面试常问到的一些应用场景

187 阅读2分钟

Vue 的应用场景 (面试必备)

过滤器 (格式化日期)

自定义指令 (Vue.direactive获取表单焦点)

自定义组件 (Vue.component)

计算属性 (计算数量)

侦听器 (验证存在),一般异步操作和较大的性能开销

生命周期 (数据处理,拿数据接口做渲染)

Vue 的模板引擎包括 (插值表达式,指令,事件绑定,属性绑定,样式绑定,分支循环结构)

===================

// 全局过滤
vue.filter("过滤器名称" , function(value,fiterDate) {
    // 过滤器业务逻辑
    // 比如说字符串大小写的变化,拼接
    // 商品id的过滤
    // 日期格式的过滤
    // 过滤器可以级联操作
    // fiterDate可以传参(参数的传递)
    return val charAt(0).toUpperCase() + value.slice(1);
})
// 局部过滤
var vm = new.Vue({
    el: "#app",
    data: {
        msg: ''
    },
    fiters: {
        upper: function(value) {
            
        },
        goodid: function(value){

        }
    }
})
-----------
<div>{{msg | upper | lower}}</div>
<div>{{ v-bind:id="id" | formatId}}</div>
// 全局定义自定义指令
vue.

事件的绑定

// 事件修饰符(stop阻止冒泡,prevent阻止默认行为) 
<a v-on:click.stop="handle">跳转</a>
<a v-on:click.prevent="handle">跳转</a>
// 按键修饰符(enter回车键,delete删除键,space空格键)
<input v-on:keyup.enter="submit">
<input v-on:keyup.delete="handle">
// 自定义按键修饰符
<input type="text" v-on:keyup="handle" v-model="info">
var vm  = new Vue({
    el: "#app",
    data: {
        info: ""
    },
    methods: {
        "handle": function() {
            // 打印键盘的键值
            console.log(event.keyCode)
        }
    }
})

属性的绑定

  • vue动态处理属性

    v-bind指令用法<a v- bind:href="url">跳转</a>简写<a :href="url">跳转</a>

样式的绑定

  • class标准样式绑定

    1.对象语法

    <div v-bind:class="{active: isActive}"></div>
    

    2.数组语法

    <div v-bind:class="[activeclass,erroeClass]"></div>
    

*style

vue的生命周期

  • 挂载 (初始化相关属性)
    1. beforeCreate : 在实例化初始化之后,数据观测和事件配置之前被调用
    2. created : 在实例创建完成后被立即调用
    3. beforeMount : 在挂载开始之前被调用
    4. mounted : el被新创建的VM.$el替换,并挂载到实例上去调用该钩子
  • 更新 (元素或者组件的变更操作)
    1. beforeUpdate : 数据更新时调用, 发生在虚拟DOM打补丁之前
    2. updated : 由于数据更改导致的虚拟DOM重新渲染和打补丁, 在这之后会调用该钩子
  • 销毁 (销毁相关属性)
    1. beforeDestroy : 实例销毁之前调用
    2. destroyed : 实例销毁后调用
    var vm = new Vue({
        el: "#app",
        data: {
            msg: "生命周期"
        },
        // 计算属性
        methods: {
            // 更新
            update: function() {
                this.msg = ""
            },
            //销毁
            destroy: function() {
                // 做资源释放的操作
                // 删除组件树
                // 关闭定时器
                // 关闭监听事件,移除属性(滚动事件)
                this.$destroy()
            }
        },
        // 数据初始化
        beforeCreate: function() {
            console.log("beforeCreate");
        },
        created: function() {
            // 创建template模板
            console.log("created");
        },
        beforeMount: function() {
            console.log("beforeMount");
        },
        Mounted: function() {
            // 发送axios,调用数据接口
            console.log("Mount");
        },
        
    })