Vue2入门之超详细教程二-hello Vue
1、简介
话说盘古开天~，咳咳 放错片了，学习任何语言都要有这么一个仪式，那就是hello world，我们从hello vue开始认识vue是怎么工作的。
学习Vue之前最后会一些HTML和CSS的基础知识，HTML基础知识 传送门，CSS基础知识 传送门。
2、Hello Vue
1. 单纯的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> <div id="root"> <h1>hello Vue</h1> </div> </body> </html>
在浏览器中查看
以上效果纯粹是HTML的效果和Vue一毛钱关系都没有，那小伙伴肯定会有疑问，那我们Vue呢，是做什么的，不要着急我们接着看。
2. 引入Vue样式
根据上面的纯HTML代码写出来的hello Vue，感觉也挺好的，为什么要引入Vue呢？思考一下，如果有一个需求，我们需要再页面中显示hello ??? 问号表示不同的数据，你也不知道会向谁打招呼，那我们使用纯HTML代码怎么实现？穷举吗，如果这样写会被领导打死。
引入Vue，在HTML代码的head中中输入以下内容（以后我们默认head中已经引入了，不在强调）：
<script type="text/javascript" src="../js/development/vue.js"></script>
在body中输入以下代码：
<script type="text/javascript"> Vue.config.productionTip = false //组织vue在启动时生成生产提示 //创建Vue实例 const vm = new Vue({ el:"#root", //element的简称，用来查找ID为root的标签 data:{ //data中存储的数据，供el容器中的对象所使用 name:'world' } }) </script>
修改div标签
<div id="root">
<h1>hello vue</h1>
</div>
为：
<div id="root">
<h1>hello {{name}}</h1>
</div>
我们来解释一下做的内容是什么，(1)首先在body中写了一个script块，Vue.config.productionTip = false是消除生产提示信息的，在第一章小结中做了介绍，后面不在赘述了,(2)接下来创建了一个Vue实例，const vm = new({})，{}括号中的是配置信息，(3)el是element的简称，可以用来做HTML标签的定位，语法同CSS一样，不会的小伙伴可以看我“CSS基础知识”相关内容，data是用来存储数据的key，其中放了一个name变量，值是vue，(4)<h1>hello {{name}}</h1>表示使用name变量。
完整代码：
<!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> <script type="text/javascript" src="../js/development/vue.js"></script> </head> <body> <div id="root"> <h1>hello {{name}}</h1> </div> <script type="text/javascript"> Vue.config.productionTip = false //组织vue在启动时生成生产提示 //创建Vue实例 const vm = new Vue({ el:"#root", //element的简称，用来查找ID为root的标签 data:{ //data中存储的数据，供el容器中的对象所使用 name:'world' } }) </script> </body> </html>
在vscode中右键，点击open with live server
看显示已经变成了我们data中name的值了，细心的小伙伴可能已经发现了，出现了一个错误信息，这个一会我们在小结中解决。
还有的小伙伴可能会觉得我比HTML多写了这么多代码，实现效果和纯HTML差不多，有什么用，别急，如果只是把Vue换成world显示，肯定没什么不同，但如果你不知道和谁打招呼呢？
3、小测试
1. 多个容器对应一个实例
- 修改div标签中的ID为class标签，并且复制一份
- 修改vue实例中el的查询规则为class
完整代码如下：
<!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> <script type="text/javascript" src="../js/development/vue.js"></script> </head> <body> <div class="root"> <h1>hello {{name}}</h1> </div> <div ckass="root"> <h1>{{}}hello {{name}}</h1> </div> <script type="text/javascript"> Vue.config.productionTip = false //组织vue在启动时生成生产提示 //创建Vue实例 const vm = new Vue({ el:".root", //element的简称，用来查找ID为root的标签 data:{ //data中存储的数据，供el容器中的对象所使用 name:'world' } }) </script> </body> </html>
3. 使用 open with live server打开浏览器查看效果
我们会发现只有第一个{{nama}}被替换了，第二个被当做文本输出了，而且没有报错，这是为什么呢？这会不会是因为容器1把变量取走了，容器2就无法获取到了。
我们再修改一下代码继续做测试，在vue的data中加入一个新的变量addr，在容器二中去引用
完整代码：
<!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> <script type="text/javascript" src="../js/development/vue.js"></script> </head> <body> <div class="root"> <h1>hello {{name}}</h1> </div> <div ckass="root"> <h1>hello {{addr}}{{name}}</h1> </div> <script type="text/javascript"> Vue.config.productionTip = false //组织vue在启动时生成生产提示 //创建Vue实例 const vm = new Vue({ el:".root", //element的简称，用来查找ID为root的标签 data:{ //data中存储的数据，供el容器中的对象所使用 name:'world', addr:"北京" } }) </script> </body> </html>
查看浏览器效果：容器2中addr还是没有获取到值
2. 多个实例对应一个容器
- 只有一个容器，标签还是ID选择器
- 复制一个Vue实例，一个实例的name值为world一个实例的name值为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"> <title>Document</title> <script type="text/javascript" src="../js/development/vue.js"></script> </head> <body> <div id="root"> <h1>hello {{name}}</h1> </div> <script type="text/javascript"> Vue.config.productionTip = false //组织vue在启动时生成生产提示 //创建Vue实例 const vm = new Vue({ el:"#root", //element的简称，用来查找ID为root的标签 data:{ //data中存储的数据，供el容器中的对象所使用 name:'world', } }) const vm1 = new Vue({ el:"#root", //element的简称，用来查找ID为root的标签 data:{ //data中存储的数据，供el容器中的对象所使用 name:'vue', } }) </script> </body> </html>
刷新查看效果：
同一个变量可能看不出效果，我们修改Vue实例2，在其中增加一个addr变量，然后在容器中引用，完整代码如下：
<!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> <script type="text/javascript" src="../js/development/vue.js"></script> </head> <body> <div id="root"> <h1>hello {{addr}}{{name}}</h1> </div> <script type="text/javascript"> Vue.config.productionTip = false //组织vue在启动时生成生产提示 //创建Vue实例 const vm = new Vue({ el:"#root", //element的简称，用来查找ID为root的标签 data:{ //data中存储的数据，供el容器中的对象所使用 name:'world', } }) const vm1 = new Vue({ el:"#root", //element的简称，用来查找ID为root的标签 data:{ //data中存储的数据，供el容器中的对象所使用 name:'vue', addr:"北京朝阳" } }) </script> </body> </html>
刷新查看效果：此时console控制台报错了，说addr没有找到
3. 总结
根据我们做的实验可以得出，一个容器只能对应一个Vue实例 一个Vue实例也只能对应一个容器，所以容器和Vue实例只能是1对1的关系。
4、小结
该章节我们需要掌握如何引入Vue，如何确认Vue是否引入成功，以及需要知道Vue和容器的关系是什么样的。
5、过程中遇到的错误及解决办法
GET http://127.0.0.1:5500/favicon.ico 404 (Not Found)解决办法
该错误是因为使用Vs code 中的open in live server打开页面时，vs code会默认开启一个5500端口作为服务器，页面加载时会访问一个favicon.ico的文件，该文件作用页面中的title小图标
我们只需要在Vue目录下放一个叫favicon.ico的图片文件就好了
按住shift+刷新按钮强制刷新看一下效果
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步