前言
这系列文章主要学习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>
总结
通过这篇文章能让我们了解创建vue程序的步骤,快速入门vue,了解vue是如何工作的,实践出真知,快去实践吧!!