文章目录
前端学习
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. r o u t e r 表达式中的 router表达式中的 router表达式中的符号并没有在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>
4.3 ref
在Vue 3中,ref是一个由Vue的reactivity API提供的函数,用于创建一个响应式的引用对象。当你调用ref(0)时,你实际上是在创建一个响应式的数值,其初始值为0。这个响应式的引用对象可以被用在Vue组件的setup函数或其他Composition API的使用场景中。
使用ref(0)创建的响应式引用对象具有.value属性,你可以通过它来获取或设置引用对象的值。例如:
//javascript
import { ref } from 'vue';
export default {
setup() {
const count = ref(0);
// 读取count的值
console.log(count.value); // 输出:0
// 设置count的值
count.value = 1;
// 再次读取count的值
console.log(count.value); // 输出:1
return { count };
}
};
在模板中,你不需要使用.value来访问ref创建的响应式数据的值,Vue会自动处理它。例如:
//html
<template>
<div>{{ count }}</div> <!-- 输出:1 -->
</template>
在这个例子中,即使count是一个响应式的引用对象,模板也会正确地显示其值,而不需要你显式地访问.value属性。这是因为Vue的模板编译器会自动处理这种情况,使你在模板中能够更简洁地访问响应式数据。
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")
6.1 全局配置
除了上面的全局配置外,还可通过其他的方式进行全局配置
//main.js 全局配置aixos
import axios from 'axios'
axios.defaults.baseURL = "http://localhost:8080" app.provide('$axios',axios)
vue文件若使用该配置需要使用inject方式获取
//如:login.vue
<script setup>
import {ref, inject } from 'vue';
const $axios = inject("$axios")
const username = ref(0)
const password = ref(1)
const onSubmit = ()=>{
$axios.get("/test/user",{params:{
username:username.value,
password:password.value
}}).then((data)=>{
console.log(data.data);
})
}
</script>
在Vue中,app.provide 是一个用于在应用的全局范围内提供数据或功能给所有组件的方法。它是Vue 3中引入的Composition API的一部分,允许你在应用的根实例上设置可注入的属性,这样任何子组件都可以使用 inject API来接收这些属性。
使用 provide 和 inject API,你可以跨组件层级直接传递数据,而不需要通过每一个中间组件手动传递props。这对于深层嵌套的组件结构特别有用,可以减少不必要的props传递,使组件间的通信更加简洁。
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()],
}),
],
};
- 需要什么组件时直接使用即可(因为配置时进行配置插件,插件有自动引入功能,所以不需要再引入插件)