专栏首页csicovue核心概念

vue核心概念

  • 1.vue的本质声明式/响应式(寻常的指令)组件化。(定制)
  • 2.vue简介:MVVM框架(不完全是,react完全是),渐近式(可大可小,既可以做简单的html页面,又可以做大型的管理系统)
  • 3.vue开发思想:当我们想要改变视图界面时,我们只需要改变视图界面对应的声明式变量即可(间接)
  • 4.jquery开发思想:当我们想要改变视图界面时,我们要使用$选择器获取DOM元素对象,再使用DOM API操作DOM(直接)

指令

  • 1.指令是vue中的特色(在react中是没有的),Angular,微信小程序也有指令。
  • 2.指令的本质,就是DOM封装。指令就是一组相似的DOM操作
  • 3.降低我们直接操作DOM的频率。(尽可能减少DOM操作(滥杀无辜,只想改变一个列表某一行时,把全部列表重新渲染),不推荐用户直接操作DOM)
  • 4.指令如果有值,这个值是变量(变量必须在组件中可以通过this访问),也可以是表达式(有变量参与的运算)

一、文本指令

  • 1.{{}}文本插值。缺点有“一闪而过”的效果(不够美观)。可以使用v-text替代,或者用v-clock替代,但是要设置css样式[display:none]但是某些情况下只能用{{}},存在即合理。
  • 2.v-text专门用于渲染文本,如字符串,数字等,但是null,undefined不会渲染,直接显示为空
    • 注意,渲染Boolean值时,vue会自动的隐式转化为字符串 进一步理解:v-text就相当于是innerText
  • 3.v-html 专门渲染HTML字符串。
    • v-html的值是HTML字符串,这些字符串会被Vue引擎解析渲染成真实的DOM结构
    • v-html默认具有“防注入攻击XSS”的功能,可以放心使用v-html
  • 4.v-once
    • 在语法上:v-once和v-cloak一样,没有值,不能这么使用:v-once=‘msg’
    • 它有一个非常重要的特点,它所作用的DOM节点上的声明式变量只会渲染一次。换句话说,当它对应的声明式变量发生改变时,视图不会发生改变。
    • 说明:工作中几乎不会用到

动态属性

  • v-bind给标签动态添加属性,凡是可以使用的属性都可以变成动态的
    • 简写: v-bind:style 简写成:style=‘’
    • 进阶:使用v-bind实现动态class,动态style,是非常重要的,在“组件化”时用的非常多

事件绑定

  • v-on 给标签绑定事件(事件是网页交互的基础) +.可以绑定哪些事件?什么事件都可以绑定,如:鼠标事件,键盘事件,滚动事件等... +.简写:v-on:事件名=‘事件处理器’ 简写为 @事件名 = ‘事件处理器’ +.事件修饰符(可以链式调用):.enter/.stop阻止冒泡/.prevent阻止默认行为/... +. 事件对象 +.(1)当没有事件传参时,事件处理器默认的第一个参数就是事件对象。(如果没有参数时,定义不要加())当事件传参时,需要手动传入$event事件对象。 在什么场景下会使用事件传参?通常为了复用“事件处理器”,减少methods封装 语法1:没有事件传参<tag @click='handle'> 语法2:有事件传参时<tag @click='handle(变量1,$event)'>

四、表单绑定

  • v-model用于表单双向绑定,即方便我们取表单值。(这不是响应式的原理)
  • 约定:一般我们谈论的“双向绑定”指的是表单的v-model,谈论“响应式/声明式”指的是vue响应式的原理。
  • 怎么理解双向绑定?从表单的角度,当表单视图发生改变时,对应的生名式变量自动更新。当v-model对应的声明式变量发生变化时。表单视图自动更新
  • 好处:有了v-model,我们取表单的值非常的简单 三个修饰符:
  • trim去掉文本类表单值首位的字符串/空格
  • number用于把由数字组成的字符串,转化成Number类型.
  • lazy用于“长表单”的v-model,当长表单光标失焦时,再把表单视图上的更新值更行到其对应的声明式变量上。这是一种性能优化。

五、列表循环

  • v-for常用于循环数组,数字,字符串,对象,一切可迭代的变量(如:map,set)
    • vue工作中很少使用Map,Set,原因是Vue没办法把Map,Set这类数据变成响应式数据
    • 提示:在v-for中很少用于循环Map,SET
    • 说明:常用于循环数组,数值
    • 问题:v-for循环时要加key,后续再补充

