02-第一个Vue程序-优快云博客

1. 准备工作

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>