Vue入门

Vue是一个轻量级、简单易学且具有双向数据绑定和组件化的JavaScript框架,强调视图层并提供高效的数据绑定。它允许开发者仅关注数据,而框架负责更新视图。相比库,框架如Vue提供了完整的解决方案,控制应用程序的流程,具有侵入性较低的特点,允许代码高度复用和移植。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、vue是什么?

Vue是一个构建用户界面(UI)的[渐进式]JavaScript框架。

渐进式:渐进式的意思就是 "主张最少"。每个框架都会有自己的一套编码方式,从而对使用者有一定的要求,这些要求就是主张/约束,主张有强有弱,它的强势程度会影响业务开发中的使用方式。通俗理解渐进式的意思就是:你可以只用我的一部分,而不是用了我这一部分就必须用我的所有部分。

vue的优点:

Vue优点:
               a.轻量级的框架:只关注视图层,是一个构建数据的视图集合,大小只有几十kb。Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统。
               b.简单易学:国人开发,中文文档,不存在语言障碍,易于理解和学习。
               c.双向数据绑定:同时也是vue.js最大的优点,通过MVVM思想实现数据的双向绑定,让开发者不用再操作dom对象,有更多的时间去思考业务逻辑。
               d.组件化:在前端应用里我们是否也可以像面向对象编程一样把模块封装呢?这就引入了组件化开发的思想。Vue.js通过组件,把一个单页应用中的各种模块拆分到一个一个单独的组件(component)中,
                               我们只要先在父级应用中写好各种组件标签(占坑),并且在组件标签中写好要传入组件的参数(就像给函数传入参数一样,这个参数叫做组件的属性),然后再分别写好各种组件的实现(填坑),然后整个应用就算做完了。
               e.视图&数据&结构分离:使数据的更改更为简单,不需要进行逻辑代码的修改,只需要操作数据就能完成相关操作。
               f.运行速度快

2、库和框架的区别

 2.1 库(Library),本质上是一些函数的集合。每次调用函数,实现一个特定的功能,接着把控制权交给使用者
      代表:jQuery 
      jQuery这个库的核心:DOM操作,即:封装DOM操作,简化DOM操作
      JavaScript:document.getElementById()
      jQuery:    $('').val()


  2.2 框架(Framework),是一套完整的解决方案,使用框架的时候,需要把你的代码放到框架合适的地方,框架会在合适的时机调用你的代码 
      代表:自定义mvc、SpringMVC、vue等。
      框架规定了自己的编程方式,是一套完整的解决方案
      使用框架的时候,由框架控制一切,我们只需要按照规则写代码
      框架的侵入性很高(从头到尾)
  
     侵入式代码:
    a.指的是引入或继承了别的包或框架;
    b.从字面意思理解,就是你的代码里已经嵌入了别的代码,这些代码可能是你引入过的框架,也可能是你通过接口继承得来的(比如:java中的继承),这样你就可以拥有侵入代码的一些功能。所以我们就称这段代码是侵入式代码。
    c.比如:自定义MVC框架就是侵入式框架。我们在在使用自定义MVC框架的时候就要继承自定义MVC框架所提供中央调度器(DispatchServlet),这时自定义MVC框架的代码就侵入到我们的代码里面了,所以自定义MVC框架的代码就是侵入式的。
    d.侵入式代码的优点:侵入式可以使用户跟框架更好的结合,更容易更充分的利用框架提供的功能。
    e.侵入式代码的缺点:侵入式让用户代码产生对框架的依赖,框架外代码就不能使用了,不利于代码复用,依赖太多重构代码太痛苦了。一句话概括就是,你的代码需要依赖框架的代码,如果把框架拿掉或者换一个框架,就需要重新修改代码(因为使用侵入式的框架,一般需要继承或者实现框架的某一个类或者接口)。

     非侵入式代码:
         a.非侵入式与侵入式正好相反,用户的代码不需要引入框架代码的信息,从类的编写者角度来看,察觉不到框架的存在。
    b.非侵入式代码优点:代码可复用,方便移植。体现了代码的设计原则:高内聚,低耦合。
    c.非侵入式代码缺点:用户代码与框架代码交互的方式可能就比较复杂。
    d.Vue框架就是非侵入式框架。

### Vue.js 入门教程 #### 安装与引入 Vue.js 为了开始使用 Vue.js,在开发环境中可以采用如下方式来加载 Vue 的开发版本,该版本包含了有助于调试的命令行警告: ```html <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ``` 对于生产环境,则推荐使用精简过的生产版以减少文件大小和优化性能[^1]。 #### 创建第一个 Vue 应用程序 创建一个简单的 Vue 实例通常涉及以下几个部分:导入 Vue 和其他必要的模块、配置组件以及挂载到 DOM 上。下面是一个基本的例子展示如何设置一个新的 Vue 应用程序实例并将其渲染至页面上的特定 HTML 元素内: ```javascript import Vue from 'vue'; import App from './App.vue'; import router from './router'; new Vue({ router, render: h => h(App) }).$mount('#app'); ``` 这段代码首先通过 `import` 导入了所需的库和自定义组件 (`App`) 及路由配置(`router`);接着利用这些资源初始化了一个新的 Vue 实例,并指定了它应该呈现的内容(即 `render` 函数返回的结果)。最后调用了 `$mount()` 方法指定要附加此应用程序的具体位置——在这个例子中是 ID 为 `#app` 的元素[^2]。 #### 数据绑定基础 Vue 提供了一种非常直观的方式来管理视图中的动态数据。可以通过在 JavaScript 中定义对象属性作为响应式的源数据,然后轻松地将它们链接到模板内的表达式或指令上。这里有一个更具体的案例说明怎样做: ```html <div id="root"> {{ message }} </div> <script type="text/javascript"> const vm = new Vue({ el: '#root', data: { message: 'Hello Vue!' } }); // 或者也可以显式调用 mount 方法 // vm.$mount('#root') </script> ``` 在此示例里,当浏览器解析上述脚本时,会在页面上显示字符串 `"Hello Vue!"` 。这是因为我们已经把变量 `message` 绑定到了 `<div>` 标签内部的位置,每当这个值发生变化的时候,相应的文本也会自动更新[^3]。 #### 总结 以上就是关于 Vue.js 基础入门的一些核心概念和技术要点。希望这能帮助理解如何快速搭建起基于 Vue 技术栈的应用项目框架结构。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值