六、条件渲染

  • v-show对元素进行显示与隐藏
    • 背后的原理是给元素添加或移除{display:none}的css样式来实现显示与隐藏 语法的坑:v-show=‘Boolean(表达式)’,v-show的值永远都是布尔值,一定要留意v-show值的数据类型
  • v-if/v-else-if/v-else 用于对元素进行显示与隐藏
    • 背后的原理:是通过DOM操作对元素节点进行插入与删除(removeChild&appendChild)
    • 语法的坑:v-if=‘Boolean(表达式)’,v-id和v-else-id的值必须是布尔值,vue会自动隐式类型转化
    • 注意:当v-if/v-else-if/v-else成为‘一组’时,在这组兄弟节点中不能插入其他节点
    • v-else 是不用给‘值’的
  • v-if和v-show的区别?
    • v-show是通过css的{display:none}来实现显示与隐藏的。而v-if是通过DOM元素操作实现的。
    • 使用v-show实现隐藏功能时,页面初始化的开销比较大,而使用v-if实现隐藏功能时,页面初始化开销比较小。当一个元素节点需要频繁进行显示与隐藏,建议使用v-show来做,反之建议使用v-if

七、其他指令

  • v-slot插槽,是组件化的基础语法之一,它可以简写为#
  • v-pre 一般用于调试。特点:一般被v-pre所包裹的都没节点,都不参与vue编译和解析。这个指令不常使用。

原文链接:https://www.cnblogs.com/xsc1234/p/15422668.html

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 详解vue组件三大核心概念

    本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件,可以从这三个部分展开,它们可以帮助你快速了解一个...

    Nealyang
  • 深入理解Vue组件3大核心概念

    本文主要介绍属性、事件和插槽这三个vue基础概念、使用方法及其容易被忽略的一些重要细节。如果你阅读别人写的组件,也可以从这三个部分展开,它们可以帮助你快速了解一...

    Fundebug
  • Redis核心概念

    Redis 支持简单且易用的主从复制(master-slave replication)功能, 该功能可以让从服务器(slave server)成为主服务器(m...

    高广超
  • RabbitMQ 核心概念

    RabbitMQ 相较于其他消息队列,有一系列防止消息丢失的措施,拥有强悍的高可用性能,它的吞吐量可能没有其他消息队列大,但是其消息的保障性出类拔萃,被广泛用于...

    海向
  • Kubernetes:核心概念

    https://medium.com/yld-engineering-blog/kubernetes-core-concepts-324ea7028c29

    CNCF
  • NumPy核心概念

    NumPy是Python数据科学生态中重要的基础成员,其中有几个概念比较tricky,简单记录之。更佳阅读体验,可移步NumPy核心概念。

    用户2183996
  • ROS 核心概念

    在上一篇文章中,我们介绍了 ROS 的概况,希望你的安装已经完成了。在本文中,我们将介绍 ROS 的一些核心概念,熟悉所谓的行话。其目的是做一个简短的概念介绍,...

    McGL
  • ElasticSearch7.6.1 核心概念

    ElasticSearch是面向文档的,关系型数据库和ElasticSearch客观的对比!

    彼岸舞
  • sentinel 核心概念

    编者注:前段时间笔者在团队内部分享了sentinel原理设计与实现,主要讲解了sentinel基础概念和工作原理,工作原理部分大家听了基本都了解了,但是对于se...

    luoxn28
  • Kubernetes 核心概念

    在本文中,我们将介绍基本的Kubernetes概念。Kubernetes的术语很多,可能会令人生畏。

    dys
  • Git的核心概念

    文章内容来自自己的理解 和 https://git-scm.com/book/en/v2 。

    Java后端技术
  • Spring JPA 核心概念

    翻译: Core concepts Spring数据存储库抽象中的中心接口是repository。它采用要管理的域类以及域类的ID类型作为类型参数。此接口主要...

    Kindear
  • 075. Zookeeper 核心概念

    山海散人
  • K8s核心概念入门

    新的一年还是要学习一些新技术的,先从k8s开始吧。 作为一个想成为“微服务技术专家”,除了上层类spring cloud的解决方案,服务治理方案之外,k8s作为...

    春哥大魔王
  • springframework 核心概念扫盲

    springframework 从 2.5 版本发展至今,期间已经发生了非常多的修正及优化。 最初认为 spring 框架是一个非常轻量级的东西,轻量到你几乎认...

    美码师
  • Eureka中的核心概念

    本文是Spring Cloud系列的第四篇,前面三篇文章(使用Spring Cloud搭建服务注册中心、使用Spring Cloud搭建高可用服务注册中心、Sp...

    江南一点雨
  • Kubernetes核心概念总结

      Master节点上面主要由四个模块组成:APIServer、scheduler、controller manager、etcd。

    用户1263954
  • hive核心基本概念

    基于 Hadoop 的一个数据仓库工具: hive本身不提供数据存储功能,使用HDFS做数据存储, hive也不分布式计算框架,hive的核心工作就是把...

    业余草
  • springframework 核心概念扫盲

    springframework 从 2.5 版本发展至今,期间已经发生了非常多的修正及优化。 最初认为 spring 框架是一个非常轻量级的东西,轻量到你几乎认...

    Java3y

扫码关注云+社区

领取腾讯云代金券