VUE小白之路
创建html页面儿
首先要知道一个完整的页面儿由html+css+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>
Hello World
</body>
</html>
在浏览器中打开编辑好的html文件
效果图：
菜鸟方式引入vue的js
请参考vue.js官网
vue官网
从官网上的vue.js 的源文件调用代码直接拷贝到index.html页面
**
注意了：
接下来的部分咱们就要一起开始vue代码啦！！！**
<!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">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<title>菜鸟猿-小毅</title>
</head>
<body>
<div id="app">
<!-- HTML部分 -->
<p>{{message}}</p>
</div>
<script>
// js部分
new Vue({ // 首先创建一个Vue的实例，这个实例接收一些配置项
el:"#app", // el 配置项指实例负责管理的区域； #app 指 id="app" 的dom标签里的所有内容（只对其有效）
data:{
message:'我们的第一个 hello World'
}
})
</script>
</body>
</html>
<style>
/* css部分 我们暂时不写*/
</style>
到现在为止我们就完成了一个简单的vue实例了
*下一章：*节我们会对vue的常用指令及其基本原理做出详细的讲解
欢迎各位想要自学vue的同学，跟着 小毅 一起学习，有什么疑问都可以给博主小毅留言。博主乐意做出详细的解析。
下一章：熟悉vue的常用命令
2917
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
