Vue知识学习

Vue 是什么？

概念：Vue 是一个用于构建用户界面的渐进式框架

Vue 的两种使用方式:

① Vue 核心包开发 场景:局部 模块改造 ② Vue 核心包& Vue插件工程化开发 场景:整站开发

创建Vue 实例，初始化渲染的核心步骤:

1.准备容器 2.引包(官网) - 开发版本/生产版本 3.创建 Vue 实例new Vue() 4.指定配置项el data =>渲染数据 ① el指定挂载点，选择器指定控制的是哪个盒子 ② data 提供数据

<div id="app">
<!-- 这里将来会编写一些用于渲染的代码逻辑 -->
<h1>{{ msg }}</h1>
{{ count }}</div>
​
<!-- 引入的是开发版本包-包含完整的注释和警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
<script>
// 一旦引入 VueJS核心包，在全局环境，就有了 Vue 构造函数 
const app = new vue({
// 通过 el 配置选择器，指定Vue管理的是哪个盒子 
el:'#app',
// 通过 data 提供数据 
data: {
msg:'Hello 传智播客'， 
count: 666}
}

插值表达式 {{ }}

插值表达式是一种Vue 的模板语法

作用：利用表达式进行插值，渲染到页面中。

表达式:是可以被求值的代码，JS引擎会将其计算出一个结果

money +100  
money - 100 
money* 10   
money / 10  
price >= 100 ? '真贵’:'还行'    
obj.name    
arr[0]  
fn( )   
obj.fn()

注意点:

  1. 使用的数据必须存在(data)

  2. 支持的是表达式，而非语句，比如:if for ...

  3. 不能在标签属性中使用{{}}插值

<p> title="{{ username }}">我是p标签</p>//这是错的。

响应式

1.什么是响应式呢?

数据改变，视图自动更新（网页上的数据表示改变） 使用 Vue 开发→专注于业务核心逻辑 即可

2.如何访问或修改数据呢?

data中的数据,最终会被添加到实例上 ①访问数据:"实例.属性名" ②修改数据:"实例.属性名"="值"

Vue 指令

Vue会根据不同的【指令】，针对标签实现不同的【功能】

指令：带有v- 前缀 的特殊标签属性

v-html

作用：设置元素的innerHTML

语法:v-html="表达式"

<div v-html="str"></div>

v-show

作用:控制元素显示隐藏

语法:v-show="表达式"表达式值 true 显示，false 隐藏

原理: 切换 display:none控制显示隐藏

v-if

作用:控制元素显示隐藏(条件渲染)、

语法:v-if="表达式" 表达式值 true 显示，false 隐藏

原理:基于条件判断，是否创建 或 移除元素节点

场景:要么显示，要么隐藏，不频繁切换的场景驱

与v-show不同的是非隐藏，是消失。

v-else、v-else-if

作用: 辅助v-if进行判断渲染

语法:v-else v-else-if="表达式"

注意:需要紧挨着v-if一起使用

<p v-if="score >= 90">成绩评定A:奖励电脑一台</p >
<p v-else-if="score >= 70">成绩评定B:奖励周末</p >
<p v-else-if="score >= 60">成绩评定C:奖励零食</p >
<p v-else>成绩评定D:惩罚一周不能玩手机</p >

v-on

作用: 注册事件= 添加监听 + 提供处理逻辑

语法: ①v-on:事件名="内联语句" ②v-on:事件名="methods中的函数名"

简写: @事件名

<button v-on:click="count++">按钮</button>
<button @click="count++">按钮</button>=
<button @click="fn">-</button>
​
const app = new vue({   
el: '#app',
data:{  
// 提供数据
count: 100
}
methods: {  
// 提供处理逻辑函数fn () {console.log('提供逻辑代码')}
}
}）

v-on 调用传参

<button @click=' fn(参数1,参数2)"> 按钮</button>
const app = new vue({
el: '#app', 
methods:{
fn (a, b) {
console.Iog('这是一个fn函数')}
}
})

v-bind

作用:动态的设置html的标签属性→ src url title ...

语法:v-bind:属性名="表达式"

注意:

简写形式 :属性名="表达式"

<div id="app">
<img v-bind:src="url"></div>
const app = new vue({ 
el: '#app', 
data: {
url:'图片路径'
}
})

v-bind 对于样式控制的增强- 操作class

语法:class = "对象/数组"

1.对象 → 键就是类名，值是布尔值。如果值为true，有这个类，否则没有这个类

<div class="box" :class="{ 类名1:布尔值，类名2:布尔值}"></div>

适用场景:一个类名，来回切换

2.数组 → 数组中所有的类，都会添加到盒子上，本质就是一个 class 列表

<div class="box" :class="[ 类名1，类名2，类名3 ]"></div>

适用场景:批量添加或删除类

<div class="box" :class="{ pink: true,rbig:true }">黑马程序员</div>
<div class="box" :class="['pink', 'big']">黑马程序员</div>

v-bind 对于样式控制的增强-操作style

语法 :style = "样式对象"

<div class="box" :style="{ CsS属性名1:CSS属性值，CSS属性名2:CSS属性值}"></div>

适用场景:某个具体属性的动态设置

v-for

作用: 基于数据循环，多次渲染整个元素→数组、对象、数字...

遍历数组语法:

v-for = "(item, index) in 数组"

item 每一项，index 下标

可以省略index:

v-for= "item in 数组"

v-for 中的 key

key作用:给元素添加的唯一标识。

不加 key时，v-for 的默认行为会尝试原地修改元素(就地复用)

注意点:

  1. key 的值只能是字符串 或 数字类型

  2. key 的值必须具有唯一性

  3. 推荐使用 id 作为key(唯一)，不推荐使用index作为key(会变化，不对应)

<li v-for="(item, index) in xxx" :key="唯一值">

v-model

作用: 给 表单元素 使用，双向数据绑定→可以快速获取 或 设置表单元素内容 ①数据变化→视图自动更新 ②视图变化→数据自动更新

语法：v-model='变量'

v-model 应用于其他表单元素

常见的表单元素都可以用v-model绑定关联→快速 获取 或 设置 表单元素的值

它会根据控件类型自动选取正确的方法来更新元素

输入框 input:text →value 文本域 textarea →value 复选框input:checkbox→ checked 单选框input:radio → checked 下拉菜单 select →value ...

前置理解:
1. name: 给单选框加上name属性可以分组→同一组互相会互斥
2.value: 给单选框加上value属性，用于提交给后台的数据结合 Vue 使用→v-model
性别:
<input v-model="gender" type="radio" name="gender" value="1">男
<input v-model="gender" type="radio" name="gender" value="2">女
前置理解:
1. option 需要设置 value 值，提交给后台
2. select 的 value 值，关联了选中的option 的 value 值结合 Vue 使用→ v-model 
所在城市:
<select v-model="cityId">
<option value="101">北京<ioption>
<option value="102">上海</option>
<option value="103">成都</option>
<option value="104">南京</option>

指令修饰符

通过"."指明一些指令 后缀，不同后缀封装了不同的处理操作→简化代码

①按键修饰符

@keyup.enter →键盘回车监听

②v-model修饰符

v-model.trim →去除首尾空格 v-model.number→转数字

③事件修饰符

@事件名.stop→阻止冒泡 @事件名.prevent →阻止默认行为

计算属性

概念:基于现有的数据，计算出来的新属性。依赖的数据变化，自动重新计算。

语法:

①声明在computed配置项中，一个计算属性对应一个函数

②使用起来和普通属性一样使用{{计算属性名}}

computed: {
计算属性名(){
基于现有数据，编写求值逻辑 return 结果}
}

computed 计算属性 vs methods 方法

computed 计算属性:

作用:封装了一段对于数据的处理，求得一个结果。

缓存特性(提升性能):

语法: 计算属性会对计算出来的结果缓存，再次使用直接读取缓存，

①写在computed 配置项中 依赖项变化了，会自动重新计算→并再次缓存 ②作为属性，直接使用→this.计算属性 {{计算属性 }}

methods 方法:

作用:给实例提供一个方法，调用以处理业务逻辑。

语法:

①写在methods 配置项中 ②作为方法，需要调用→ this.方法名() {{ 方法名()}} @事件名="方法名"

计算属性完整写法

计算属性默认的简写，只能读取访问，不能"修改"。

如果要"修改"→ 需要写计算属性的完整写法。

watch 侦听器(监视器)

作用:监视数据变化，执行一些业务逻辑 或异步操作。

语法:

①简单写法→ 简单类型数据，直接监视

data: { words:'苹果'， 
obj: {words:'苹果'  }
},
watch: {
// 该方法会在数据变化时，触发执行  
数据属性名(newValue,oldValue){   
一些业务逻辑 或异步操作。
},
'对象.属性名’(newValue, oldValue) {一些业务逻辑或异步操作。
}

② 完整写法→添加额外配置项

(1) deep: true对复杂类型深度监视

(2) immediate: true 初始化立刻执行一次handler方法

data: { obj: {  words:'苹果'， ang:'italy'},
},
watch: {// watch完整写法    
数据属性名:{ 
deep: true， // 深度监视 
immediate: true，// 是否立刻执行一次handler handler (newValue) { 
console.log(newValue)
}}}

Vue 生命周期

Vue生命周期：一个Vue实例从创建 到销毁的整个过程。

Vue 生命周期函数(钩子函数) Vue生命周期过程中，会自动运行一些函数，被称为【生命周期钩子】→让开发者可以在【特定阶段】运行自己的代码。

created: 响应式数据准备好了，可以开始发送初始化渲染请求。 mounted: 模板渲染完成，可以开始操作DOM了。

ECharts

  1. 引入 ECharts 库：在 HTML 文件中引入 ECharts 的库文件，可以通过 CDN 或者下载本地文件的方式引入。示例代码如下：

<script src="https://cdn.jsdelivr.net/npm/echarts@5.5.0/dist/echarts.min.js"></script>

  1. 准备一个具有固定大小的 DOM 容器用于放置图表，示例代码如下：

<div id="chart" style="width: 600px; height: 400px;"></div>

  1. 初始化 ECharts 实例：在 JavaScript 代码中初始化 ECharts 实例，并将其与之前准备好的 DOM 容器关联。示例代码如下：

var myChart = echarts.init(document.getElementById('chart'));

  1. 配置图表选项：根据需求配置图表的数据和样式，例如设置标题、图例、数据系列等。示例代码如下：

var option = {title: {text: '示例图表标题'},xAxis: {type: 'category',data: ['A', 'B', 'C', 'D', 'E', 'F']},yAxis: {type: 'value'},series: [{data: [10, 20, 30, 40, 50, 60],type: 'bar'}]
};
​

  1. 渲染图表：将配置好的选项应用到 ECharts 实例中，并渲染出图表。示例代码如下：

myChart.setOption(option);

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

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

相关文章

web基础及http协议 （二）----------Apache相关配置与优化

web基础及http协议 （二）----------Apache相关配置与优化

一、httpd 安装组成 http 服务基于 C/S 结构 1 .常见http 服务器程序 httpd apache&#xff0c;存在C10K&#xff08;10K connections&#xff09;问题 nginx 解决C10K问题lighttpd IIS .asp 应用程序服务器 tomcat .jsp 应用程序服务器 jetty 开源的servlet容器&#xf…
阅读更多...
2个wordpress优化SEO主题模板

2个wordpress优化SEO主题模板

SEO优化wordpress主题 简洁的SEO优化wordpress主题&#xff0c;效果好不好&#xff0c;结果会告诉你&#xff0c;适合SEO公司使用的主题。 https://www.jianzhanpress.com/?p2804 SEO优化海外WordPress主题 简洁的SEO优化海外服务商WordPress主题&#xff0c;为中国制造202…
阅读更多...
十八、图像像素类型转换和归一化操作

十八、图像像素类型转换和归一化操作

项目功能实现&#xff1a;对一张图像进行类型转换和归一化操作 按照之前的博文结构来&#xff0c;这里就不在赘述了 一、头文件 norm.h #pragma once#include<opencv2/opencv.hpp>using namespace cv;class NORM { public:void norm(Mat& image); };#pragma once二…
阅读更多...
【EI会议征稿通知】2024年软件自动化与程序分析国际学术会议（SAPA 2024)

