Vue入门到精通（持续更新）2023/12/12

Msir_Modern

已于 2023-12-12 00:22:04 修改

阅读量91

点赞数 1

分类专栏： VUE基础学习文章标签： vue.js 前端 javascript

于 2023-12-02 22:19:47 首次发布

本文链接：https://blog.csdn.net/weixin_43010844/article/details/134753361

版权

VUE基础学习专栏收录该内容

9 篇文章 1 订阅

订阅专栏

Vue项目的目录结构

	.vscode	--vscode工具的配置文件夹
	node_modules	--vue项目的运行依赖文件
	public	--资源文件夹（浏览器图标）
	src	--源码文件夹
	.gitignore	--git忽略文件
	index.html	-- 入口的html文件
	package.json	--信息描述文件
	README.md	--注释文件
	vite.config.js	-- vue的配置文件

入口HTML文件：

编译出来的js文件和初始化的html结构写在这里，所有代码都将在这个文件中运行

<!DOCTYPE html
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico” />
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js">
</script>
<body>
</html>

package.json项目结构

{
"name" :"vue-base", /*项目名*/
"version":"0.0.0",	/*版本信息*/
/*项目如何运行*/
"scripts":{
	"dev":"vite",
	"build":"vite build"
	"preview":"vite preview --port 4173"
	),
/*项目依赖*/
"dependencies":"^3.2.37"
'devDependencies": 开发环境依赖"^3.8.1"'@vitejs/plugin-vue"'vite":"^3..4" 脚手架
	}
}

模板语法

vue使用一种基于HTML的模板语法，使我们能够声明式地将其组件实例的数据绑定到呈现的DOM上。所有的Vue模板都是语法层面合法的HTML，可以被符合规范的浏览器和HTML解析器解析

文本插值

最基本的数据绑定形式是文本插值，它使用的是“Mustache"语法（即双大括号）

<template>
  <h3>模板语法</h3> 
  <p>{{msg}}</p>  <!-- 插值 -->
  <p>{{hello}}</p>
</template>

<script>
export default{
	data(){
		
		return{
			msg:"插值语法",
			hello:"Hello World"
		}
	}
}
</script>

<style>
/* 在这里添加全局样式 */
</style>

运行代码会发现{{msg}}的值被正确赋予了

使用JavaScript表达式

每个绑定仅支持单一表达式，也就是一段能够被求值的javascript代码。一个简单的判断方法是是否可以合法地写在return后面

<template>
  <p>{{math +1 }}</p><!-- 运算 -->
  <p>{{(math==10)?"等于10":"不等于10" }}</p><!-- 三段式 -->
  <p>{{msg.split(".").reverse().join(".")}}</p>
</template>

<script>
export default{
	data(){
		
		return{
			msg:"插值语法",
			hello:"Hello World",
			math:10,
			msg:"大.家.好"
		}
	}
}
</script>

在这里插入图片描述

原始HTM

双大括号会将数据插值为纯文本，而不是HTML。若想插入HTML，你需要使用v-html指令
示范：

<p v-html="rawHTML"></p>

<script>
export default{
	data(){
		
		return{
			rawHTML:"<a href=baidu.com">百度百科</a>
		}
	}
}
</script>

在这里插入图片描述

效果：

在这里插入图片描述

列表渲染

我们可以使用v-for指令基于一个素组来渲染一个列表，v-for指令的值需要使用item in items形式的特殊语法，其中items 是数据源数据的数组，而item是迭代项的别名

<p v-for="item in items"></p>

<script>
export default{
	data(){
		
		return{
			items:["element1","element2","element3","element4"]
		}
	}
}
</script>

2、也可以使用

v-for=”item of items”

这样更符合js的标准

3、Item可以有三个属性，分别对应值，键，下标（value,key,index）

v-for=”(value,key,index) of items”

4、两个参数

v-for=”(value,index) of items”

通过key管理状态

Vue 默认按照“就地更新”的策略来更新通过v-vor 染的元素列表。当数据项的顺序改变时，Vue 不会随之移动 DOM 元素的顺序，而是就地更新每个元素，确保它们在原本指定的索引位置上渲染。为了给 Vue 一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute:
在这里插入图片描述

