前端基础

class 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 奠定坚实的基础。每个部分都可以深入学习，进行实践，逐渐提升你的前端开发能力。

评论区
评论列表
menu