Matarialize中文社区-前端基础

前端基础

忆往昔 2024-10-07 20:13:15

92 uniapp 专栏

以下是前端基础知识的详细讲解，涵盖 HTML、CSS、JavaScript、响应式设计、Vue.js 及其核心概念、Vue Router 和 Vuex 的所有知识点。

1. 前端基础

HTML

定义：超文本标记语言，用于创建网页内容。
基础标签：
- <html>：根元素。
- <head>：文档头部，包含元数据。
- <body>：文档主体，显示内容。
常用元素：
- <h1> - <h6>：标题标签。
- <p>：段落。
- <a>：超链接，使用 href 属性指定链接地址。
- <img>：图片，使用 src 属性指定路径。
语义化标签：
- <header>、<footer>、<article>、<section>、<nav>，提高可读性和 SEO。

CSS

定义：层叠样式表，用于描述 HTML 元素的外观。
选择器：
- 元素选择器：div {}。
- 类选择器：.classname {}。
- ID 选择器：#idname {}。
盒模型：
- margin、border、padding、content。
布局：
- Flexbox：display: flex;，用于一维布局。
- Grid：display: grid;，用于二维布局。
响应式设计：
- 媒体查询：@media (max-width: 600px) { /* styles */ }。

JavaScript

定义：脚本语言，用于增强网页交互性。
基础语法：
- 变量声明：let、const、var。
- 数据类型：String、Number、Boolean、Array、Object。
控制结构：
- 条件语句：if、switch。
- 循环：for、while。
函数：
- 声明式：function myFunction() {}。
- 箭头函数：const myFunction = () => {}。
DOM 操作：
- document.getElementById()、document.querySelector()。
- 添加事件：element.addEventListener('click', function)。

2. 响应式设计基础

目标：使网站在不同设备上均可良好显示。
技术：
- 使用百分比、em 或 rem 代替固定像素。
- 媒体查询调整样式。
- 使用响应式框架（如 Bootstrap）。

3. Vue.js 基础

Vue.js 核心概念

定义：渐进式 JavaScript 框架，用于构建用户界面。

Vue 实例：

const app = new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue!'
    }
});

指令：

v-bind：动态绑定属性。
v-model：双向数据绑定。
v-if、v-else：条件渲染。
v-for：列表渲染。

<div id="app">
    <p>{{ message }}</p>
    <input v-model="message">
    <ul>
        <li v-for="item in items">{{ item }}</li>
    </ul>
</div>

组件

定义：Vue 中的可重用实例。

创建组件：

Vue.component('my-component', {
    template: '<div>A custom component!</div>'
});

4. Vue Router (路由管理)

定义：Vue 的官方路由管理器。
安装：
```
npm install vue-router
```

基本使用：

const router = new VueRouter({
    routes: [
        { path: '/home', component: Home },
        { path: '/about', component: About }
    ]
});

在应用中使用：

const app = new Vue({
    router
}).$mount('#app');

5. Vuex (状态管理)

定义：专为 Vue.js 应用程序开发的状态管理模式。
安装：
```
npm install vuex
```

基本结构：

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state) {
            state.count++;
        }
    },
    actions: {
        increment(context) {
            context.commit('increment');
        }
    }
});

在组件中使用：

computed: {
    count() {
        return this.$store.state.count;
    }
},
methods: {
    increment() {
        this.$store.dispatch('increment');
    }
}

通过掌握以上知识点，你将为学习 UniApp 奠定坚实的基础。每个部分都可以深入学习，进行实践，逐渐提升你的前端开发能力。

评论区