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. 多个容器对应一个实例

  1. 修改div标签中的ID为class标签，并且复制一份
  2. 修改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. 多个实例对应一个容器

  1. 只有一个容器，标签还是ID选择器
  2. 复制一个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+刷新按钮强制刷新看一下效果

 

 

posted @   李荣洋  阅读(719)  评论(0)  编辑  收藏  举报
相关博文：
·  Vue2入门之超详细教程一-环境准备
·  Vue2入门之超详细教程十七-常用内置命令集合
·  13.VUE
·  vue2笔记完整版
·  Vue2 整理（一）：基础篇
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· C#/.NET/.NET Core技术前沿周刊 | 第 29 期（2025年3.1-3.9）
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
点击右上角即可分享
微信分享提示
SQL AI 助手