40 vue.js

embedded/2024/12/3 0:51:42/

1.1  vue的延迟挂载是什么?$mount是什么?

在vue中,有两种实例化的挂载方式,分别为el和$mount,这两种方式都为手动挂载,而在项目中,可用于延迟挂载(比如在挂载之前要做一些操作或者判断之类的),之后才进行手动挂载。new vue时,el和$mount并没有本质上的不同。

1.1.1  el

实例化:

javascript">new Vue({el: '#Demo',data: obj
})

模板:

javascript"><div id="Demo"><p>{{ text }}</p><!-- 这里的 `text` 不会更新的 --><button v-on:click="text = 'baz'">点击</button>
</div>

 

 1.1.2  $mount

实例化:

javascript">const app = new Vue({xiaoming,18,...Demo
}).$mount('#Demo')

模板:

javascript"><div id="Demo"><h1 style="font-size: 16px; text-align: center;">{{ $t("message.hello") }}</h1>
</div>

1.2  data的写法分别是什么?

1.2.1  对象式

在vue(2.0)中,创建实例时,通常情况下data的配置都是按照一种固定的方式去写的,如下面的代码所示:

javascript">// 创建一个实例new Vue({el: "#Demo",data: {name: "小江同学"}})

除了上面的写法之外,data还有一种写法,另外这种写法在vue组件中使用比较频繁

data 的第二种写法也是通过配置项配置在 Vue 实例中的,但不同的是第一种写法是对象式写法,将 data 的值配置为一个对象。而第二种写法是函数式写法,将 data 定义成一个函数,在函数中返回一个对象,这种形式常用在组件中。

1.2.2  函数式

javascript">
<div id="Demo"><h1>Hello, {{ name }}</h1>
</div><script>vue.config.prodctionTip = false // 创建Vue实例new Vue({el: "#Demo",// data的第二种写法:函数式data() {return {name: "小江同学"}}})
</script>

需要注意的是:在函数式的写法中,一定要return出返回值。 

1.3  什么是指令?

在vue中提供了一些对于页面 + 数据的更为方便的输出,这些操作就叫做指令, 以v-xxx的形式表示

在html中使用指令:

<div v-xxx ></div>

比如在angular中 以ng-xxx开头的就叫做指令

在vue中 以v-xxx开头的就叫做指令

指令中封装了一些DOM行为, 结合属性作为一个暗号, 暗号有对应的值,根据不同的值,框架会进行相关DOM操作的绑定

vue中常见的指令:

 1.v-text 元素的InnerText属性,必须是双标签

2.v-if 判断是否插入这个元素

3.v-else-if  

4.v-else

5.v-show 隐藏元素,如果确定要隐藏, 会给元素的style加上display:none

6.v-on 用于处理原生事件的, v-on:事件名="表达式||函数名"     @事件名="表达式"

7.v-model vue的双向绑定流

8.v-bind  对属性的简单赋值,当内存中值改变,还是会触发重新渲染

9.v-for  对数据进行遍历   v-for="item in arr"   对象:v-for="item in obj"    使用时要加key

........还有很多,在后续更新中在写。

1.4  v-model 作用

就是给表单元素进行数据的双向数据绑定

1.5  双向绑定是什么与原理

双向绑定就是视图改变模型也很跟着改变,模型变视图也会改变。

Vue.js 的双向绑定是通过使用数据劫持发布-订阅模式实现的。

具体实现原理如下:

  1. Vue.js 会通过 Object.defineProperty() 方法将 data 对象的属性转换为 getter 和 setter。

  2. 当 data 中的属性被访问时,会触发 getter 方法,Vue.js 会将 Watcher 对象添加到订阅者列表中。

  3. 当 data 中的属性被修改时,会触发 setter 方法,setter 方法会通知订阅者列表中的 Watcher 对象,Watcher 对象会通知相关的视图进行更新。

  4. 当视图中的表单元素被修改时,会触发相应的事件,Vue.js 会通过 v-model 指令将修改后的值赋给 data 对象中的属性,从而实现双向绑定。

数据劫持:数据拦截 就是对data中的数据在初始化的时候监听起来(Object.defineProperty 来进行监听/代理) 当数据改变setter之后 vm就会知道 在视图改变getter 他就会通知模型你要修改了 模型改变了也会通知视图改变。

发布者订阅者模式:就是一个一对多的关系 发布者就是数据提供者 订阅者就是页面展示的 一个发布者可以对应无数个订阅者 但是发布者改变了 所有订阅者也会改变。

1.6  v-show是什么?

用来控制dom元素的显示或者隐藏   他的显示和隐藏是通过css的dispaly方式来控制的。

语法:v-show="布尔值"   true显示 false隐藏。


http://www.ppmy.cn/embedded/20199.html

相关文章

postman汉化

一、postman历史版本下载&#xff1a;Postman 10.24.16 Download for Windows / Old Versions / FileHorse.comhttps://www.filehorse.com/download-postman/old-versions/ 二、汉化包下载&#xff1a; Releases hlmd/Postman-cn GitHubPostman汉化中文版. Contribute to h…

MySQL-用户管理

MySQL 用户分为 普通用户 和 root用户。root用户即超级管理员&#xff0c;拥有所有权限&#xff0c;包含创建&#xff0c;删除和修改用户等相关权限&#xff1b;普通用户只拥有被root用户授予的各种权限MySQL的安全性需要通过账户管理来实现 1、登录MySQL服务器 命令如下&…

OpenHarmony语言基础类库【@ohos.util.Stack (线性容器Stack)】

ohos.util.Stack (线性容器Stack) Stack基于数组的数据结构实现&#xff0c;特点是先进后出&#xff0c;只能在一端进行数据的插入和删除。 Stack和[Queue]相比&#xff0c;Queue基于循环队列实现&#xff0c;只能在一端删除&#xff0c;另一端插入&#xff0c;而Stack都在一…

HarmonyOS 状态管理

在声明式 UI 框架中&#xff0c;数据的改变触发 UI 的重新渲染。在 ArkUI 中不是所有数据的变化都会触发 UI 重新渲染&#xff0c;只有 状态变量 才会引起 UI 重新渲染。 状态变量 状态变量&#xff1a; 指被状态装饰器装饰的变量&#xff0c;只有这种变量的改变才会引起 UI …

制作和合入git补丁

制作git补丁 git log -u a44bc4cf08e94741052cb471512868d14e803f2a -n 1 > log.patch -u显示详细差异 -n日志数量 合入git补丁 git apply log.patch 确保补丁目录与git目录一致

学习 Rust 的第十二天:如何使用向量

大家好&#xff0c; 今天我们来看看计算机科学中的一种基本数据结构&#xff0c;即向量。向量在 Rust 中扮演着至关重要的角色&#xff0c;它在各种编程任务中都发挥着重要作用。像 Rust 这样的系统编程语言以其对安全性和性能的强调而闻名&#xff0c;因此向量提供了一些强大…

Java基础入门day41

day41 约束 实体完整性 主键约束 唯一约束 自增约束 域完整性 限制列的单元格的数据的正确性 非空约束 not null&#xff0c;非空&#xff0c;此列必须有值 create table subject03(sid int primary key auto_increment,subname varchar(20) unique not null,subHour int…

小白轻松掌握多种本地存储机制

文章导读&#xff1a;AI 辅助学习前端&#xff0c;包含入门、进阶、高级部分前端系列内容&#xff0c;当前是 HTML 的部分&#xff0c;公众号会持续更新&#xff0c;适合零基础的朋友&#xff0c;已有前端工作经验的可以不看&#xff0c;也可以当作基础知识回顾。 今天瑶琴带大…