文章目录
前端学习
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
<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>
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"
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()],
}),
],
};
- 需要什么组件时直接使用即可（因为配置时进行配置插件，插件有自动引入功能，所以不需要再引入插件）
扫一扫
3991
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
