vue基础知识点

一、Vue

1. 简介

  • Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的 JavaScript 框架

  • 它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型

  • 由个人维护:尤雨溪,华人

  • 官网 Vue.js - 渐进式 JavaScript 框架 | Vue.js

2. 基本使用

Vue的页面使用方式:

  • 在页面中直接引入Vue核心库的js文件

  • 该方式只是为了让开发者在学习Vue语法时可以快速掌握

  • 实际上Vue并不适合直接使用 页面方式进行语法定义,更推荐使用模块化方式

使用步骤:

  1. 获取Vue核心库的js文件

    通过地址 https://cdn.jsdelivr.net/npm/vue/dist/vue.js 下载

  2. 在页面中引入Vue

    <script src="js/vue.js"></script>
  1. 创建Vue实例并应用

3. 调试工具

安装vue-devtools插件,便于在Chrome浏览器中调试vue

步骤:

  1. 打开Chrome浏览器的扩展程序——>更多扩展程序

  2. vue_devtools_6.5.0.crx拖放到扩展程序中

在VSCode中安装Vue相关插件:Vue Language Featuresvue-helper

二、基本交互

1. 插值表达式

语法: {{ }} 由两对大括号组成,称为“Mustache”语法

作用:用于在页面标签中插入值,进行数据的绑定显示,且当值发生变化时标签会重新渲染加载,称为响应式特性,即数据状态同步操作

用法:<标签>{{ Vue对象数据仓库变量|JS表达式|JS内置对象 }}</标签> 只能用在标签中间的内容位置

2. 指令

2.1 简介

指令 (Directives)是用来扩展html标签的功能,以v-作为前缀

2.2 常用指令
指令取值作用
v-textstring更新元素的textContent
v-htmlstring更新元素的innerHTML
v-onFunction | Object | Array | 行内表达式绑定事件监听器,用于事件绑定
v-showany根据表达式的boolean结果,切换元素的 display CSS 属性,控制元素的显示隐藏
v-if、v-else-if、v-elseany根据表达式的boolean结果,执行元素的创建和删除操作,控制元素的显示隐藏
v-forArray | Object | number | string基于数据多次渲染元素或模板块,用于循环数据
v-bindany动态的为标签绑定属性,用于属性绑定

3. 双向数据绑定

v-model双向数据绑定指令

  • 取值:随表单控件类型不同而不同

  • 限制:仅限于表单中可输入或者可选择的元素,如<input><select><textarea>

四、数据控制

1. 计算属性

计算属性(computed)也是用来存储属性数据的,但具有以下特点:

  • 可以对数据进行逻辑处理操作,实现数据包装

  • 计算属性通常依赖于当前Vue对象中的普通属性

  • 当依赖的普通属性发生变化时计算属性也会变化,实现数据监控

2. 监视器

监视器(watch)是用来监视数据的变化,对数据进行监控

