前端学习笔记

Web原生（HTML+CSS+JavaScript）

HTML

ctrl + H：查看类的方法的源码

一般标签

<h1></h1>
<h2></h2>
<p></p>
<div></div>

自闭和标签

<hr /> <!--水平分隔线-->
<br /> <!--换行符-->

特殊字符

  • 空格：&nbsp;
  • 大于：&gt;
  • 小于：&lt;

CSS

div {<!--标签名选择-->

}
.class {<!--属性选择器-->

}
#id {<!--id选择器-->

}
background-color: red; <!--背景颜色-->
<!--Text 文本-->
color: green; <!--文本颜色-->
text-align: center; <!--文本对齐方式-->
text-decoration: none; <!--删除文本下划线-->
<!--list 列表-->
list-style-type: circle; <!--列表项前面的样式-->
list-style-image: url('xxx'); <!--列表项前面的样式（自定义图标）-->
<!--Table 表格-->

JavaScript

基础语法

<script type="text/javascript">
	window.onload = function(){ //页面加载完成后发生的事件
	
	}
</script>

alert(<info>)：信息提示框

prompt(<info>)：信息输入框

confirm(<info>)：信息确认框

变量

  • 变量类型

    var var1 = 123：声明变量时使用var关键字

    var var2 = new Object()

    var var3：声明为定义，值为undefine

    var var4 = null：声明定义为null时，类型为Object

    typeof <var>：获取 <var>变量的类型

    Javascipt中的变量类型：

    • number
    • string
    • boolean
    • function
    • Object
    • undefine

  • 运算符

    10 / 0: Inifinity

    10 % 0: NaN

    '1' == 1(true): 当两边数据类型不一样时会先将两端数据类型转换为相同的然后比较

    '1' === 1(false)

JSON

JSON.stringfy(js_obj)：将js对象转换成json字符串

JSON.parse(json_str)：将json字符串转换成js对象

对象

Number

  • Number.parseInt(int_str)

函数

function func_name(a, b) {
    return ;
}

js中的函数可以传入不同的类型，而且传入的值也可以和原函数声明的不同，当传入的值数量多余函数声明的时函数只使用前面的几个值，当传入的值数量少于函数声明的时，后面缺省的值即为 undefine

匿名函数：

(function func_name() {
  
})

运算符

  • ===：严格等于、!==：严格不等于

  • typeof(var)：获取变量var的数据类型

  • ||：逻辑或运算符

    var1 || var2 //当var1是Truthy时返回var1，当var1是Falsy时返回var2

  • ??：判断变量是否Nullish

    n = n?? var //当n===null || n ===undefine时返回var

  • ?.：当前面的变量为Nullish时不执行后面的方法

  • ...：展开运算符（作用：可用于复制数组和对象（复制只是浅拷贝），合并数组和对象）

let arr = [1, 2, 3];
let arr2 = [...arr];   //1, 2, 3
let obj = {
    name: 'scy',
    age: 21
};
let obj2 = {...obj};   // name: 'scy', age: 21

事件

  • onmouseover, onmousemove, onmouseleave：鼠标事件

  • onclick：点击事件

  • onchange：值发生修改

    对于 input输入框，onchange是输入框失去焦点后的值是否发生改变

  • onfocus

  • onblur

BOM编程

window.onload = function() { //给页面的onload加载完成方法绑定事件
  
}

window

  • location

    location.href = "website"：跳转到指定的页面

  • history

    history.forward()：浏览器下一页

    history.back()：浏览器上一页

    history.go(num)：向前跳转num页

  • sessionStorage

  • localStorage

DOM编程

document

document.getElementById([id])：id查找器

本地存储

//本地保存（浏览器关闭数据保留）
window.localStorage.setItem(<key>, <value>) //window可以省略
let val = localStorage.getItem(<key>)
localStorage.removeItem(<key>) //删除一个键值对
localStorage.clear() //清除所有键值对

//会话保存（浏览器关闭数据也清除）
sessionStorage.setItem(<key>, <value>)
let val = sessionStorage.getItem(<key>)
sessionStorage.removeItem(<key>) //删除一个键值对
sessionStorage.clear() //清除所有键值对

