当前位置：首页 > article >正文

Vue实战学习(2)（Vue快速入门（快速构建一个局部Vue项目））

article 2024/11/8 13:24:14

目录

一、Vue快速入门。

（1）快速入门的案例需求。

（2）原生js解决。

（3）使用Vue解决。

1、准备一个html页面。且该页面需要引入Vue模块。

2、创建Vue程序的应用实例。

3、准备html元素（如div）。

4、基于数据构建用户界面。（核心）

<1>准备数据。

<2>通过插值表达式渲染页面。

<3>插值表达式。

二、实操（vscode）

（1）项目的创建与起步。

（2）<body>标签中引入Vue模块。

1、进入Vue官网，找到安装，点击并进入。

2、首先看到"通过CDN使用Vue"。

3、找到"ES"模块构建版本。

4、这样如下，就完成了第一步。

5、创建Vue的应用实例。

（3）准备元素div。

（4）构建用户界面。

1、准备数据。

2、通过插值表达式渲染页面。

三、总结。

（1）Vue的使用步骤。

1、准备工作。

2、构建用户界面。

一、Vue快速入门。

目前刚开始学习的是局部使用Vue。后面才学习如何以工程化的形式使用Vue。

（1）快速入门的案例需求。

使用Vue。将字符串"Hello Vue3"渲染到页面进行展示。

（2）原生js解决。

使用原生的JS代码完成。
使用Document.getElementById()获取指定id的元素。再调用innerHTML设置标签体即可。

举例如下。
首先通过 document.getElementById('myElement')获取到具有 id 为 myElement 的 <div> 元素，然后将其 innerHTML 设置为新的内容字符串，从而改变了这个元素在页面上显示的内容。
使用 document.getElementById() 和 innerHTML 可以方便地动态修改页面内容。
<!DOCTYPE html>
<html>

<body>

  <div id="myElement">Hello Vue</div>

  <script>
    const element = document.getElementById('myElement');
    element.innerHTML = 'Hello Vue3';
  </script>

</body>

</html>
（3）使用Vue解决。

1、准备一个html页面。且该页面需要引入Vue模块。

导入Vue时，通过import导入（按需导入）。并且导入一个在线的js文件。（在线地址是Vue官方提供的）
在这里只需要简单导入一个Vue提供的createApp这个函数即可。

2、创建Vue程序的应用实例。

也就是调用导入的createApp函数即可。
同时调用这个函数传参通过"{}"（大括号）。

3、准备html元素（如div）。

该元素（div）需要被Vue来控制。
如何控制？通过调用完createApp这个方法之后，再链式的调用一个mount()方法。在mount()方法这一块再传递一下页面中这个元素的id即可。

注意。一旦元素（div）被控制了之后，那么其下所有的子标签都会被Vue控制。

4、基于数据构建用户界面。（核心）

<1>准备数据。

也就是Vue使用的数据都需要在调用createApp这个函数。通过在"{}"（大括号）里面声明。
这里使用data函数。在它的内部：通过return来返回需要的数据。

如这个案例需要msg ： "Hello Vue3"这个数据。只需要在return后面返回这个数据就好了。

<2>通过插值表达式渲染页面。

可以在div的内部声明一个<h1>标签。并且在<h1>标内部通过插值表达式来把数据渲染到页面上。

这里的"插值表达式"就是两个"{}"（花括号）。在内部就写上Vue实例中准备好的键名（msg）即可。

<3>插值表达式。
<div>
  {{ message }}
</div>
在上面的代码中，message是在 Vue 实例中定义的数据属性，插值表达式会将这个数据属性的值显示在页面上。
插值表达式使得页面能够根据数据的变化实时更新显示内容。当数据发生改变时，插值表达式所在的位置会自动更新为新的数据值。

二、实操（vscode）

（1）项目的创建与起步。

快速生成html标签、head标签以及body标签。

（2）<body>标签中引入Vue模块。

首先需要定义一个标签<script>。然后还需要指定其type属性为："module"。
在该标签内部使用关键字"import"。跟上"{}"，然后再写from '在线地址'。（单引号内：写的是一个在线的地址）
在线地址可以去Vue官网里面查看。

1、进入Vue官网，找到安装，点击并进入。

2、首先看到"通过CDN使用Vue"。

传统导入方式，不常用！
它会把JS文件中的所有内容导入进来。

3、找到"ES"模块构建版本。

它这里就提供了需要的地址。
ctrl+c——>回到vscode再ctrl+v即可。

4、这样如下，就完成了第一步。

"{}"里面写导入的内容——>createApp函数即可。

5、创建Vue的应用实例。

在<script>标签里调用createApp函数。小括号里面通过一个大括号进行传参。到这里Vue的实例就有了。
具体的传参后面说。
<script type="module">
        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        createApp({
            
        })
    </script>
（3）准备元素div。

在body标签内。
因为将来这个div还需要被Vue控制。所以还要给其一个id="app"即可。
<div id="app">

</div>
被Vue控制——>在createApp({...})函数链式调用mount("#app")函数。
<body>
    <div id="app">

    </div>
    <script type="module">
        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        createApp({

        }).mount("#app");
    </script>
</body>
（4）构建用户界面。

1、准备数据。

这时就需要在createApp({...})这对大括号里面传参了。
定义一个data()函数。然后return{...}，在大括号里面去定义数据。
定义变量msg:'Hello Vue3'。

    <script type="module">
        import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        //创建Vue实例
        createApp({
            data(){
                return{
                    //定义数据
                    msg:'Hello Vue3'
                }
            }
        }).mount("#app");
    </script>
2、通过插值表达式渲染页面。

在div内部定义一个新的子标签——><h1>
在<h1>内部通过插值表达式渲染页面。"{}"（两个花括号）里面写上对应定义的变量的键名即可。
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    
    <script type="module">
        import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js';
        //创建Vue实例
        createApp({
            data() {
                return {
                    //定义数据
                    msg: 'Hello Vue3'
                }
            }
        }).mount("#app");
    </script>
</body>

</html>
运行结果。

如果再写一个div。不写对应的id值。
插值表达式不能被Vue正常解析并渲染。
因为这个div没有被Vue接管。Vue不会去解析这个插值表达式
<div id="app">
        <h1>{{msg}}</h1>
    </div>
    <div>
        <h1>{{msg}}</h1>
    </div>

三、总结。

（1）Vue的使用步骤。

1、准备工作。

引入Vue模块。import {...} from 'Vue官方给的地址'。且这里引入的时候是按需引入了一个createApp函数。
创建Vue的应用实例。调用createApp函数。
定义元素（div）。并且交给Vue控制。通过链式调用mount()方法，并且在参赛指定需要控制的元素id即可。

2、构建用户界面。

准备数据。在createApp函数的"{}"内部使用data()函数，内部通过return{...}定义变量，返回一个JS对象。在JS对象内部写上Vue需要的数据。
最后使用插值表达式把Vue的数据——>渲染到视图展示。
插值表达式是两对"{}"。在内部写上对应的键名即可。
注意：插值表达式一定要写到Vue控制的元素范围内，写到外部无任何效果。