【EI会议征稿通知】2024年软件自动化与程序分析国际学术会议（SAPA 2024)

2024年软件自动化与程序分析国际学术会议&#xff08;SAPA 2024) 2024 International Conference on Software Automation and Program Analysis 在当今科技社会中&#xff0c;软件产业呈快速发展趋势&#xff0c;软件自动化与程序分析技术在提高软件质量、降低开发成本、提升…
阅读更多...
如何使用Express框架构建一个简单的Web应用

如何使用Express框架构建一个简单的Web应用

在这个数字化时代&#xff0c;Web应用的需求越来越多样化和复杂化。在前端开发领域&#xff0c;Express框架作为一个快速、灵活的Node.js Web应用程序框架&#xff0c;拥有强大的功能和丰富的生态系统&#xff0c;深受开发者们的青睐。本篇博客将带您一步步探索如何使用Express…
阅读更多...
Spring之AOP源码解析(上)

Spring之AOP源码解析(上)

Aop相关注解 EnableTransactionManagementEnableAspectJAutoProxyEnableAsync... 从注解切入来看看这些注解都干了什么 Import注解作用简述 注入的类一般继承ImportSelector或者ImportBeanDefinitionRegistrar接口 继承ImportSelector接口&#xff1a;selectImports方法返回…
阅读更多...
通信入门系列——锁相环、平方环、Costas环

