【Vue】初识Vue，Vue简介及Vue Devtools配置

• 前端

目录

      • 1. Vue是什么
      • 2. Vue的特点
      • 3. Vue的引入方式
      • 4. 安装Vue Devtools
      • 5. 第一个Vue案例

1. Vue是什么

关于这个问题官方给了我们答案：

一套用于构建用户界面的渐进式JavaScript框架

在这里插入图片描述

渐进式框架是指我们可以在项目中一点点来引入和使用Vue，而不一定需要全部使用Vue来开发整个项目；

2020年9月18日Vue3.0.0正式发布别名One Piece（没错就是海贼王）。

2. Vue的特点

  1. 采取组件化模式，提高代码复用率，且让代码更好维护。
  2. 声明式编码，让开发人员无需直接操作Dom，提高开发效率。
  3. 它基于标准 HTML、CSS 和 JavaScript 构建，并提供了一套声明式的、组件化的编程模型。
  4. 帮助你高效地开发用户界面，无论任务是简单还是复杂。

3. Vue的引入方式

  1. 直接使用

直接下载Vue的源码并用 标签引入，Vue 会被注册为一个全局变量,这里的路径要根据自己的实际情况进行设置

  1. 在页面中通过CDN的方式来引入；

    

    2. 



4. 安装Vue Devtools


首先要安装Vue Devtools这里直接使用edge浏览器来演示


在这里插入图片描述


点击管理扩展


在这里插入图片描述


在搜索框中搜索vue


在这里插入图片描述


选择这个扩展，点击获取，这里我已经安装过了，所以是删除。


在这里插入图片描述


在扩展设置里让Vue可以显示在栏上，同时点击vue扩展右侧的三个点，进入管理扩展


在这里插入图片描述


将这两个权限开放


5. 第一个Vue案例


编写我们的第一个小案例，不要忘记引入Vue的资源


在这里插入图片描述




    
    
    
    Document
    


    
        
hello,{{name}}

    
    
        Vue.config.productionTip = false;
        const x =new Vue({
            el:'#root',//指定el供哪个容器使用
            data:{
                name:"world"//data中存储数据，供容器使用
            }
        })
    
    





在浏览器打开我们编写的页面


在这里插入图片描述


熟悉的hello，world映入眼帘，我们的Vue就可以正常使用啦。

                                                        
本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/38cdaff3cd.html
                        

                        

                            

                            

                                
 赞 (0)


                                                            


                            

                                

                                                                        

                                        

                                                                                                                                                                            

                                        
                                        

                                            
                                        

                                    

                                

                            


                            

                                                                    

                                        
                                        

                                            « 上一篇
                                            1天前
                                        

                                    

                                                                                                    

                                        
                                        

                                            下一篇  »
                                            1天前
                                        

                                    

                                                            

                                                        
相关推荐