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

免费建站工具西安网站建设招骋

news 2025/9/11 6:58:55

免费建站工具,西安网站建设招骋,网站备案流程何时改,如何搜索asp网站文章目录前言一、什么是Vue二、快速入门完整代码总结前言这系列文章主要学习Vue从入门到项目实战，适合想要学习巩固Vue的人一、什么是Vue Vue官网 Vue是一款用于构件用户界面的渐进式的JavaScript框架既然是一个框架，那么我们得主要目标就是使用&…

文章目录

前言
一、什么是Vue
二、快速入门
完整代码
总结

前言

这系列文章主要学习Vue从入门到项目实战，适合想要学习巩固Vue的人

一、什么是Vue

Vue官网

Vue是一款用于构件用户界面的渐进式的JavaScript框架
既然是一个框架，那么我们得主要目标就是使用，只有先会用才能扩展

在这里插入图片描述

二、快速入门

我们会从两个方面开始

快速入门

准备
– 准备html页面，并引入Vue模块（官方提供）
– 创建Vue程序的应用实例
– 准备元素（dev），被Vue控制
构件用户界面
– 准备数据
– 通过插值表达式渲染页面

通过html页面，并导入Vue模块

<!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><script type="module">   //需要使用script标签import {createApp} from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'</script>
</body>
</html>

在这里插入图片描述

创建Vue的应用程序实例

在这里插入图片描述

提供div元素，并被Vue控制

在这里插入图片描述

准备数据

在这里插入图片描述

通过插值表达式渲染页面

在这里插入图片描述

结果

在这里插入图片描述

完整代码

<!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'createApp({data(){return{msg: 'hello vue'}}}).mount('#app')</script></body>
</html>