【Vue】1. Hello Vue!
程序员文章站
2024-03-23 13:42:04
...
文章目录
前言
创建一个简单的Vue应用的基本步骤。
一、下载vue.js文件
- 前往Vue官网：????https://cn.vuejs.org/
- 点击官网页面的 起步 按钮或者 ????直接前往
- 点击介绍—Vue.js页面的 安装 按钮或者 ????直接前往
- 点击安装—Vue.js页面的 开发版本 按钮
二、新建项目
- 新建文件夹
- 复制vue.js到此文件夹
- 新建html文件，文件内容如下：
<!DOCTYPE html>
<html>
<head>
<!-- 标签页的标题 -->
<title>我的第一个Vue项目</title>
<!-- 引入vue.js -->
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<!-- 展示message的值 -->
{{ message }}
</div>
<!-- 页面的js代码 -->
<script>
// 新建一个Vue对象
var firstApp = new Vue({
// el是element的缩写，#app是id选择器
el: '#app',
// 页面使用的变量需要在data中注册（定义）
data: {
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
- 用浏览器打开html文件
总结
- 这种展示的方式是Vue的 声明式渲染 。
- Vue是一套用于构建用户界面的 渐进式框架 。
- Vue的数据是 响应式 的，可以直接通过浏览器的开发者模式改变页面的值。
上一篇： C++内联函数