前端vue与js知识点

day1

什么是HTML
HTML :超文本标记语言(HTML HyperText Markup Language )。
HTML文档是一个放置了标记（tags）的.html文件（.htm）。是一种客户端浏览器解释的语言，不用经过编译。
HTML语言是通过各种标记来标识文档的结构，以及标识超链接、图片、文字、段落、表单等信息。
写出HTML文档基本结构

html 复制代码

	<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div></div>
	</body>
</html>

meta标签作用是什么

meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
什么是绝对路径与相对路径
1. 绝对路径：以最原始位置为基准。
  ○ 如果访问本机资源，以盘符开始：D:/javaspace/JDBCTest/src/test/index.jpg
  ○ 如果访问非本机资源，以网络协议开始：http://hao.360.cn/admin/admin.html
2. 相对路径：以当前位置为基准（例如：当前位置是test），而且不能以 / 开始。
什么是css

CSS：层叠样式表(英文全称：Cascading Style Sheets)：

是一种用来表现HTML样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
css选择器有哪些

基本选择器：类选择器，ID选择器，标签选择器

层次选择器：后代选择器，子代选择器，群组选择器

伪类选择器：first-of-type,last-of-type,nth-of-type()。
css的引入方式有哪些

行内样式，内嵌样式，外部样式
简述css优先级规则

a：基本规则
1. 从引用方式方面来说：行内样式 > 内嵌样式/外部样式
2. 从选择器方面来说：ID 选择器 > 类选择器（属性选择器、伪类选择器） > 标签选择器
  b:样式叠加时
  ● 就近原则：距离最近的样式有效。
  ● 顺序原则：这里的顺序是指的书写顺序，也就是最后书写(不是调用)的样式有效。
  ● 精细原则：或者叫特殊原则。既选择器的指向越精细越优先。
简述css继承规则
1. 子标签可以继承父标签的样式风格
2. 子标签的样式不会影响父标签的样式风格
3. 一般只有文字文本具有继承特性，如文字大小、文字加粗、文字颜色、字体等。
css颜色写法有哪几种
1. 使用英文单词作为颜色值：如：red、green、blue、black、white、yellow ...
2. 使用十六进制的颜色值：如：#000000 #FFFFFF #45F87E
  （其中前两位表示红色，中间两位表示绿色，最后两位表示蓝色。也可以使用简写：#FF0088 -> #F08）
盒子模型总尺寸怎么计算

● 盒子模型总尺寸=border（两个边框宽度）+padding（两个内边距宽度）+内容宽度
盒子模型占用空间怎么计算

盒子模型占用空间=margin（两个外边距宽度）+盒子模型总尺寸

day2

1、css定位分那些分别什么特点

static：静态定位（默认）。依据文档流定位。
relative：相对定位。以自身为基准，设置坐标（left、top、right、bottom），不脱离文档流。
absolute：绝对定位。以父元素为基准，设置坐标（left、top、right、bottom），脱离文档流。
fixed：固定定位。以浏览器窗口为基准，设置坐标（left、top、right、bottom），脱离文档流。

2、什么是边框盒子

CSS中一种用来定义元素边框、内边距和内容尺寸的盒子模型。

边框盒子的总体尺寸不会受到边框、或内边距的影响，总体尺寸始终等于width与height的设置。

3、怎样指定弹性布局

a.设置父容器的display属性为flex；

b.确定主轴方向（水平或垂直）：指定父容器的flex-direction属性来确定主轴的方向。默认值是row。

c.设置弹性元素的宽度或高度：弹性元素是子元素，通过设置它们的flex属性来确定它们在主轴上所占据的空间比例。

d.调整子元素在主轴和交叉轴上的对齐方式：可以使用justify-content属性来调整子元素在主轴上的对齐方式，使用align-items属性来调整子元素在交叉轴上的对齐方式。

4、js函数如何定义

