抛弃散步的女同学，写下此文帮助掘友们入门前端框架！！！

ZXT
355 阅读6分钟

那天傍晚，阳光柔和，我和小茹在校园的小道上散步，空气里弥漫着刚下过雨的清新气息。她今天似乎有点不太一样，走得慢了一些，偶尔瞥向我，眼神里带着几分思索。我们聊着聊着，突然她问道：“你最近一直在学前端开发，感觉好复杂啊，真的有那么有意思吗？”

我愣了一下，没想到她会主动提起这个话题。其实，我知道她对编程一直有点兴趣，只是一直没敢碰。于是，我有些兴奋地开始给她解释：“其实也不复杂，前端框架就像是做网站的‘工具箱’，你拿它们做不同的事情，能更快速、更方便地构建页面。React和Vue各有各的优点，React更适合大规模的应用，它灵活但稍微有点复杂。而Vue呢，更加简洁易懂，像是‘入门版’的框架，适合快速上手。”

她听得似乎有点困惑，她看着我，眼神里似乎多了一点温柔，说道：编程感觉很复杂啊！！！

我一听，什么？？？感觉难吗？那我广大还没入门框架的掘友们不会也认为很难吧！我步也不散了，急忙跑回寝室，打开电脑。

给还没入门框架的掘友们写下了这篇文章帮助入门 ！！！

VUE 入门

我们先通过一个简单demo来体验一下vue 首先引入vue.js文件

<script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.9/vue.global.js"></script>

我们通过网络引入了这个vue.js文件，可以看到这是一个cdn文件。他是一种分布式的服务器网络，旨在将网站的内容高效地传递给全球用户。它通过在全球多个地理位置部署缓存服务器，使得用户可以从距离自己最近的服务器获取所需资源，从而提高访问速度和可靠性。

1.创建挂载点

我们首先创建一个挂载点，挂载点指的是应用程序首次渲染时插入到 DOM 中的目标元素。这个元素通常是一个空的

或其他容器标签，框架会在此基础上构建整个应用的界面。简单来说就是我们要放东西的入口div或其他标签的盒子。

<div id="root"></div>

2.导入create函数和ref函数

在 Vue 3 中，ref 是一个函数，用于创建一个响应式的数据对象。它接收一个初始值，并返回一个包含 value 属性的对象，该属性可以被访问和修改。当 value 属性被修改时，所有引用该 ref 对象的地方都会自动更新。

    <script type="module">/**/
    // 从 Vue 库中导入 createApp 和 ref 函数
    const {
        createApp, // 创建Vue应用
        ref // 响应式数据
    } = Vue

createApp函数用于创建一个App实例， setup 函数是 Vue 3 中 Composition API 的入口点，它在组件实例被创建之前执行，用于设置组件的响应式数据、计算属性、方法等。他的返回值就是组件中挂载点上要用到的属性及方法。

    createApp({ 创建一个App实例
            setup(){
                function increment(){
                    count++;
                    console.log(count);
                }
                let count = 0;
                return {
                    count,
                    increment
                };
            }
        }).mount('#root');

我们创建一个button,添加一个click事件，点击执行increment函数。vue的事件机制十分的简单，使用@event="handle"即可。

<div id="root">
        count {{count}} // 插值表达式，用于引用导出的数据
        <button @click="increment">+1</button>
    </div>
image.png 但是这时候我们发现虽然事件能够正常的触发，但是数据的值并没有发生更新。我们使用ref函数把数据包装成一个响应式数据。

ref 函数是 Vue 3 中用于创建响应式数据的函数。它的作用是将一个普通的值包装成一个响应式对象，使得这个值在被修改时能够触发视图的更新。

setup(){
    function increment(){
       count.value ++;
       console.log(count);
    }
       let count = ref(0);
       return {
         count,
         increment
       };
}

