vue的知识点

森媛

已于 2022-02-07 20:07:05 修改

阅读量115

点赞数

文章标签： javascript vue.js 前端

于 2022-02-07 16:52:56 首次发布

本文链接：https://blog.csdn.net/m0_62351590/article/details/122810533

版权

本文详细介绍了Vue的核心知识点，包括实例与组件中data的定义区别，v-if与v-show的使用场景及性能比较，Vue的生命周期，虚拟DOM的概念与优势，diff算法的原理，以及Vue的双向数据绑定机制。通过这些内容，读者可以深化对Vue框架的理解。

摘要由CSDN通过智能技术生成

一、实例和组件定义data的区别

一.实例中的data属性可以是一个对象也可以是一个函数(实例是一个单例),不会产生数据污染

二.如果组件data是一个对象,则会报错

三.在组件中的data只能一个函数,目的是为了防止多个组件公用一个data,从而引起数据污染

在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令，指令中封装了一些DOM行为, 结合
属性作为一个暗号, 暗号有对应的值,根据不同的值，框架会进行相关DOM操作的绑定

v-if 控制DOM元素的显示隐藏是将DOM元素整个添加或删除;

v-else 必须和v-if连用不能单独使用

v-else-if 必须和v-if连用

v-show 控制DOM 的显示隐藏是为DOM元素添加css的样式display=(bloock/none)来控制元素的显示隐藏

v-model 多用于表单元数实现双向数据绑定

v-text 解析文本

v-html 解析html标签

v-on 用来绑定一个事件或者方法

v-bind v-bind用来动态的绑定一个或者多个属性。

v-bind:class 三种绑定方法 1、对象型 ‘{red:isred}’ 2、三元型 ‘isred?“red”:“blue”’ 3、数组型 ‘[{red:“isred”},{blue:“isblue”}]’

v-cloak

<style>
[v-cloak]{
   display:none}
</style>

<div id="app" v-cloak>

关注