Nodejs

img

  • fetch-api（获取服务器数据）
{
    "type": "module",
    "devDependencies": {
        "express": "^4.18.1"
    }
}

Typescript

  • Javascript为动态类型语言，Typescript为静态类型语言，在创建并编辑 xxx.ts文件之后需要将 xxx.ts文件编译成 xxx.js文件

TS中的变量类型：

img

前端框架

Vue

Vue2

  1. 使用Vue对象
<script src="js/vue.js"></script>
<script>
	var app = new Vue({  //传入一个对象类型数据
        el: "#app",  //id选择器
        data: {
            name: "scy"
        }
    })
</script>

<!--div组件， {{}}文本插值-->
<div id="app">
    <h1>
        Hello, {{name}}
    </h1>
</div>

img

  1. 命令
<span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>

var app2 = new Vue({
  el: '#app-2',
  data: {  //将message变量绑定到html的span标签中
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})

常用命令

  • v-bind:：与href、css样式绑定属性

    v-bind:title：鼠标悬停时的提示

    v-bind:href="<var_name>"：绑定超链接

    可以简写成：: ex: :href

    v-bind是单向数据绑定，v-model是双向数据绑定

  • v-model:value='xxx'：与表单元素绑定

    简写：v-model='xxx'

  • v-if/v-else-if/v-else：条件成立时浏览器才渲染，否则不渲染

  • v-show：通过判断条件成立与否来修改display属性是否显示

  • v-for：for循环进行列表渲染

  • v-cloak：在vue渲染之前标签中存在该属性，当vue渲染完成后该标签消失

    搭配css样式使用：

    [v-cloak] {  <!-- 所有带有v-cloak属性的标签都隐藏 -->
	display: none
}

  • v-once：只在属性初始化时起作用，后面就变成静态标签

  • v-pre：让vue不解析当前标签（直接原样展示）

属性代理

Object.defineProperty(<obj_name>, <prop_name>, <prop_define>)：向<obj_name>对象中添加指定方法

事件

v-on:xxx：绑定事件

click : 点击事件

v-on:click === @click

focus : 聚焦事件

blur : 离焦事件

以上事件都可以简写成：@xxx (ex: @click：点击事件)

事件修饰符：

@click.prevent：阻止默认事件

img

img

tab 键还含有功能切换焦点，因此不能配合 keyup 事件使用，需要使用 keydown

Vue.set方法

作用：用于给Vue对象中的属性添加子属性

Vue.set(<prop_name>, <ch_prop_name>, <ch_prop_value>)

向属性<prop_name>中添加子属性<ch_prop_name>的值为 <ch_prop_value>

等同于：

vm.$set(<prop_name>, <ch_prop_name>, <ch_prop_value>)

vm为Vue对象

数组更新

Vue通过一下数组操作方法来监听数组的改变：

img

除此之外：

Vue可以通过 Vue.set(<arr>, <index>, <new_val>) 来修改数组中的值（能够被vue监听到）

filters

//在Vue示例中添加一个新的对象
filters: {  //过滤器
    filter1(val1) {
      
    },
    filter2(val1, val2, ...) {
      
    },
}

//过滤器的使用：（过滤器就相当于传参函数）
//{{value | filter1 | filter2}}
//多个过滤器串联，将左边的值传入右边的过滤器，然后将返回值继续向右传递

自定义指令

//定义局部指令
new Vue({
    el: '#app',
    data: {
        n: 1
    },
    directives: {  //自定义指令
        //element为当前DOM对象，binding.value为传入的值
        big(element, binding) {
            // console.log(element, binding)
            element.innerText =  binding.value * 10
        },
        fbind: {
            bind(element, binding) {
                // console.log('bind')
                element.value = binding.value
            },
            inserted(element, binding) {
                // console.log('inserted')
                element.focus()
            },
            update(element, binding) {
                // console.log('update')
                element.value = binding.value
                element.focus()
            }
        }
    }
})

//全局自定义指令
//main.js
Vue.directive(<dir_name>, <dir_obj>)

生命周期

  • beforeCreate(){}
  • afterCreate(){}
  • beforeMount(){}
  • mounted(){}：Vue组件挂在完成调用的方法

img

调试方法：添加代码行 debugger

组件式编程

const hello = Vue.extend({  //创建一个组件
	template: `
	<div>
		<h2>{{msg}}<h2>
		<button @click="sayHello">click</button>
	</div>
	`,
    data() { //data属性（需要使用函数式）
        return {
            msg: "Hello, Vue!"
        }
    },
    methods: { //methods方法
        sayHello() {
            alert("Hello!")
        }
    }
})

//以上代码可以简写
/**
const hello = {  //不写Vue.extend()，vue会自动调用构造器函数
	template: `
	<div>
		<h2>{{msg}}<h2>
		<button @click="sayHello">click</button>
	</div>
	`,
    data() { //data属性（需要使用函数式）
        return {
            msg: "Hello, Vue!"
        }
    },
    methods: { //methods方法
        sayHello() {
            alert("Hello!")
        }
    }
}

*

Vue.component('hello', hello)  //注册全局组件

new Vue({
    el: "#app",
    components: {
		hello  //组件的注册（局部组件）   
    }
})

<div id="app">
    <hello></hello>  //组件的使用
	<hello />  //自闭合标签
</div>

单文件组件

<template>
    <div class="demo">
        <h2>school name: {{schoolName}}</h2>  
        <h2>school address: {{address}}</h2>  
    </div>
</template>

<script>
    const school = Vue.extend({
        data() {
            return {
                schoolName: 'Shanghai University',
                address: 'Shanghai'
            }
        }
    })
    export default school  //导出默认组件
  
    /**以上代码可以简写成
    	export default {
    		name: "School", //Vue开发者工具中显示的名字
            data() {
                return {
                    schoolName: 'Shanghai University',
                    address: 'Shanghai'
                }
            }
        }
    */
</script>

<style>
    .demo {
        background-color: aquamarine;
    }

</style>

vue-cli

vue create <project_name>：初始化项目

cd <project_name>

npm run serve：启动项目nodejs服务器

项目结构

  • node_modules：项目依赖
  • public：项目静态资源，webpack打包时会原封不动打包到dist文件夹中
  • src：源代码文件夹
    • JavaWeb.assets：

ref标签属性

<Hello ref="hello"></Hello>
<h2 ref="title">Title</h2>
<button @click="showDom" ref="btn"></button>

<!-- 通过ref标签可以获取dom对象或者vc实例对象 -->
this.$refs.hello  //获取vc实例对象
this.$refs.title  //获取html DOM对象
this.$refs.btn  //获取html DOM对象

props属性

export default {
    name: 'Student',
    props: {  //外部传入的参数
        name: {
            type: String,
            require: true
        },
        age: {
            type: Number,
            default: 20
        }
    }
}

mixin混合

混合中可以定义外部数据或方法，提高代码复用率

//mixin.js
//定义mixin，并导出
const mixin = {
    methods: {
        showName() {
            alert(this.name)
        }
    }
}

const mixin2 = {
    data() {
        return {
            x: 100,
            y: 200
        }
    }
}

export {mixin, mixin2}

//引入混合，并注册混合（局部混合）
//App.vue
import {mixin1, mixin2} from './mixin'
export default {
    name: 'App',
    data() {
        return {
            name: 'Max'
        }
    },
    mixins: [mixin1, mixin2] //注册混合
}

//全局混合
//main.js
import {mixin1, mixin2} from './mixin'
Vue.mixin(mixin1)
Vue.mixin(mixin2)

plugins插件

//plugins.js
export default {
    //插件中必须要有的方法
    install(Vue) { //传入的形参是Vue的构造函数
        //定义全局过滤器
        Vue.filter(<filter_name>, <filter_function>)
        //定义全局指令
        Vue.directive(<dir_name>, <dir_obj>)
        //定义全局混合
        Vue.mixin({<mixin_name>})
    }
}

//main.js
import plugins from './plugins'
Vue.use(plugins)  //应用插件

scoped属性

<style scoped lang="less">
    <!-- 
    scoped属性将作用域限制在当前组件中
    lang属性可以指定使用的语言：css/less
    -->

</style>

自定义事件

<!-- App.vue 父组件 -->
<!-- 方法一：自定义事件receive -->
<School @receive="receiveName"></School>

<!-- 接收子组件发射的信号，方法二 -->
<Student ref="student"></Student>

methods: {
    receiveName(name) {  //父组件触发的方法
    	console.log('receive name:', name)
    }
},
mounted() {
    // 接收子组件发射的信号，方法二
    this.$refs.student.$on('receive', this.receiveName)
}

<!-- 子组件 -->
methods: {
    // 通过this.$emit()方法调用自定事件的触发
    // 作用：子组件发射一个信号到父组件，从而触发自定义的事件（子->父）
    sendName() {
    	this.$emit('receive', this.name)
    }
}

this.$off(<event_name>)：解绑自定义事件

全局事件总线

用于全局任意组件间的通信

//main.js
new Vue({
    render: h => h(App),
    beforeCreate() {
        Vue.prototype.$bus = this  //添加一个全局事件总线
    }
}).$mount('#app')

//School.vue
mounted() {
    this.$bus.$on('sendName', (msg) => {
        console.log('School receive:', msg)
    })
},
beforeDestroy() { //关闭事件总线
    this.$bus.$off('sendName')  //单个事件
    this.$bus.$off(['event1', 'event2'])  //多个事件
}

消息订阅

//消息发布方
import pubsub from 'pubsub-js'
pubsub.publish('sendName', this.name)

//消息订阅方
mounted() { //组件挂载时订阅消息
    this.pub = pubsub.subscribe('sendName', (msgName, data) => {
    	console.log('receive data:', data)
	}) //得到订阅消息的<pub_id>
},
beforeDestroy() { //需要在组件销毁前取消订阅
    pubsub.unsubscirbe(this.pub)
}

本地存储

使用键值对的方式进行保存

建议使用 ：

JSON.stringfy(js_obj) 的方式保存js对象到本地

js_obj = JSON.parse(str)：解析str成js对象

localStorage.getItem(<item_name>)

localStorage.setItem(<item_name>, <item_val>)

动画过渡

<transition>
    <!--需要进行动画过度的标签，vue会在隐藏和显示标签时播放过渡动画-->
    <h2 v-show="isShown">xxx</h2>
</transition>

<!--css样式代码-->
.v-enter-active {
    animation: anime 0.5s linear;
}
.v-leave-active {
    animation: anime 0.5s linear reverse;
}

<!--使用第三方库函数-->
import 'animate.css'  //导入库函数
<transition-group 
	appear
    name="animate__animated animate__bounce"
    enter-active-class="animate__bounceIn"
	//进入动画
    leave-active-class="animate__fadeOutDown"
	//离开动画
>
    <h2 v-show="isShown" key="1">Student name: {{name}}</h2>
    <h2 v-show="!isShown" key="2">Student age: {{age}}</h2>
</transition-group>

跨域请求

//配置代理
//vue.config.js
devServer: {
    proxy: 'http://localhost:5000' //配置代理服务器
}

devServer: {
    proxy: {
      '/proxy': { //请求前缀是`/proxy`
        target: 'http://localhost:5000',
        pathRewrite: {'^/proxy': ''}
      },
    }
}

//axios
axios.get(<url>).then(
	response => { //请求成功的响应对象
		response.data //获取响应中的数据
	},
    error => { //请求失败的错误
        error.message //错误消息
    }
)

Router

npm install vue-router

// router/index.js
export default new VueRouter({
    routes: [
        {
            path: '/route1',
            component: Component1
        },
        {
            path: '/route2',
            component: Component2, 
            children: [
                {
                    path: 'child_route1',  //子路径，不能有`/`
                    component: News
                },
            ]
        },
    ]
})

Ajax

npm install axios

//get方法
new Vue({
    ...
    mounted() {
    	axios
    		.get(<url>)  //url地址
            .then((response) => {xxx})  //处理相应
            .catch((error) => {xxx})  //处理异常
	}
})

//post方法
axios
    .post(<url>)  //url地址
	.then((response) => {xxx})  //处理相应
    .catch((error) => {xxx})  //处理异常

插槽

<slot name="slot_name"></slot>  <!--在组件中添加具名插槽-->
<slot :var="var"></slot>  <!--作用域插槽-->

vuex

注意安装版本：

vue2需要安装 vuex3版本，vue3需要安装 vuex4版本

  • actinos：配置响应组件中的动作
  • mutations：用于操作数据（state）
  • state：用于存储数据
  • getters：类似于computed计算属性
// main.js
import Vuex from 'vuex'

Vue.config.productionTip = false
Vue.use(Vuex)
new Vue({
    render: h => h(App),
    store: 'hello',

}).$mount('#app')

// store/index.js
import Vuex from 'vuex'
import Vue from 'vue'

//使用Vuex插件
Vue.use(Vuex) 
//准备actions——用于响应组件中的动作
const actions = {}
//准备mutations——用于操作数据（state）
const mutations = {}
//准备state——用于存储数据
const state = {}
//创建并导出store
export default new Vuex.Store({
    actions,
    mutations,
    state
})

this.$store.dispatch(<action>, params)：触发action

this.$store.commit(<commit>, params)：触发commit

vue-router

npm i vue-router@3：安装vue-router

// router/index.js

import Component1 from 'path/of/component1'

export default new VueRouter({
    routes: [
        {
            path: '/path',
            component: Component1，
            children: [ //嵌套路由
            		{
            			path: '/child_path',
            			component: ChildComponent
        		}
            ]
        },
        ...
    ]
})

// App.vue
<router-link to="/path"></router-link> <!--点击跳转到指定的路由-->
<router-link replace to="/path"></router-link> <!--开启替换模式-->
<router-view></router-view>

编程式路由导航

this.$router.push({ 
    path: '/path/to/push',
    query: {
        //请求参数
    }
})
this.$router.replace({ //替换式跳转
    path: '/path/to/push',
    query: {
        //请求参数
    }
})
this.$router.back()
this.$router.forward()
this.$router.go(n) //n>0时前进，n<0时后退

缓存路由组件

<keep-alive include="ComponentName">
    <!--需要缓存指定组件-->
</keep-alive>
<keep-alive :include="['ComponentName']">
    <!--需要缓存多个组件-->
</keep-alive>

路由守卫

history模式

mode: 'history' | 'hash'

Vue UI组件库

img

安装依赖

npm i element-ui

npm i babel-plugin-component -D：下载开发依赖

// babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ["@babel/preset-env", { "modules": false }]
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

// main.js
import {Button, ...} from 'element-ui'

Vue.component(Button.name, Button)  //创建Vue组件

节流和防抖

  • 防抖：多次触发，只执行最后一次（相当于按钮防抖，实现方式是延时）
  • 节流：规定时间内只触发一次（相当于技能冷却）

npm i --save lodash：下载lodash

import {debounce} form 'lodash'

debounce(function() {
  
}, <time>) // <time>为延迟时间（单位为ms）

throttle(function() {
  
}, <time>) // <time>为节流的时间（单位为ms）

npm

npm i/install <pkg_name>[@<version>]：安装<pkg_name>软件包

npm i nanoid：安装nanoid包

npm view <pkg_name> versions：查看软件包版本

Element组件库

npm install element-ui@2.15.3：在项目目录下安装element组件库

//main.js
import Vue from 'vue';
import ElementUI from 'element-ui'; //导入element-ui
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

Vue3

  • 环境准备

img

修改配置文件
// https://vitejs.dev/config/   配置文档
export default defineConfig({
  plugins: [vue()],
  server: {
      port: 7070  //端口号
      host: "0.0.0.0"  //监听主机
  }
})
项目结构

img

语法
//基本框架
<script setup lang="ts">
import {ref} from 'vue';
let msg = ref('Hello');  //定义响应式的组件
function click() {
  msg.value = "World";
}

</script>
<template>
  <h1>{{ msg }}</h1>
  <button @click="click">click</button>
</template>
posted @ 2025-10-21 10:37  MaximeSHE  阅读(3)  评论(0)    收藏  举报