完整代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.4.9/vue.global.js"></script></head>
<body>
    <div id="root">
        count {{count}}
        <button @click="increment">+1</button>
    </div>
    <script>
        const {
            createApp,
            ref
        } = Vue;
        createApp({
            setup(){
                function increment(){
                    count.value ++;
                    console.log(count);
                }
                let count = ref(0);
                return {
                    count,
                    increment
                };
            }
        }).mount('#root'); 
    </script>
</body>
</html> 
</script>

React入门

我们同样以一个单页面的小demo来入门我们的react，react 需要引入的文件比较多一点，我们先来引入他的js文件

    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<!-- 引入 ReactDOM -->
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<!-- 引入 Babel -->
<script src="https://unpkg.com/@babel/standalone@7.20.0/babel.min.js"></script>

照样给出我们的挂载点，将应用挂载上去

 <div id="root"></div>

接着给出我们的script区域，用来操作数据。注意这里我们指定了script的类型为text/babel,告诉浏览器或工具链中的Babel编译器这段脚本包含的是现代JavaScript代码（可能包括ES6+特性）以及JSX语法，而不是传统的JavaScript代码。

<script type="text/babel">
</script>

接着在里面开始引入我们的响应式数据函数 useState，调用这个函数会有一个数组返回值，

  1. 当前状态（state） ：表示组件的状态值。

  2. 更新状态的函数（setState function） ：用于更新状态值，并触发组件重新渲染。

<script type="text/babel">
    const {useState} = React;
    const[count,setCount] = useState(0);
</script>

JSX的语法跟JS极其像，在react中，一个返回了标签的函数就是一个组件，以后的课程会介绍到。 我们定义一个组件，返回值只能有一个顶级父标签包裹住，如果返回多个标签报错
image.png

    function Counter() {
      const [count, setCount] = useState(0) // 数据状态
      // const count = 0;
      const increment = () => {
        setCount(count+1)
      }
      return (
        <div>
          Count: {count}
          <button onClick={increment}>+1</button>
        </div>
      )
    }
       ReactDOM.render(<Counter/>, document.getElementById('root');

这里跟vue不同的地方是他的函数也要用{}包裹起来。

下面是完整代码实现

    <!DOCTYPE html>
<html lang="en">
<head> 
    <meta charset="UTF-8">
    <title>React Counter Example</title>

    <!-- 引入 React 库 -->
    <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
    
    <!-- 引入 ReactDOM 库，用于将React组件渲染到DOM中 -->
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
    
    <!-- 引入 Babel 编译器，用于将现代 JavaScript（包括 JSX 语法）转换为浏览器兼容的代码 -->
    <script src="https://unpkg.com/@babel/standalone@7.20.0/babel.min.js"></script>
</head>
<body>
    <!-- 应用程序挂载点：这是React组件将要插入的实际DOM元素 -->
    <div id="root"></div>

    <!-- 下面是包含React代码的脚本块。type="text/babel" 表示这段代码需要通过Babel编译 -->
    <script type="text/babel">
        // 从 React 中解构出 useState 钩子函数，用于管理组件状态
        const { useState } = React;

        // 定义一个名为 Counter 的函数组件
        function Counter() {
            // 使用 useState 创建一个名为 count 的状态变量和一个更新这个状态的 setCount 函数
            // 初始状态设置为 0
            const [count, setCount] = useState(0); // 数据状态

            // 定义 increment 函数，当用户点击按钮时调用此函数来增加计数
            const increment = () => {
                // 调用 setCount 来更新状态，这里直接传递新的状态值
                setCount(count + 1);
            };

            // 返回JSX语法，描述了UI的样子
            return (
                <div>
                    {/* 显示当前的计数值 */}
                    Count: {count}
                    {/* 创建一个按钮，当点击时触发 increment 函数 */}
                    <button onClick={increment}>+1</button>
                </div>
            );
        }

        // 将 Counter 组件渲染到 DOM 中 ID 为 'root' 的元素内
        ReactDOM.render(<Counter />, document.getElementById('root'));
    </script>
</body>
</html>
avatar
文章
阅读
粉丝