likes
comments
collection
share

初识 Vue 带你认识前端主流框架 渐进式js框架 vue

作者站长头像
站长
· 阅读数 18

初识Vue 改变js的开发模式

哈喽哈喽，我是你们的金樽清酒，最近啊刚开始学了点新的东西，刚接触了一点点就被迷住啦，它完全改变了我们的开发模式，使前端的开发变得更加的简洁高效，并且还具有很多强大的功能。

什么是vue？

Vue（发音为"view"）是一种流行的JavaScript框架，用于构建用户界面（UI）。它是一种渐进式框架，可以逐步地应用到项目中，也可以作为一个库来使用。Vue专注于视图层，提供了一些灵活的工具，使开发者能够更轻松地构建交互式的单页面应用（SPA）。

Vue具有以下特点：

  1. 响应式数据绑定： Vue使用双向绑定系统，能够简化数据和DOM元素之间的同步。当数据变化时，视图会自动更新，反之亦然。
  2. 组件化： Vue鼓励将应用拆分为可复用的组件，每个组件都有自己的状态和方法。这使得代码更易于维护和理解。
  3. 指令系统： Vue使用指令（Directives）来扩展HTML，使其具有更丰富的功能。例如，v-if、v-for、v-bind等指令允许你在模板中添加逻辑和控制结构。
  4. 虚拟DOM： Vue使用虚拟DOM来提高性能。通过在内存中维护一个虚拟的DOM树，Vue可以在必要时高效地更新实际DOM，而不是直接操作实际DOM。
  5. 生命周期： Vue组件具有生命周期钩子，可以在不同阶段执行特定的代码，例如在组件创建、更新或销毁时执行特定的逻辑。

总体而言，Vue是一个灵活、易学易用的前端框架，适用于构建现代的、交互式的用户界面。它在开发者社区中受到广泛欢迎，有着丰富的文档和生态系统，功能十分强大。

如何学习和使用Vue？

问到这个问题，如何去学习vue呢？诶，那肯定得去官网啊！！！，vue有丰富的文档和生态系统，你还害怕自己学不会或者不会用嘛。

  • 使用步骤

    1. 在浏览器搜vue，然后点击它的官方网站，下面就是它的官网。

初识 Vue 带你认识前端主流框架 渐进式js框架 vue

2.来到下面这个界面之后，点击快速上手

初识 Vue 带你认识前端主流框架 渐进式js框架 vue

3.进去之后我们可以看到右边就是它的学习的文档啦，我们可以按照文档的内容一步步的进行学习。这是不是跟h3cschool是一样的呢？特别方便新手小白去学习。这都得益于vue完整的体系结构。

初识 Vue 带你认识前端主流框架 渐进式js框架 vue

实践代码

我们如何去使用vue呢？那就是在html里面引入vue的连接。这个链接在官方里面有，我这里就直接给大家发出来吧。

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

温馨提示：一定要记得这个script链接要放在你写的js的上面哦

接下来，让我们看一个小demo来看一下vue的用法和它的神奇之处吧

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
    <div id="app"></div>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>//引入vue框架
    <script type="x-template" id="my-id">
      <div>
       <h2>{{title}}</h2>
       <h2>{{count}}</h2>
       <button @click ="add">+1</button>
       <button @click ="del">-1</button>
      </div>
    </script>
<script>
    Vue.createApp({
        template:`#my-id`,
        data(){//数据源    响应式数据源
            return {
                title:'你好世界',
                count:1
            }
        },
        methods:{
            add(){
                this.count++
            },
            del(){
                this.count--//为什么this这么指向呢？
            }
        }
    }).mount(`#app`)
</script>


</body>
</html>

效果展示

如图所示，我将一些元素挂载到原先创建的盒子里，并且点击按钮我可以实现数字的加减。 初识 Vue 带你认识前端主流框架 渐进式js框架 vue

初识 Vue 带你认识前端主流框架 渐进式js框架 vue

在第10行中，我们写了一个id为app的空盒子，这个盒子有什么用呢？我们的内容就是挂载到这个盒子里面。14行到17行，我们定义了两个变量，和两个按钮并且添加了点击事件，这些都是vue的写法哦。接下来让我们看到vue的结构。17行首先我们用template：#my-id复用html里面的模板，我的理解是引入那些模板变量。然后data里面就是数据源，都是键值对的形式，注意一定不要忘记return 哦。methods里面是专门用来写函数功能的，怎么样是不是分类明确简单高效。但是这里有一个问题大家有没有发现，那就是这个this，按道理来说不应该是this.data.count++或this.data.count--嘛，其实为了使用者的方便，vue的作者已经帮我们简化掉啦，具体怎么做的我也不知道，虽然不好理解但是简单高效，想一想我们要操作的东西不是都在data里面嘛，毕竟是数据源。最后一步.mount('#app'),就是将内容挂载到刚开始创建的盒子里面。如果用传统的开发方式，我们要达到这个效果要写很多个dom结构，然而vue就可以直接创建操作dom结构，而且不会出现页面刷新，即无痕修改，怎么样vue是不是很强大呢？然而这只是它的冰山一角。

结语

探索一个迷人的东西就像走进一片神秘的森林，你不知道会遇到什么美好的景象或者令人惊奇的事物。这个过程充满了发现和惊喜，让人兴奋不已。

或许，你可以探索一座陌生的城市，漫步在街头巷尾，发现那些隐藏在城市中的小而美的角落。每一座城市都有自己独特的文化和故事，等待着你去发现。

或者，你可以深入学习一门新的艺术或技能，比如绘画、音乐、编程或烹饪。通过掌握新的技能，你不仅能够拓展自己的视野，还可能发现内心深处的激情和天赋。

另一种方式是沉浸在自然中，例如徒步旅行到未知的山区或者潜水探索海底世界。大自然总是充满了各种神秘和美丽，而去探索这些地方可以让你深刻地感受到生命的奇迹。

无论选择何种方式，探索一个迷人的东西都是一个令人兴奋和充实的过程，让你感受到生活的多样性和无限可能。

转载自:https://juejin.cn/post/7310112724945092608
评论
请登录