目录
一、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'。
<!-- 引入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控制的元素范围内,写到外部无任何效果。