Vue实战学习(2)（Vue快速入门（快速构建一个局部Vue项目））
目录
（2）<body>标签中引入Vue模块 。
一、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'。
<!-- 引入Vue模块 --> <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> <!-- 引入Vue模块 --> <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控制的元素范围内，写到外部无任何效果。
原文地址：https://blog.csdn.net/m0_74363339/article/details/143579982
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！