第一种方式： function 函数名( ){ //函数体; }

第二种方式： let 函数名 = function(){ //函数体; }

5、js数组遍历方式有哪些

bash 复制代码

           var arr = ['a', 'b', 'c', 'd'];
           console.log(arr);                      //直接打印内容  (4) ["a", "b", "c", "d"]
          --------------------------------- for 循环 ------------------------------------------
           // for 循环 
           for (var i = 0; i < arr.length; i++) {
               console.log(i + ":" + arr[i]);     //0:a 1:b 2:c 3:d
           }
          --------------------------------- while循环 --------------------------------------
           //while循环
           var i = arr.length;
           while (i--) {
               console.log(i + ":" + arr[i]);     //倒叙 3:d 2:c 1:b 0:a
           }
          ---------------------------------- for...of ----------------------------------------
           //for...of
           //输出内容
           for (let item of arr) {
               console.log(item);                 //获取值 a b c d
           }
            
           // 输出数组索引
           for (let index of arr.keys()) {
               console.log(index);                // 0 1 2 3
           }
           
           // 输出内容和索引 
           for (let [index, item] of arr.entries()) {
               console.log(index + ':' + item);   // 0:a 1:b 2:c 3:d
           }

          -------------------------------- for...in ----------------------------------------
           //for...in
           //遍历普通数组
           for (let index in arr) {
               console.log(index + ":" + arr[index]); //0:a 1:b 2:c 3:d
           }
           //遍历对象
           let obj = {
               name: 'zhangsan',
               age: '18',
               weight: '70kg'
           }

           for (var key in obj) {
               console.log(key + ":" + obj[key]); // name:zhangsan age:18 weight:70kg 
           }

          ---------------------------------- forEach函数 ----------------------------------
           //forEach函数
           arr.forEach(function(item, index, array) {
               console.log(array);
               console.log(index + ":" + item);   //0:a 1:b 2:c 3:d
           })

          --------------------------------- map函数 ---------------------------------------
           //map函数（返回一个新数组）
           //遍历普通数组
           let newArr = arr.map(function(item, index) {
               console.log(index + ":" + item);   //0:a 1:b 2:c 3:d
           })

           //遍历对象数组
           var user = [
                         {name:'zs',age:'18'}, 
                         {name:'ls',age:'19'}, 
                         {name:'ww',age:'20'} 
                       ];
           user.map(function(item, index) {
               console.log(index + "." + item.name + ":" + item.age); 
               // 0.zs:18   1.ls:19   2.ww:20
           })

          -------------------------------- filter函数 ---------------------------------------
           //filter函数
           var newfarr = arr.filter(function(item, index) {
               console.log(index + ":" + item);   //0:a 1:b 2:c 3:d
               return item == 'a';
           })
           console.log(newfarr);                  //["a"]

          ----------------------------------- every函数 -------------------------------------    
           //every函数（所有都满足条件才为true）
           var arr = [5, 6, 7, 8]
           var result = arr.every(function(item, index) {
               console.log(index + ":" + item);   //0:5 1:6 2:7 3:8
               return item > 4
           })
           console.log(result);                    //true

          --------------------------------- some函数 -------------------------------------
           //some函数（只要有一个满足条件就为true）
           var arr = [1, 2, 3, 4]
           var r = arr.some(function(item, index) {
               console.log(index + ":" + item);    //0:1 1:2 2:3 3:4
               return item > 3 
           })
           console.log(r);                         //true

          --------------------------------- find函数 ------------------------------------
          //find函数（返回符合条件的第一个元素，如果没有符合条件的元素则返回 undefined）
         let arr = ['a', 'b', 'c', 'd'];
         var num = arr.find(function(item, index) {
                console.log(index + ":" + item); //0:a 1:b
                return item === 'b'; 
         })
         console.log(num);            //b

         --------------------------------- findIndex函数 ------------------------------------
          //findIndex函数 （返回符合条件的第一个元素的索引，如果没有符合条件的元素则返回 -1）
          let arr = ['a', 'b', 'c', 'd'];   
          let num = arr.findIndex(function (item,index) {
            console.log(index + ":" + item);  //0:a 1:b 2:c
            return item === 'c';
          }) 
          console.log(num);                   //2

day3

什么是BOM对象
浏览器对象模型BOM（Browser Object Model）：提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。
什么是DOM对象
文档对象模型DOM（Document Object Model）：定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
列出window对象的常用函数及其用法描述
alert() 显示带有一个提示信息和一个确定按钮的警示框
prompt()显示可提示用户输入的对话框
confirm()显示一个带有提示信息、确定和取消按钮的对话框
close()关闭浏览器窗口
open()打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout()在指定的毫秒数后调用函数或计算表达式（一次调用）。setTimeout("函数名()"，毫秒数)；
clearTimeout() setTimeout("函数名"，毫秒数)；clearTimeout() :取消定时器
setInterval() 按照指定的周期（以毫秒计）来调用函数或表达式；setInterval("函数名()",毫秒数)；
clearInterval() setInterval("函数名",毫秒数)； clearInterval()：取消定时器。
screenLeft()获取浏览器相对于屏幕左上角的x坐标
screenTop()获取浏览器相对于屏幕左上角的y坐标
刷新页面用什么方法
location.reload();
跳转到百度可以怎么写

html 复制代码

<button onclick="doReload()">刷新</button>
		<button onclick="toBaidu()">跳转</button>
		
		<script>
			function doReload(){
				location.reload();
			}
			function toBaidu(){
				location.href = 'http://www.baidu.com';
			}
			
		</script>

获取页面HTML元素的方法有哪些
1. document.documentElement 获取html对象
2. document.body 获取body对象
3. document.querySelector() 通过选择器获取一个DOM对象
4. document.querySelectorAll() 通过选择器获取一组DOM对象
如何给页面元素设置属性
a.通过DOM对象直接操作属性
document.getElementsByTagName('p')[0].id = 'one';
b.通过DOM对象中封装的方法操作属性 setAttribute() 设置元素的属性值
let useName = document.getElementsByTagName('input')[0];
useName.setAttribute('placeholder','请输入密码');
删除属性和获取属性的方法分别是什么
getAttribute() 获取元素的属性值 removeAttribute() 移除元素的属性值
useName.removeAttribute('disabled');
console.log(useName.getAttribute('type'));
如何让页面内容加载完成再去执行js代码
使用window.onload事件来确保页面的所有内容加载完成后再执行代码。window.onload事件在整个页面（包括图片、样式表、脚本等）都加载完成后触发。
innerHTML和innerText的区别是什么
innerHTML属性：用于设置或获取HTML 元素中的内容。
innerText属性：用于设置或获取HTML 元素中的纯文本。
回退到上一个页面可以怎么写

html 复制代码

<a href="javaScript:history.go(-1)">回退</a>

js中定时器什么设置，分别代表什么含义
setTimeout()函数能够在指定的时间间隔后，调用一个函数（此函数称为回调函数）。
setInterval()函数能够在指定的时间间隔后，调用一个函数（此函数称为回调函数）。
className代表什么
获取或设置HTML元素的class属性值

day4

给元素添加事件的方式有哪些
在javaScript中，给DOM元素绑定事件有三种方式：侵入式、绑定式、监听函数式。
1. 侵入式事件方式：将javaScript事件直接写在html标签中
2. 绑定式事件方式：通过DOM对象，使用javaScript代码绑定一个事件
3. 监听函数式事件方式：addEventListener函数
什么是事件冒泡和事件捕获
1. 当用户触发了子元素事件时，先触发子元素事件，再触发父元素事件。这就是事件冒泡。（默认）
2. 当用户触发了子元素事件时，先触发父元素事件，再触发子元素事件。这就是事件捕获
如何阻止事件冒泡
阻止事件冒泡: event.cancelBubble = true;
如何阻止浏览器默认行为
在事件处理函数中调用preventDefault方法即可。阻止默认行为: event.preventDefault();
如何获取键盘编码

html 复制代码

//获取键盘按键的keyCode
document.onkeydown = function(event){
    console.log(event.keyCode);
}

day5

分别定义一个json格式对象和对象数组
将上面json格式数据转换成json格式字符串
再将上面转完的字符串内容转为对象

bash 复制代码

	<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			let user = {
				uid: 1,
				uname: 'zs',
				uage: 20
			}
			let ustr = JSON.stringify(user)
			console.log(ustr)
			let users = JSON.parse(ustr)
			console.log(users)
			
			let userArr = [
				{
					uid: 1,
					uname: 'zs',
					uage: 20
				},
				{
					uid: 2,
					uname: 'ls',
					uage: 20
				},
				{
					uid: 3,
					uname: 'ww',
					uage: 20
				}
			]
			let uArr = JSON.stringify(userArr)
			console.log(uArr)
			let uArrs = JSON.parse(uArr)
			console.log(uArrs)
		</script>
	</body>
</html>

分别解释什么是会话存储和本地存储
会话存储SessionStorage : 从打开一个浏览器窗口开始，到此浏览器窗口关闭结束，这个范围叫做session范围（会话范围）。那么，SessionStorage 存储有效范围就是一个session范围。
本地存储LocalStorage：永久存储。只要不主动从LocalStorage中将数据移除，那么LocalStorage种的数据就始终存在。
本地存储中涉及的方法有哪些？分别代表什么含义
1. setItem()：该方法接受一个键和值作为参数，将会把键值对添加到存储中，如果键名存在，则更新其对应的值著作权归作者所有。
2. getItem()：该方法接受一个键名作为参数，返回键名对应的值。
3. removeItem()：该方法接受一个键名作为参数，并把该键名从存储中删除著作权归作者所有。

day6

列出你学过的vue指令，并说明其含义
1. v-text：更新元素的innerText
2. v-html：更新元素的innerHTML
  属性绑定指令：v-bind
  双向绑定 v-model
  三目运算符，来动态绑定样式。
  绑定内联样式。
  v-on指令可以简写为：@
  $event 的形式给事件处理函数传递事件对象。
  @click.stop取消冒泡
  @contextmenu.prevent取消游览器默认
  条件渲染指令，可以根据条件判断，来设置元素的显示与隐藏。
  当v-if的值为false时，网页中将不会对此元素进行渲染
  v-show也是根据条件展示元素的指令。带有 v-show 的元素始终会被渲染并保留在 DOM 中。
  v-show 是简单地切换元素的 CSS 属性 display 。
  value 是遍历得到的属性值，key 是遍历得到的属性名，index 是遍历次序，这里的 key、index 都是可选参数，如果不需要，这个指令其实可以写成 v-for="value in user"；
  value 是遍历得到的元素，index 是数组下标，这里的index 也是可选参数，如果不需要，这个指令其实可以写成 v-for="value in userArr"；
js和vue分别如何处理事件冒泡和取消浏览器默认事件
js写法 vue写法
event.cancelbubble = true; @click.stop --------取消冒泡
event.preventDefault(); @contextmenu.prevent ------取消浏览器默认行为
v-if和v-show的区别
1. v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
2. v-if是惰性的，只有当条件为true时才会渲染，如果条件为false则什么都不做
3. v-if有很高的切换开销，适用于条件不太容易改变的时候
4. v-show不管条件是true还是false都会进行渲染。并且只是简单地基于 CSS 进行切换
5. v-show有很高的初始渲染开销，适用于非常频繁地切换
v-html和v-text的区别
v-html指令会将绑定的数据解析为HTML，并将其插入到元素的内部。这意味着，如果绑定的数据中包含HTML标签，那么这些标签将会被解析并显示在页面上。
v-text指令会将绑定的数据作为纯文本插入到元素的内部。这意味着，绑定的数据中的HTML标签会被直接显示为文本，而不会被解析。
定义一个对象数组，利用v-for进行遍历，将数据显示在页面上

html 复制代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p v-for="(item,index) in userArr">
				{{item.userId}},{{item.userName}},{{item.userSex}},{{index}}
				<button @click="operate(index)">操作</button>
			</p>
		</div>

		<script>
			Vue.createApp({
				data() {
					return {
						userArr: [{
							userId: 1,
							userName: '张三',
							userSex: '男'
						}, {
							userId: 2,
							userName: '李四',
							userSex: '女'
						}, {
							userId: 3,
							userName: '王五',
							userSex: '男'
						}]
					}

				},
				methods: {
					operate(index) {
						console.log(this.userArr[index]);
					}
				}
			}).mount('#app');
		</script>
	</body>
</html>

day7

分别写出根组件、全局组件、局部组件的语法
根组件：

xml 复制代码

<body>
		<div id="app">
			
		</div>
		<script>
			let vueapp= Vue.createApp({})
			let vuemou = vueapp.mount('#app')
		</script>
	</body>
	全局组件：<body>
		<div id="app">
			<h3>我是真的</h3>
			<mycom></mycom>
			<mycom></mycom>
		</div>
		<div id="app2">
			<h3>你是假的</h3>
			<mycom></mycom>
			<mycom></mycom>
		</div>
		<script>
			let vueapp= Vue.createApp({})
			vueapp.component('mycom',{
				template:'<p>我是全局组件</p>'
			});
			//vueapp.mount('#app')
			vueapp.mount('#app2')
		</script>
		
	</body>
	局部组件:<body>
		<div id="app">
			<mycom></mycom>
		</div>
		<template id="fujia">
			<div>
				<p>这是父组件</p>
				{{num}}
				<Button @click="add">加</Button>
				<youcom></youcom>
			</div>
		</template>

		<template id="zijian">
			<div>
				<p>这是子组件</p>
				{{subnum}}
				<Button @click="jian">减</Button>
			</div>
		</template>

		<script>
			Vue.createApp({
				components: {
					mycom: {
						template: '#fujia',
						data() {
							return {
								num: 1
							}
						},
						methods: {
							add() {
								this.num++
							}
						},
						components: {
							youcom: {
								template: '#zijian',
								data() {
									return {
										subnum: 20
									}
								},
								methods: {
									jian() {
										this.subnum--
									}
								}
							}
						}
					}
				}
			}).mount('#app')
		</script>
	</body>

计算属性和方法的区别
计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变的时候才会重新求值，这就意味着只要message还没有发生改变，多次访问reversedMessage计算属性立即返回的是之前计算的结果，而不会再次执行计算函数。
而对于methods方法，只要发生重新渲染，methods调用总会执行该函数。
如果某个computed需要的遍历一个极大的数组和做大量的计算，可以减小性能开销，如果不希望有缓存，则用methods。
分别简述以下修饰符的作用
v-model.lazy 只有在input输入框发生一个blur时才触发，也就是延迟同步到失去焦点时。
v-model.trim 将用户输入的前后的空格去掉。
v-model.number 将用户输入的字符串转换成number。

day8

1、文字简述vue父组件向子组件传值的过程

在子组件标签中，声明 msg 属性，属性值即为父组件向子组件传递的值。
在子组件中，使用props选项，声明接收父组件向子组件传递值的载体，即 'msg' 。
子组件中就可以使用 msg 获取父组件向子组件传递的值了。

2、文字简述vue子组件向父组件传值的过程

● 首先，我们需要在子组件中触发一个主动发送数据的事件。上面的例子中是一个点击事件send；

● 其次，在点击事件中使用emit方法，这个emit接收两个参数：传递数据的事件和需要传递的数据。这个传递数据的事件也是自定义的；

● 然后在父组件中引用子组件，并在引用的子组件中使用on监听上一步传递数据的事件。上面的例子中是childmsg；

● 最后在父组件中使用这个事件，这个事件带有一个参数，就是从子组件发送过来的数据。

3、父向子传值时，数据是单向的是什么意思

父组件向子组件传递数据是单向的。也就是说：子组件可以接收并使用父组件传递过来的数据，但子组件不能修改此数据。

这样做是为了防止子组件意外改变父组件的状态，从而导致父组件的行为异常。

4、文件简述多级组件传值过程

● 使用 provide 来声明要传递的数据

● 在孙子组件中使用inject 来接收数据。

5、简述路由定义的步骤

定义（路由）组件。
定义路由规则对象（每个路由应该映射一个组件）
创建 router 实例
将路由对象挂载到Vue实例上
通过use(router)注入路由，从而让整个应用都有路由功能

6、简述params方式和query方式传参的区别

query方式：类似于get方式，参数会在路由中显示，可以用做刷新后仍然存在的参数。利用路由规则中的path跳转。

params方式：类似于post方式，参数不会在路由中显示，页面刷新后参数将不存在。利用路由规则中的name跳转。

day9

写出vue项目创建步骤
a.安装Node.js：在电脑上安装Node.js，可以从官网（https://nodejs.org/）下载安装包，并按照提示进行安装。
b.安装Vue CLI：在命令行中运行以下命令安装Vue CLI。
npm install -g @vue/cli
c.npm使用国内淘宝镜像
npm config set registry https://registry.npm.taobao.org
d.创建Vue项目：在命令行中运行以下命令创建一个新的Vue项目。
vue create
其中是你想要创建的项目的名字，可以自定义。
在运行以上命令后，会有一系列的选项供你选择，可以根据自己的需求进行配置。
e.运行Vue项目：在命令行中进入到项目的根目录，并运行以下命令启动开发服务器。
cd
npm run serve
运行成功后，会输出一个本地服务器的地址，在浏览器中打开该地址，就可以看到你创建的Vue项目了。
写出vue项目目录结构代表的含义
node_modules 项目中依赖的所有库文件的存放目录
public 公共资源文件目录（这里的文件都不需要打包)
index.html html入口文件
src 源代码目录
assets 图片、css等静态资源目录
components 共通组件目录
router 路由模块目录
index.js 路由配置文件
views 视图层组件目录
AboutView.vue 视图层组件文件
App.vue 主组件文件
main.js javaScript入口文件
package-lock.json 模块依赖锁定文件
package.json 模块依赖文件
vue.config.js Vue-Cl配置文件

day10

如何打包vue项目
（1）在vue.config.js文件中添加如下配置：

html 复制代码

module.exports = {
	//打包基本目录
	publicPath:'./',
	//输出目录
	outputDir:'dist',
	//静态资源目录
	assetsDir:'assets',
	
	... ...
}

（2）在命令行中进入到工程目录，运行如下命令：

npm run build

（3）当出现如下信息时，就表示打包成功：

D:\vswork\hello>npm run build

hello@0.1.0 build D:\vswork\hello

vue-cli-service build

rust 复制代码

All browser targets in the browserslist configuration have supported ES module.
Therefore we don't build two separate bundles for differential loading.


|  Building for production...

 DONE  Compiled successfully in 9830ms                         3:55:44 ├F10: PM
┤

  File                                      Size             Gzipped

  dist\assets\js\chunk-vendors.017df1e4.    97.24 KiB        35.95 KiB
  js
  dist\assets\js\app.d9edd01d.js            3.63 KiB         1.72 KiB
  dist\assets\css\app.4b579015.css          0.34 KiB         0.20 KiB

  Images and other types of assets omitted.
  Build at: 2022-04-02T07:55:44.769Z - Hash: 0bb120b23a145c5a - Time: 9830ms

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployme
nt.html

在工程目录中，就会出现 "dist" 目录，这就是打包好的工程。

此时，就可以在浏览器中运行 index.html 文件了。

如何配置vue项目端口
（1）vue.config.js文件中添加以下代码来配置端口号：
module.exports = {
devServer: {
port: 8080, // 设置您想要的端口号
},
};
（2）
打开终端或命令提示符，并进入您的Vue项目的根目录。
在终端中运行以下命令来打开Vue CLI的配置文件：
vue ui
这将会在浏览器中打开Vue项目的图形化界面。
在Vue项目的图形化界面中，点击左侧导航栏的"任务"选项卡。
在"任务"选项卡中，点击"serve"任务。
在"serve"任务界面中，您可以找到一个名为"端口号"（或类似的设置选项）的输入框。
在输入框中输入您想要设置的端口号。
点击"保存并应用"按钮，以保存并应用您的配置更改。
关闭Vue项目的图形化界面。
简述vuex的作用
状态共享：Vuex允许将状态存储在一个单一的地方，从而使多个组件可以访问和共享相同的状态数据，方便组件之间的通信和数据共享。
状态管理：Vuex提供了一种集中式管理应用程序状态的方式，通过统一管理和修改状态，可以使状态的变化更加可追踪和可维护，减少了状态变化引起的错误和调试困难。
组件通信：Vuex提供了一种在组件之间传递数据的机制，通过在组件的计算属性中使用Vuex的状态数据，可以实现组件之间的通信和数据共享，避免了组件之间传递数据时的繁琐步骤。
状态持久化：Vuex允许将状态持久化到本地存储或其他持久化介质上，这样可以在刷新页面或重新加载应用程序时，仍然可以恢复之前保存的状态，提供更好的用户体验。
总之，Vuex的作用是提供一个集中式的状态管理机制，使得组件之间的通信和数据共享更加简单和可控，提高了应用的可维护性和可扩展性。

day11

简述ref用法

import {ref} from 'vue'

const num = ref(0)
简述reactive用法

import {reactive} from 'vue'

const state = reactive({

uid:1

uname:'zs'

})

简述组合式API中编程式路由用法
需要导入模块
导出数据 {useRouter}
导入数据 {useRoute}

定义一个变量接 useRouter函数

用这个变量的push方法串一个对象

router.push({path:'/about',query:{name:'zhangsan'}});

在需要接受的组件定义一个变量接 useRoute函数

const route = useRoute();