前端内容（全）

最新推荐文章于 2024-09-13 10:46:15 发布

炼狱

最新推荐文章于 2024-09-13 10:46:15 发布

阅读量449

点赞数 2

文章标签：前端

本文链接：https://blog.csdn.net/qq_63763836/article/details/142166754

版权

文章目录

前端学习

前端学习

1.基础内容

1.1 Html

<h1>你好 html</h1>

<p >段落标签</p>
<p id="p1" class="c1">倾斜 黑体</p>
	
<div>块内标签</div>
<div class="c1">黑体</div>

<span>行内标签</span>
		
<!-- 表单 -->
<form>
	<input type="text" />
</form>
	
<!-- 表格 -->
<table>
	<tr>
		<td></td>
	</tr>
</table>
...

1.2 Css

<!-- css  -->
<style>

	/* 标签选择器 */
	p{
		font-size: 40px;
		color: red;	
	}
	
	/* id选择器 */
	#p1{
		font-style: italic;
	}
	
	/* class选择器 */
	.c1{
		font-weight: 900;
	}
			
</style>

1.3 JavaScript

在JavaScript（JS）中， $符号本身并没有特殊的内建含义，$ 符号经常在某些库或框架中被用作标识符或别名，特别是当他们需要提供一个简洁的方式来引用或操作DOM元素、执行DOM查询或执行其他常见任务时。

<div id="d1" style="">0</div>
<button>点击自增</button>
		
<!-- JavaScript -->
		
<script>
// 数据类型
// number  string  boolean  null undefind  引用(对象、数组。。)
// 变量 var const let
var a1 = 123
a1 = "abc"
// a1 = {1,2,3}
			
//js 对象
var person1 = {
	name: 'jack',
	age: 18,
	sex: 'man'	
}
console.log(person1.name)
			
// js 函数
// 声明
function sum2(num1,num2){
	return num1+num2
}
var res =sum2(1,2)
console.log(res)
var sum3 = function (num1,num2){
	return num1 + num2
}
			
// DOM 
var div1 = document.getElementById("d1")
console.log(div1)
//innerHTML可识别HTML标签		
div1.innerHTML = "<p>1</p>"
div1.innerText = 2
			
//事件
div1.onclick = function (){
	div1.style.backgroundColor = "red"
}
</script>

1.4 实例

1.4.1 点击按钮数值自增

<div id="d1" style="">0</div>
<button>点击自增</button>
		
<script>
	var div1 = document.querySelector("#d1")
	var butt1 = document.querySelectorAll("button")[0]
	console.log(div1)
	console.log(butt1)
	var count = 0
	butt1.onclick = function(){
		count ++
		div1.innerText = count
	}	
</script>

1.4.2 简单轮播图

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style type="text/css">
			#d1{
				width: 590px;
				height: 470px;
				background-image: url(img/p1.jpg);
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}
		</style>
		
	</head>
	<body>
		<!-- <img src="img/p1.jpg" /> -->
		<div id="d1">
			
		</div>		
		<script type="text/javascript">			
			var div1 = document.querySelector("#d1")			
			var url = ''
			var sta = 0 ; // 3 
			var on =  setInterval(function(){				
				sta++
				if(sta == 3){					
					sta = 0
				}
				if(sta == 1){
					
					url = "url(img/p2.jpg)"
				}else if(sta == 2){
					url = "url(img/p3.jpg)"
				}else{
					url = "url(img/p1.jpg)"
				}				
				div1.style.backgroundImage = url
				
			},3000)
			
			//  清除定时器
		//	clearInterval(on)
		</script>
	</body>
</html>

2.vue入门

vue网址：vue网址

可根据快速上手进行操作，或根据下方流程进行操作

使用流程：

引入vue.js

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

创建vue对象

const {createApp} = Vue
//  创建  vue  应用对象
var app = createApp({
	// 数据绑定
	data(){
		return{
			msg : "今天晚上吃啥？",
			time: "18:00"
		}
	}
})

渲染页面元素

//将创建的vue对象与html中id为app的标签绑定
app.mount("#app")

例子：

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

<div id="app">{{ message }}</div>

<script>
  const { createApp } = Vue
  
  createApp({
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }).mount('#app')
</script>

拓展：

computed计算属性：该属性由计算得来

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="app">
			{{author.books.length >0 ? "yes":"no"}}
			{{judgeBook}}
		</div>
		<script>
			const {createApp} = Vue			
			//  创建vue 实例
			var app =  createApp({
				data(){
					return{					
						author:{
							name:"张三",
							books:["book1","book2"]	
						}
					}
				},
				// 计算属性
				computed:{
					judgeBook(){
						return this.author.books.length >0 ? "yes":"no"
					}
				}
			})
			// 挂载容器
			app.mount("#app")
		</script>
	</body>
