Explain Vue to Me

twitter logo github logo ・1 min read

讲解JavaScript(5部分系列)

1) Explain React to Me 2) Explain Vue to Me 3) Explain Angular to Me 4) Explain the Frontend Webdev Ecosystem to Me 5) Explain the State of WebAssembly to Me

继续在React文章之后,这将是一个系列,我在其中要求提供不同JavaScript概念的解释器.

您将如何解释核心概念,以及VueJS对无知的程序员的吸引力?

快乐编码❤️

twitter logo DISCUSS (23)
markdown guide
 

Vue组件的外观如下所示:

<template>
    <div>{{msg}}</div>
</template>
<script>
export default{
    data(){
        return {
            msg: 'Hi I came from JavaScript'
        }
    },
    mounted(){
        setTimeout(() => this.msg = 'I came 3seconds after the component mounted', 3000)
    }
}
</script>
<style scoped>
/* I will only be applied over HTML above, since I have optional 'scoped' attribute */
div{color:red}
</style>

因此,每个组件都可以具有自己的模板样式和脚本.

就像安装一样,还有其他生命周期挂钩,例如beforeCreate,created,beforeMount,mount等.

Vue充分利用了Angular和React的优势.

(我已经考虑到Vue 2编写了此代码,但尚未使用Vue 3)

我看到的一个优势是,对于以前只使用纯html,css和javascript的人来说,Vue不会给他学习任何多余的东西(尽管有些东西需要学习,但是他仍然可以在没有任何先验知识的情况下阅读Vue代码. )

 

很好的答案,Vue是我在这三者中最喜欢的,在看到有多少开源项目(和工作)使用Vue之后,我才考虑使用React

 

"因此,每个组件都可以拥有自己的模板样式和脚本."

我不知道组件有性别. 很高兴知道. 每天学些新东西.

 
 

我喜欢默认情况下的单个文件组件. 我从未真正喜欢整个JS逻辑像对象属性那样分解的整个事物. 它降低了我编写代码的灵活性. 我敢肯定有些人一定喜欢它,但这并不是真的. 您能否详细说明为什么要这么做? 帮我明白 我想更多地使用vue

 

我从未真正喜欢整个JS逻辑像对象属性那样分解的整个事物.

您是指在脚本标签的export default中包含属性吗? 我认为这很有用,因为如果其他人阅读了我的代码,他会知道去哪里查看在安装或更新组件时发生了什么,或者他可以通过简单地查看数据就知道我正在使用什么变量.

 
 

样式标签的作用范围是什么? 没看过.

 

它修改了类以使它们对于该组件是唯一的,从而将该样式限定为该组件

 

Vue允许您使用已知的语法将Web应用程序分解为小型,可重用的组件-HTML用于编写组件模板,用于状态管理和事件处理的JavaScript和用于样式的CSS. 无需学习JS中的JSX或CSS.

与React等其他框架一样,Vue会在状态更改时自动为您更新DOM-无需手动DOM更新. 只需更改组件状态,DOM的正确部分就会更新.

Vue旨在逐步采用. 您可以从脚本标签非常快速地开始,而无需构建步骤,并且仅了解基础知识. 如果您的应用程序需要它,您可以根据需要学习许多高级功能-动画和渲染功能,以及使用Vuex进行更高级的舞台管理. 因此,Vue在扩展规模以支持大型企业应用程序方面做得很好.

 

Vue就像一个骆驼. 无论环境如何,它都能适应. 森林,山脉,平原沙漠等.它会相应地发展和扩展. 您可以使用简单的脚本将其包含在静态网站中,并仅为登录按钮创建Vue组件(将登录名/密码发送到服务器,接收令牌,并将其存储在localstorage中). 或创建一个包含路由器(VueRouter),更复杂的数据交换系统(VueX)的完整Vue应用程序,该应用程序具有与React一样的可重用组件. 由于其非常简单的集成,您可以在Vue中完成整个应用程序的15%,50%. 它使用Web开发人员已知的概念,没有用于编写虚拟DOM的新语法:只是将HTML巧妙地转换为JavaScript. 感觉就像是编写另一个带有JavaScript和CSS的HTML页面一样. 但这是Vue组件! 哈哈,你刚刚被恶作剧...

 

