第一步，创建html页面，这里使用vscode中的快捷键生成代码 vscode中输入一个! 即可生成html页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>
第二步 ，引入vue的js文件，类似jquery。这个不能直接将js文件复制到vscode中，应该从文件夹中复制该工程中
这样就会显示出来
在里面讲js文件引入
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script src="vue.min.js"></script> </body> </html>
第三步，在html页面创建div标签，div添加id属性
<div id="app"></div>
第四步 编写vue代码，固定的结构
<script> // 创建一个vue对象 new Vue({ el: '#app',//绑定vue作用的范围 data: {//定义页面中显示的模型数据 message: 'Hello Vue!' } }) </script> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11
第五步 使用插值表达式，获取data里面定义值
就是里面加两个大括号来获取值
<!-- id标识vue作用的范围 --> <div id="app"> <!-- {{}} 插值表达式，绑定vue中的data数据 --> {{ message }} </div>
第六步，测试成功
完整代码如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- {{}} 插值表达式，绑定vue中的data数据 --> {{ message }} </div> <script src="vue.min.js"></script> <script> // 创建一个vue对象 new Vue({ el: '#app',//绑定vue作用的范围 data: {//定义页面中显示的模型数据 message: 'Hello Vue!' } }) </script> </body> </html>
