Vue基础问题

coderHY108910
164 阅读3分钟

安装cnpm

  1. 安装方法 npm install cnpm -g --registry=https://registry.npm.taobao.org

Vue的许多指令

  • v-clock 的使用场景：解决插值表达式的闪动问题。

    • 用法如下：

    • [v-block]{
			display: none;
		}
<div v-block>{{ msg}}</div>

    • 原理：通过样式先把数据隐藏，在内存中进行交换，然后在dom中渲染

  • v-text的使用场景

    • 比插值表达式更简洁

  • v-html的使用场景

    • 慎重使用，一般不安全，可以解析html标签，容易受到xss攻击，请求本网站的数据时，可以使用

  • v-pre的使用场景

    • 跳过编译过程，直接显示带有双大括号的值

  • 数据响应式：指的是在vue中只关注数据层，数据改变，dom会跟着重新渲染,一般在input标签中使用

  • v-once的使用场景

    • 一般在数据绑定的时候，不需要修改这个数据，可以加上这个指令，提高性能

  • 数据双向绑定(v-model)原理：从视图view(DOM)通过vue框架到数据(Model),通过事件监听,从数据(Model)到视图view(DOM)通过数据绑定

  • 事件绑定绑定

    • v-on:语法糖@例如：@click单机点击事件
    • v-mode底层就是事件绑定与事件监听
      • 底层:在input输入框中,通过事件绑定value属性,监听input事件来达到双向绑定的目的
    • 事件定义在methods中,其中this指的是Vue的实例，事件调用时候，需要传参时,要加上()
    • 在事件调用时,会默认有一个事件参数$event(必须)参数,可以通过事件接收e.target.innerHtml拿到标签元素

  • 事件修饰符

    • @click.stop 阻止事件冒泡行为
    • @click.prevet阻止事件跳转
    • 事件修饰符可以串联起来写

  • 按键修饰符

    • @click.keyup.enter 类似这种
    • 自定义按键修饰符,每个按键都有对应的一个数字。

  • 属性绑定

    • v-bind语法糖":"
    • 样式绑定:可以是对象,也可以是数组,也可以结合使用。可以直接写在标签中,也可以定义在data中

  • 在循环遍历的时候,加一个:key=‘item.index’唯一标识,帮助Vue区分不同的元素,从而提高性能

  • 表单修饰符

    • v-model.number可以直接将字符串转化为数字
    • v-model.trim去掉提交时候的空格(前边和后边的空格,中间的不可以)
    • v-model.lazy双向绑定时,加上lazy之后只要在失去焦点才会改变元素(应用场景:在注册账号时验证是否存在)

  • 在Vue内置的指定不满足需求的时候,可以自己定义指令(常用的就是直接触发焦点,详情查阅官方文档)

  • 计算属性:基于data中的数据,使用场景:使模板中的业务逻辑更加简洁

  • 计算属性(computed)和方法(methods)的区别：

    • 计算属性是有缓存的,当计算业务量大的时候,减少耗时,提高性能,调用不需要加()
    • 方法调用需要加上(),没有缓存,每调用一次,就会执行一次函数

  • 监听器watch的使用场景与计算属性的区别

    • 监听器中定义的方法名需要跟data中属性名保持一致
    • 监听器支持异步的操作

  • 过滤器filter的使用,类似自定义标签

  • 生命周期：

    • created
    • mounted:元素已经挂载,一般用与在请求后台数据接口
    • updated
    • destroyed
avatar
文章
阅读
粉丝