通信入门系列——锁相环、平方环、Costas环

微信公众号上线&#xff0c;搜索公众号小灰灰的FPGA,关注可获取相关源码&#xff0c;定期更新有关FPGA的项目以及开源项目源码&#xff0c;包括但不限于各类检测芯片驱动、低速接口驱动、高速接口驱动、数据信号处理、图像处理以及AXI总线等 本节目录 一、锁相环 1、压控振荡…
阅读更多...
设计模式-创建型模式-原型模式

设计模式-创建型模式-原型模式

原型模式&#xff08;Prototype Pattern&#xff09;&#xff1a;使用原型实例指定创建对象的种类&#xff0c;并且通过克隆这些原型创建新的对象。原型模式是一种对象创建型模式。原型模式其实就是从一个对象再创建另外一个可定制的对象&#xff0c;而且不需知道任何创建的细节…
阅读更多...
初识表及什么是数据表

初识表及什么是数据表

一、了解表 1.1.概述 表是处理数据和建立关系型数据库及应用程序的基本单元&#xff0c;是构成数据库的基本元素之一&#xff0c;是数据库中数据组织并储存的单元&#xff0c;所有的数据都能以表格的形式组织&#xff0c;目的是可读性强。 1.2.表结构简述 一个表中包括行和列…
阅读更多...
C# OpenCvSharp 利用白平衡技术进行图像修复