new Vue({watch: {变量:function(newValue, oldValue){}, // 监控方法变量:{handler: function(newValue, oldValue){}, // 监控方法deep: true // 开启深度监视}},
})

五、实例属性和方法

1. 简介

通过Vue实例对象可以直接访问的属性和方法,称为实例属性和实例方法

实例属性和方法都以 $ 开头

2. 实例属性

  • vm.$el:当前Vue实例使用的根 DOM 元素

  • vm.$refs:当前Vue实例容器中定义了ref属性的所有 DOM 元素

3. 实例方法

  • vm.$mount:手动挂载Vue实例

  • vm.$destroy:销毁Vue实例,只会销毁vue的实例对象,不会销毁与其关联的页面容器

  • vm.$nextTick:在DOM更新完成后再执行回调函数,一般在修改数据之后使用该方法,以便获取更新后的DOM并操作

六、模板

模板(template)就是定义Vue时指定的页面结构构成

  • 默认使用el选项指定的挂载元素的内容来构成页面模板,同时指定挂载位置

  • 可以使用 template 选项独立定义页面模板,此时el挂载元素的内容将被忽略

七、生命周期

Vue实例从创建到销毁的过程,称为生命周期,共有八个阶段:

  • beforeCreate、created

  • beforeMount 、mounted

  • beforeUpdate、updated

  • beforeDestroy、destroyed

在生命周期的每个阶段都提供了相应的钩子函数,可以在钩子函数中执行操作,控制生命周期的各个阶段

八、组件

1. 简介

Component 组件是可复用的Vue实例,可以将项目中重复出现的页面结构定义为组件

组件会带有一个名称,可以把组件作为自定义元素来使用,相当于是自定义了一个标签

组件分类:

  • 全局组件,在所有Vue实例中都可以使用

  • 局部组件,只能在构建组件的 Vue实例的容器范围内使用

2. 定义组件

通过选项 components:{} 来定义

用法:

new Vue({el: '#app',components: {'comp-a': {template: '<h3>{{ msg }}</h3>',data() {return {msg: "aaa"}}}}
})

九、组件间数据传递

1. 组件间的关系

页面组件的关系结构,是一个由许多组件构成的树状结构,组件间存在着两种关系:父子关系、非父子关系

默认情况下,每个组件实例都是独立的,组件间无法直接访问数据,因此需要进行组件间的数据传递,也称为组件间的通信

2. 父子组件间的数据传递

2.1 父向子传递数据

技术:属性绑定+数据拦截

步骤:

  1. 父组件在调用子组件时,以属性绑定的方式将要传递的数据绑定在子组件标签上

  2. 在子组件对象中,使用props选项声明获取的数据,进行绑定属性的拦截,即接收来自父组件的数据

2.2 子向父传递数据

技术:事件监听+事件触发

步骤:

  1. 父组件在调用子组件时,监听子组件触发的自定义事件,并在父组件中定义回调方法,用来接收数据

  2. 在子组件中使用vm.$emit(事件名,数据)触发自定义事件

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/848441.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Xcode中给UIView在xib中添加可视化的属性

给UIView在xib中添加可视化的属性 效果如下图&#xff1a; 可以直接设置view 的 borderColor 、borderWidth、cornerRadius&#xff0c;也可以单独指定view的某个角是圆角。减少了代码中的属性。 完整代码&#xff1a; UIViewBorder.h #import <UIKit/UIKit.h>inter…

NLP(1)-TF-IDF算法介绍

一、TF-IDF算法介绍 TF-IDF&#xff08;term frequency–inverse document frequency&#xff0c;词频-逆向文件频率&#xff09;是一种用于信息检索&#xff08;information retrieval&#xff09;与文本挖掘&#xff08;text mining&#xff09;的常用加权技术。 TF-IDF是一…

(十六)统计学基础练习题十(选择题T451-478)

本文整理了统计学基础知识相关的练习题&#xff0c;共50道&#xff0c;适用于想巩固统计学基础或备考的同学。来源&#xff1a;如荷学数据科学题库&#xff08;技术专项-统计学三&#xff09;。序号之前的题请看往期文章。 451&#xff09; 452&#xff09; 453&#xff09; 4…

Spring Kafka 之 @KafkaListener 注解详解

我们在开发的过程中当使用到kafka监听消费的时候会使用到KafkaListener注解&#xff0c;下面我们就介绍下它的常见属性和使用。 一、介绍 KafkaListener 是 Spring Kafka 提供的一个注解&#xff0c;用于声明一个方法作为 Kafka 消息的监听器 二、主要参数 1、topic 描述&…

Ubuntu安装cuda

文章目录 前言一、安装NVIDIA驱动1.1 过程中的问题1.2 解决方法1.3 重启后出现 perform MOK management 二、安装Cuda2.1 检查是否安装显卡驱动2.2 安装Cuda2.3 验证CUDA是否安装成功 三、配置环境变量---未完2.4 图片居中加调整大学 总结 #pic_center 前言 只是为方便学习&…

深度学习 - 张量的广播机制和复杂运算

张量的广播机制&#xff08;Broadcasting&#xff09;是一种处理不同形状张量进行数学运算的方式。通过广播机制&#xff0c;PyTorch可以自动扩展较小的张量&#xff0c;使其与较大的张量形状兼容&#xff0c;从而进行元素级的运算。广播机制遵循以下规则&#xff1a; 如果张量…

ChatGPT基本原理

技术背景与基础&#xff1a; 深度学习&#xff1a;ChatGPT建立在深度学习技术之上&#xff0c;通过复杂的神经网络结构模拟人类的语言处理过程。深度学习使得ChatGPT能够处理海量的文本数据&#xff0c;并从中提取出复杂的语言模式和规律。GPT架构&#xff1a;ChatGPT基于GPT&a…

hadoop集群中zookeeper的搭建与原理解释

搭建zookeeper 将zookeeper的apache-zookeeper-3.5.7-bin.tar.gz解压到/export/servers下 tar -zxvf apache-zookeeper-3.5.7-bin.tar.gz -C /export/servers为了方便后期使用解压后的文件夹改名为zookeeper-3.5.7 mv apache-zookeeper-3.5.7-bin zookeeper-3.5.7先进入zoo_…

如何将本地项目上传到GitHub

在软件开发过程中&#xff0c;将本地项目上传到GitHub是一个非常重要的步骤。它不仅可以帮助你备份代码&#xff0c;还可以让你与团队成员共享和协作开发。本文将详细介绍如何将本地项目上传到GitHub。 前提条件 已安装Git。如果还没有安装&#xff0c;请参考Git官网进行下载…

机器学习_模型评估与选择

在机器学习中&#xff0c;模型评估与选择是至关重要的步骤。这一过程包括评估模型的性能、选择最适合的模型&#xff0c;以及对模型进行优化&#xff0c;以确保在实际应用中达到最佳效果。以下是详细的讲解&#xff1a; 一、模型评估 模型评估的目的是衡量模型在数据上的表现…

递归书写树形图示例

大叫好&#xff0c;今天书写了一个扁型转换为树型的例子&#xff0c;使用的是递归&#xff0c;请大家食用&#xff0c;无毒 <!DOCTYPE html> <html lang"zh"><head><meta charset"UTF-8"><meta name"viewport" conte…

【Python数据类型的奥秘】:构建程序基石,驾驭信息之海

文章目录 &#x1f680;Python数据类型&#x1f308;1. 基本概念⭐2. 转化&#x1f44a;3. 数值运算&#x1f4a5;4. 数值运算扩展(math库常用函数) &#x1f680;Python数据类型 &#x1f308;1. 基本概念 整数&#xff08;int&#xff09;&#xff1a;整数是没有小数部分的数…

Mongodb中字段的删除

学习mongodb&#xff0c;体会mongodb的每一个使用细节&#xff0c;欢迎阅读威赞的文章。这是威赞发布的第61篇mongodb技术文章&#xff0c;欢迎浏览本专栏威赞发布的其他文章。 本篇文章&#xff0c;探讨UPDATE中的操作符$unset。Mongodb数据插入后&#xff0c;开发人员使用$u…

Android输入法IME(三)

2.2. IME管理端&#xff08;IMMS&#xff09;初始化流程 IMMS运行在system server进程中&#xff0c;属于系统服务的一部分&#xff0c;用于控制输入法的显示/隐藏、切换、绑定等操作。 涉及代码文件路径&#xff1a; IMMS运行在system server进程中&#xff0c;属于系统服务的…

在Nginx中配置php程序环境。

1、在Nginx中配置php程序环境。 打开编辑 /opt/local/etc/nginx/nginx.conf 文件。 http {. . . server {listen 8090;server_name localhost;. . . location / {root html;index index.html index.htm;add_header Access-Control-Allow-Origin *;add_header Acces…

MMKV源码详解

文章目录 前言一、MMKV简介1.mmap2.protobuf 二、MMKV 源码详解1.MMKV初始化2.MMKV对象获取3.文件摘要的映射4.loadFromFile 从文件加载数据5.encode 数据写入 总结 前言 谈到轻量级的数据持久化&#xff0c;在 Android 开发过程中&#xff0c;大家首先想到的应该就是 SharedP…

题号:BC19 题目:反向输出一个四位数

题号&#xff1a;BC19 题目&#xff1a;反向输出一个四位数 废话不多说&#xff0c;上题目&#xff1a; 解题思路&#xff1a; 我们发现可以用%和/两个操作符就可以解决。 代码如下: int main() {int a 0;scanf("%d ",& a);while (a){printf("%d "…

香港 Web3 的分岔路口:to 创新 or to 监管,这并不是一个问题

撰文&#xff1a;Babywhale&#xff0c;Techub News 香港 Web3 的分岔路口&#xff1a;to 创新 or to 监管&#xff0c;这并不是一个问题 刚刚过去的周末&#xff0c;香港虚拟资产交易平台&#xff08;VATP&#xff09;牌照相关的问题再一次引发了讨论。 一年多前&#xff0c…

word模板内容替换

1.pom引入依赖&#xff1a; <dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>3.0.5</version> </dependency> <dependency><groupId>com.deepoove</groupId><a…

【Vue】普通组件的注册使用-全局注册

文章目录 一、使用步骤二、练习 一、使用步骤 步骤 创建.vue组件&#xff08;三个组成部分&#xff09;main.js中进行全局注册 使用方式 当成HTML标签直接使用 <组件名></组件名> 注意 组件名规范 —> 大驼峰命名法&#xff0c; 如 HmHeader 技巧&#xf…