2、Key的来源

请不要使用index作为key的值，我们要确保每一条数据的唯一索引不会发生变化（一般采用数据的唯一索引ID来标识Key）

事件参数

1、事件参数可以获取event对象和通过事物传递数据

2、获取event对象

Function(e)
其中e，即event是原生js的event对象，可以通过e.target等方法来获取属性
E为function的默认参数，无需在引用中声明也可以调用
在这里插入图片描述

3、传递参数

在这里插入图片描述

4、传递参数过程中获取Event

a) 用‘$event‘修饰符修饰参数即可获取event对象
b) $e v e n t 不能在第一个参数 c) G e tN am eH an d l e (nam e,$ event)

事件修饰符

在这里插入图片描述

参考地址：https://cn.vuejs.org.guide/essentials/event-handling.html#event-modifiers
e.Stop:阻止事件冒泡
e.Prevent:阻止默认事件
e.Once:事件只会被触发一次
e.Enter：回车案件触发

2、事件冒泡

有父子关系的组件同时具备了点击事件时，当点击子组件父组件的点击事件也会随之冒泡响应

数组变化侦听

1、变更方法

a) 引起UI自动更新
b) 在这里插入图片描述

2、替换一个数组

a) 不会引起UI自动更新
b) 在这里插入图片描述

3、使用concat()数组赋值且更新UI
a) This.name = this.name.concat(“value”);

Class绑定

一、 Class绑定

1、说明

数据绑定的一个常见需求场景是操纵元素的 CSS class 列表因为 class 是 attribute，我们可以和其他atribute 一样使用 v-bind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 class 的 v-bind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组

2、代码展示

<template>
   <!--class绑定-->>
   <p :class="{'active':isActive,'text-danger':hasError}"> Class样式绑定1</p>
   <!-- class引用关系绑定 -->
   <p :class="classobject">Class样式绑定2</p>
   <!--数组绑定-->
   <p :class="[activeClass]">Class样式绑定3</p>
</template>

<script>
export default {
data(){
return{
isActive:true,
hasError:true,
classObject:f
   'active':true,
   'text-danger':true
},
activeClass:["active1","active2"]
}
}
</script>

3、有条件的渲染某个class

如果你也想在数组中有条件的渲染某个class，你可以使用三元表达式bool?expre1:expre2

<p :class="[isTrue?'active1':'active2']"> 样式</p>

4、数组和对象的嵌套使用

<template>
    <p :class="[{'active':isActive},errorClass]"></p>
</template>

温馨提示
素组和对象嵌套中，只能说数组嵌套对象，不能反其道而行

Style 绑定

1、说明
数据绑定的一个常见需求场景是操纵元素的 CSS style列表，因为 style 是attribute，我们可以和其他atribute 一样使用 v-ind 将它们和动态的字符串绑定。但是，在处理比较复杂的绑定时，通过拼接生成字符串是麻烦且易出错的。因此，Vue 专门为 style 的 v-ind 用法提供了特殊的功能增强。除了字符串外，表达式的值也可以是对象或数组

2、代码展示

<template>
    <!--正常写-->
    <p :sytle="{color:'red',FontSize:'30px'}"> Style绑定1</p>
    <!--动态绑定-->
    <!--这里的size是没有单位的，所以要在后面增加单位px-->
    <p :sytle="{color:activeColor}"> Style绑定2</p>
    <!--更简便的写法，直接引用了对象-->
    <p :sytle="styleObject"> Style绑定3</p>
    <!--绑定一个含多个样式的数组-->
    <p :sytle="[styleObject,background]"> Style绑定3</p>
    
    <p>Class样式绑定2</p>
    <p>Class样式绑定3</p>
</template>

<script>
export default {
    data(){
        return{
            activeColor:"green"
            size:30
            styleObject:{
                color:"red",
                fontSize:"30px"
            },
            baseStyle:{
                background:black
            }
        }
    }
}
</script>