02-第一个Vue程序
本文共 1094 字，大约阅读时间需要 3 分钟。
目录
1. 准备工作
- 新建一个test01.html文件
- ! + Tab 键生成模板，注：(！为英文的叹号)，如下图
- 打右键开Open with Live Server
2. 编写代码
2.1 引入Vue
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>2.2 添加一个div标签
<div id="app"> <!-- 差值表达式，可以理解为变量语法 --> { {message}} </div>2.3 创建Vue实例
<script> var app = new Vue({ el: '#app', //el 挂载点，此处使用的是id选择器 data: { message: 'Hello Vue!' // data：数据对象 } })</script>2.4 保存(Ctrl +s)并查看结果
2.5 总结
- 导入开发版本的Vue.js
- 创建Vue实例对象，设置el属性和data属性
- 使用简洁的模板语法把数据渲染到页面上
2.6 完整代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Vue基础</title></head><body> <div id="app"> { {message}} </div> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </body></html>
转载地址：http://pzle.baihongyu.com/
你可能感兴趣的文章