C# OpenCvSharp 利用白平衡技术进行图像修复

目录 效果 灰度世界(GrayworldWB)-白平衡算法 完美反射(SimpleWB)-白平衡算法 基于学习的(LearningBasedWB)-白平衡算法 代码 下载 C# OpenCvSharp 利用白平衡技术进行图像修复 OpenCV xphoto模块中提供了三种不同的白平衡算法&#xff0c;分别是&#xff1a;灰度世界(G…
阅读更多...
qml 保存当前界面并在其图片中添加文字

qml 保存当前界面并在其图片中添加文字

使用场景&#xff1a;在保存二维码的时候&#xff0c; 在二维码图片加标题或描述 保存后的图片 demo&#xff1a;https://download.csdn.net/download/uVarAndMethod/88868455
阅读更多...
【AIGC】Gemma和ChatGLM3-6B使用体验

【AIGC】Gemma和ChatGLM3-6B使用体验

近期&#xff0c;谷歌发布了全新的开源模型Gemma&#xff0c;同时智谱AI和清华大学KEG实验室合作推出了ChatGLM3-6B。这两个模型都是先进的对话预训练模型&#xff0c;本文将对它们进行对比&#xff0c;并分享使用体验。 先上效果 ChatGLM3-6B: ChatGLM3 Gemma(20亿参数)&…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023