02-第一个Vue程序

目录

1.  准备工作

2.  编写代码

2.1 引入Vue

2.2  添加一个div标签

2.3 创建Vue实例

2.4 保存(Ctrl s)并查看结果

2.5 总结

2.6 完整代码

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',  // id选择器            data: {            message: 'Hello Vue!'               }            })</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>

来源：https://www.icode9.com/content-1-807801.html

赞 (0)

相关推荐