02-第一个Vue程序

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

本站仅提供存储服务，所有内容均由用户发布，如发现有害或侵权内容，请点击举报。