vue标签选择器（前端知识点（深入理解前端技术））

本文目录

• 前端知识点（深入理解前端技术）
• vue+element中怎么利用change事件，使选择器选中某一个值之后，弹出另一个选择器
• vue2.x和vue3.0在scss样式中使用深度选择器的区别
• vue操作下拉选择器获取选择的数据的id方法

前端知识点（深入理解前端技术）

1.前言

在当今互联网时代，前端技术的发展迅猛。作为用户与网站交互的第一线，前端工程师承担着重要的责任。然而，仅仅掌握表面知识是远远不够的。要成为一名优秀的前端工程师，我们需要深入理解前端技术，掌握其核心概念和原理。本文将带你深入探索前端技术的知识点，帮助你更好地理解和应用前端技术。

2.前端技术的发展历程

前端技术的发展经历了多个阶段。最早的前端技术主要是HTML和CSS，用于描述网页的结构和样式。随着JavaScript的出现，前端技术开始具备了交互能力。后来，前端框架的出现进一步简化了前端开发流程，提高了开发效率。现在，前端技术已经涵盖了众多的技术栈，如React、Vue、Angular等，使得前端工程师能够构建复杂的Web应用。

3.深入理解HTML

HTML是前端技术的基础，它用于描述网页的结构。HTML由一系列的标签组成，每个标签都有特定的含义。在深入理解HTML时，我们需要了解HTML的基本结构、常用标签以及标签的属性。

3.1HTML的基本结构

HTML的基本结构包括DOCTYPE声明、html标签、head标签和body标签。DOCTYPE声明用于告诉浏览器使用哪个HTML版本解析网页。html标签是HTML文档的根元素，head标签用于定义文档的头部信息，body标签用于定义文档的主体内容。

```html

深入理解前端技术

欢迎阅读本文

本文将带你深入理解前端技术的知识点。

```

3.2常用HTML标签

HTML有很多常用的标签，如标题标签（h1-h6）、段落标签（p）、链接标签（a）、图像标签（img）等。这些标签用于定义不同类型的内容，使得网页更加丰富多样。

```html

这是一个标题

这是一个段落

这是一个链接

```

3.3标签属性

HTML标签可以包含属性，属性用于定义标签的额外信息。常用的属性有class、id、style等。class属性用于指定标签的类名，id属性用于指定标签的唯一标识符，style属性用于指定标签的样式。

```html

这是一个带有样式的段落

```

4.深入理解CSS

CSS用于描述网页的样式，它与HTML相互配合，使得网页更加美观。在深入理解CSS时，我们需要了解CSS的基本语法、选择器以及常用样式属性。

4.1CSS的基本语法

CSS的基本语法由选择器和声明块组成。选择器用于选择需要应用样式的HTML元素，声明块用于定义元素的样式。

```css

h1{

color:red;

font-size:24px;

}

```

4.2常用CSS选择器

CSS选择器用于选择HTML元素，常用的选择器有标签选择器、类选择器、ID选择器等。标签选择器用于选择指定标签的元素，类选择器用于选择指定类名的元素，ID选择器用于选择指定ID的元素。

```css

h1{

color:red;

}

.highlight{

background-color:yellow;

}

paragraph{

font-size:18px;

}

```

4.3常用CSS样式属性

CSS样式属性用于定义元素的样式，常用的样式属性有color、font-size、background-color等。这些样式属性可以通过CSS选择器来选择元素，并为其应用样式。

```css

h1{

color:red;

font-size:24px;

}

p{

background-color:yellow;

}

```

5.深入理解JavaScript

JavaScript是一种脚本语言，用于为网页添加交互功能。在深入理解JavaScript时，我们需要了解JavaScript的基本语法、数据类型、函数以及DOM操作。

5.1JavaScript的基本语法

JavaScript的基本语法包括变量、运算符、条件语句、循环语句等。变量用于存储数据，运算符用于进行数学和逻辑运算，条件语句用于根据条件执行不同的代码块，循环语句用于重复执行代码块。

```javascript

varx=10;

vary=20;

varsum=x+y;

if(sum》30){

console.log("sum大于30");

}else{

console.log("sum小于等于30");

}

for(vari=0;i《5;i++){

console.log(i);

}

```

5.2JavaScript的数据类型

JavaScript有多种数据类型，包括数字、字符串、布尔值、数组、对象等。不同的数据类型适用于不同的场景，我们可以根据需要选择合适的数据类型。

```javascript

varage=18;

varname="张三";

varisMale=true;

varnumbers=;

varperson={

name:"张三",

age:18

};

```

5.3JavaScript的函数

JavaScript的函数用于封装可重用的代码块，使得代码更加模块化。函数可以接受参数，执行特定的操作，并返回结果。

```javascript

functionadd(x,y){

returnx+y;

}

varsum=add(10,20);

console.log(sum);//输出30

```

5.4JavaScript的DOM操作

DOM操作是JavaScript中重要的一部分，它允许我们通过JavaScript来操作网页的结构和样式。我们可以通过DOM操作来获取元素、修改元素的属性和样式、添加或删除元素等。

```javascript

varelement=document.getElementById("myElement");

element.style.color="red";

varnewElement=document.createElement("p");

newElement.textContent="这是一个新的段落";

document.body.appendChild(newElement);

```

vue+element中怎么利用change事件，使选择器选中某一个值之后，弹出另一个选择器

在@change事件里用v-if判断就好了。先过去第一个选择器的key值，假如是第二个，那当key===2的时候就把v-if对应的参数改成true即可。

vue2.x和vue3.0在scss样式中使用深度选择器的区别

在vue 2.x中，使用scss时，深度选择器是 ::v-deep ，

在vue3.0中，由于 ::v-deep 已被弃用，采用一种新的语法。如果在vue3.0中使用 ::v-deep ，没有任何效果，也不会报错，就是在编译的时候会有一个警告。提示 ::v-deep 已被弃用，请使用 :deep(Selector) 代替。

这样写的话警告就没有了。同时样式生效。

vue操作下拉选择器获取选择的数据的id方法

实际项目中我们获取选择的数据的id；这时候
需要配合使用v-bind，才能获取到选择的那条数据的id值，其实就是id赋值给value属性
《template》
《div》
《select
v-model="select"
》
《option
v-for="(a,index)
in
arr"
:key="index"
:value="a.id"》{{
a.name
}}《/option》
《/select》
《p》您选择的名字的Id是：{{select}}《/p》
《/div》
《/template》
js代码
《script》
export
default
{
data(){
return{
select:’’,
arr:[
{id:’1’,name:’html’},
{id:’2’,name:’css’},
{id:’3’,name:’js’},
]
}
}
}
《/script》
拓展知识：vue获取id以及重定向路由方法
1.获取ID的方法：
let
orderId=this.$route.query.id;
2.路由重定向方法
this.$router.push(this.$route.query.redirect
||
’/login’)
以上这篇vue操作下拉选择器获取选择的数据的id方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:Vue.js获取被选择的option的value和text值方法vue如何通过id从列表页跳转到对应的详情页vue实现在表格里,取每行的id的方法