一、创建文件夹
二、引用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模板
3550
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
