一、创建文件夹
二、引用vue.js
<script src="../js/vue.js"></script>
三、准备一个容器
<div id="app"><h1>Hello,{{name}}</h1>
</div>
四、创建实例
<script>new Vue({el:"#app", //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串data:{ //data中用于存储数据，数据供el所指定的容器去使用name:'小田'}})
</script>
五、效果图
六、整体代码
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1.0"><title>tian</title><script src="../js/vue.js"></script>
</head>
<body>
<!--准备好一个容器-->
<div id="app"><h1>Hello,{{name}}</h1>
</div><script>//创建Vue实例new Vue({el:"#app", //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串data:{ //data中用于存储数据，数据供el所指定的容器去使用name:'小田'}})
</script>
</body>
</html>
七、总结
- 想让vue工作，必须创建一个vue实例，且传入一个配置对象
- app容器代码依然符合html规范
- app容器代码被称为Vue模板