</html>

在JavaScript（特别是在Vue.js框架的上下文中），this. $ro u t er 表达式中的$ 符号并没有在JavaScript语言本身中赋予特殊的意义。然而，在Vue.js这样的现代前端框架中，$前缀经常被用于表示实例属性或方法，这些属性或方法是由Vue框架本身注入到Vue组件实例中的。

3.nodejs安装

从官网下载安装包 Node.js安装地址
安装完成之后执行 node -v 指令可以查看当前版本号，说明安装成功
查看当前全局安装模块的路径 npm config get prefix
在安装文件夹中建立node_global文件夹，并修改全局安装模块路径 npm config set prefix D:\nodejs\node_global
在安装文件夹中建立node_cache文件夹，并修改缓存路径 npm config set cache D:\nodejs\node_cache
修改默认的中央仓库为淘宝镜像 npm config set registry https://registry.npmmirror.com
将安装文件夹（可能安装时已配置）和模块路径 D:\nodejs\node_global配置到环境变量中

4.Vue项目

4.1 Vue项目创建

步骤：快速上手

在指定路径下执行 npm creaet vue@latest 创建项目
进入项目目录，执行 npm install 安装依赖
启动项目 npm run dev
访问 http://localhost:5173/ ，可以查看运行的项目

4.2 Vue项目目录

node_modules 项目依赖包
public 静态文件目录
src 源文件：
- assets：静态资源
- components：组件（可以在该文件夹中自己创建组件并使用）
- APP.vue 根组件（默认访问的组件）
- main.js 入口文件

4.3 创建组件并引用

步骤：

在components包下创建 .vue 文件

// HI.vue
<template>
	<div>{{msg}}</div>
</template>

<script>
	export default{
		
		data(){
			
			return{
				
				msg:"123456"
			}
		}
	}
</script>

<style>
    
</style>

在App.vue导入自己创建的组件，并注册组件

<script>
	// 导入组件
	import Hi from './components/HI.vue'
	export default{
		// 注册组件
		components:{
			Hi
		}
	}
</script>

<template>
	<div>
		<Hi></Hi>
	</div>
</template>

拓展：

通过 slot 插槽，在引用的时候可以往双标签中添加内容，并显示在slot插槽位置
通过 props 给导入的标签添加属性，并可在其他组件引用的时候设置属性，从而在子组件中使用该属性

<template>
	<!-- 插槽 用来显示  父组件 使用子组件时  写入子组件标签间的 文本内容 -->
	<div>{{msg}}<slot></slot>{{acname}}</div>
</template>

<script>
	export default{
		data(){
			return{
				msg:"123456"
			}
		},
		//  接受父组件 标签中 acname 属性对应的属性值
		props:["acname"]
	}
	
</script>

<style>
</style>

5.Vue router

使用步骤：Vue Router

安装 router：npm install vue-router@4
创建路由对象并使用（网址中是在main.js中直接创建使用，而我们现在选择单独创建一个文件创建router，并将创建好的文件导出）

// 在src中创建 router/router.js，并到处router对象
import { createMemoryHistory, createRouter } from 'vue-router'
// 导入需要路由的组件
import Login from '../components/Login.vue'
import Register from '../components/Register.vue'

const routes = [
  { path: '/login', component: Login },
  { path: '/register', component: Register },
]

const router = createRouter({
  history: createMemoryHistory(),
  routes,
})

export default router

在main.js中添加路由对象

//如果是通过建立router文件，选择导入
import router from "./router/router.js"
//使用router对象
createApp(App).use(router).mount('#app')

在template标签中使用，点击RouterLink进行切换RouterView中显示的页面

<RouterLink to="/login"><span>登录/</span></RouterLink>
<RouterLink to="/register"><span>注册</span></RouterLink>

<div>
	<RouterView />
</div>

拓展：

通过函数实现页面切换

// 使用App.vue中的已建立好的router对象，切换页面并传参数
this.$router.push({
	path:"register",
	params:{
		id:1,
		username:""
	}
})

6.Vue axios

使用步骤：Axios中文网

npm install axios
导入axios就可以使用

import axios from 'axios'

也可以进行全局导入，使用时依靠全局属性

//在main.js中使用
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:8080"
// 虽然在main.js中引入了axios，但是全局只能使用全局注册的属性（$http）
app.config.globalProperties.$http = axios	//注册全局属性

使用

//正常使用
axios.get()
axios.post()

使用全局属性

this.$http.get("user")

7.Vant

使用步骤：Vant

npm i vant
引用组件采用按需引入的方法（只有当前组件需要时再引入）

//安装插件
npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

配置文件vite.config.js（该文件存在于项目中，可通过文件判断需要进行的是哪种配置）

import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

export default {
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VantResolver()],
    }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};