"向我解释VUE"是一种Google搜索,通过在google.com搜索引擎上首先显示相同的帖子,在seo索引中显示出无限递归循环.

google.com/search?q=Explain+Vue+to...

 
 

如果要向我的过去自我解释Vue,那么对话将是这样的.

老我-您知道到处都可以看到的那些Jquery小部件吗? 那些日期选择器和自动完成的东西?

年轻(我)-是的,我已经看过了.

OM-好吧... Vue是一个小部件工厂.

YM-说什么?

OM-它是这样的. 通过在模板标签中编写" html"并在样式标签中编写css,为Vue提供小部件外观的描述,然后使用纯js对象描述其外观,Vue将接受所有这些并将其展示给用户.

YM-那有什么比Jquery更好的呢?

OM-如果您确实使用Vue,则无需成为向导即可使用自动完成功能构建自己的输入. 您可以通过编写常规的html,css和js来制作一个.

 

它加快了开发速度并且易于学习,即使对于新手进行Web开发也很吸引我-无需学习真正复杂的语法.
我写了一篇非常基础的文章: dev.to/lucashogie/getting-started -...

 

Vue基于MVVM模式,适合渐进式Web应用程序或单页应用程序,可让您建立快速的用户体验. 最感兴趣的关键方面之一是2方向数据绑定,这为提供强大的实时功能同时保持用户参与度和不打扰其导航打开了可能性.

对我来说,这是Vue与并发的区别:

  • 使2种方式的数据绑定非常易于使用
  • 一流的附加组件(VueRouter,Vuex,Chrome VueDevTools ...)
  • 低障碍进入(可通过简单的CDN链接使用,易于切换到高级概念)
  • 易于扩展(可重复使用的组件,如果使用Webpack等捆绑软件,则可以使用SFC)
  • 非常活跃的社区(Vuei18n,Vuetify,Vue Native等)

完全不因这个是我构建前端Web应用程序的工具而偏颇的评论

 
 

从Angular到Vue令人不寒而栗. 链接到Vue.js ...然后去吗?

 

Yep it's just as you said it, "mind blowing".

我只是认为接下来发生的事情是ecma将添加我们在那些"很棒的框架"中拥有的功能,并且再次使用带有js,spa,router,state manager等基本库的vanilla js.

进化周期将继续.

 
 

作为一个全新的业余编码员,Vue通过围绕编码放置导轨和结构来帮助我. HTML本身就存在. 即使在Javascript部分中,事物也可以整齐地组织为计算属性,方法,生命周期挂钩. 它可以帮助我(新手)更快,更轻松地阅读代码.

我尝试了React一会儿,虽然有些事情看起来更开放,不那么费力,但是我发现自己在如何组织代码方面比在实际的代码上更加费劲. 虽然这对于全职开发人员可能会更好,但是我只是一个业余爱好者,我喜欢Vue使用的更加标准化的方法.

第一方路由器和状态管理也很有帮助. Vue更像是"我们在这里收集了烦人的东西,只是为您构建了它,因此您可以专注于制作产品".

 

Vue使将DOM(HTML标记)连接到数据变得非常容易,这使开发人员能够快速构建交互式界面.

Vue使其易于入门,因为它为html标签利用了一组自定义属性,这些属性添加了诸如循环,条件,数据绑定和事件监听之类的功能. 这种设计可以轻松地逐步采用Vue,轻松地从jQuery或静态HTML转换现有网站的一部分.

Vue不仅是将反应性(DOM <=>数据绑定)添加到现有项目的好工具,而且对于制作单页应用程序也非常有用. Vue的设计使其易于学习和使用,而不会牺牲性能或功能.

从8月14日开始的经典DEV帖子

What Does Your IDE/Code Editor Look Like?

Ben Halpern profile image
一位加拿大软件开发人员,认为他很有趣. 他/他.

by  ICOPY.SITE