光脚丫思考Vue3与实战:第01章 初步认识Vue3

下面是本文的屏幕录像的在线视频:

01-初步认识Vue.js-PART1

01-初步认识Vue.js-PART2

温馨提示:

1、视频下载:线上视频被压缩处理,可以下载高清版本:

PART1:https://pan.baidu.com/s/1XNGzWlGekGiXH9rV5hBXqA 提取码:cx3r 

PART2:https://pan.baidu.com/s/1dTcZnpK0Gpw0Au_XPAX-Lw 提取码:3xt8

2、示例代码:https://pan.baidu.com/s/1a00i_BRnZ0F4tsSttI3JTw 提取码:57yy 

下图是文章大纲:

光脚丫思考Vue3与实战:第01章 初步认识Vue3_第1张图片

一、概述

Vue(发音为/vjuː/,类似于view)是用于构建用户界面的渐进式框架。与其他整体框架不同,Vue从头开始设计以逐渐采用。核心库仅集中在视图层,并且易于拾取并与其他库或现有项目集成。另一方面,当与现代工具和支持库结合使用时,Vue也完全能够为复杂的单页应用程序提供支持。
常见的高级功能:

  • 解耦视图与数据。
  • 可复用的组件。
  • 前端路由。
  • 状态管理。
  • 虚拟DOM(Virtual DOM)。

如果您想在开始学习之前了解有关Vue的更多信息,我们创建了一段视频,介绍了核心原则和示例项目。
https://www.vuemastery.com/courses/intro-to-vue-3/intro-to-vue3

 

二、MVVM模式

Vue.js在设计上也使用MVVM(Model-View-ViewModel)模式。
MVVM模式是由经典的软件架构MVC衍生来的。当View(视图层)变化时,会自动更新到ViewModel(视图模型),反之亦然。View和ViewModel之间通过双向绑定(data-binding)建立联系。

光脚丫思考Vue3与实战:第01章 初步认识Vue3_第2张图片

Vue.js通过MVVM的模式拆分为视图与数据两部分,并将其分离。因此,你只需要关心你的数据即可,DOM的事情Vue会帮你自动搞定。

 

三、入门

温馨提示:官方指南假定您具有HTML,CSS和JavaScript的中级知识。如果您是前端开发的新手,那么第一步就不是进入框架的最佳方法-掌握基础知识然后再回来!以前使用其他框架的经验会有所帮助,但不是必需的。
试用Vue.js的最简单方法是使用Hello World示例,
1、在线地址:https://codepen.io/team/Vue/pen/KKpRVpx,随意在另一个选项卡中打开它,然后按照一些基本示例进行操作。
2、本地地址:https://pan.baidu.com/s/1a00i_BRnZ0F4tsSttI3JTw 提取码:57yy 
安装页面提供了更多安装Vue的选项,地址:https://v3.vuejs.org/guide/installation.html,稍后有专门的介绍视频。
注意:我们不建议初学者以开始vue-cli,特别是如果您还不熟悉基于Node.js的构建工具。

 

四、声明式渲染

Vue.js的核心是:使我们能够使用简单的模板语法声明性地将数据呈现到DOM:


    
Counter: { { counter }}

我们已经创建了第一个Vue应用程序!这看起来与呈现字符串模板非常相似,但是Vue在后台做了很多工作。数据和DOM现在已链接,并且所有内容现在都是响应式的。我们怎么知道?看下面的示例,其中counter属性每秒增加一次,您将看到呈现的DOM的变化:

示例代码:02-Counter.html

 

五、绑定元素属性v-bind

除了文本插值,我们还可以像这样绑定元素属性


    
Hover your mouse over me for a few seconds to see my dynamically bound title!

在这里,我们遇到了新的事物。v-bind您看到的属性称为指令指令是带有前缀v-以指示它们是Vue提供的特殊属性,并且您可能已经猜到了,它们将特殊的响应性行为应用于渲染的DOM。在这里,我们基本上是说“使用当前活动实例上的title属性,使该元素的属性保持最新message。”
示例代码:03-AttributeBinding.html

 

六、事件交互v-on

为了让用户与您的应用进行交互,我们可以使用v-on指令附加事件侦听器,以在实例上调用方法:


    

{ { message }}

请注意,在这种方法中,我们无需触摸DOM就可以更新应用程序的状态,所有DOM操作均由Vue处理,并且您编写的代码集中在基础逻辑上。
示例代码:04-EventHandling.html

 

七、数据双向绑定v-model

Vue还提供了一个v-model指令,使表单输入和应用程序状态之间的双向绑定变得轻而易举:


    

{ { message }}

示例代码:05-TwoWayBinding.html

 

八、条件指令v-if

同样,切换元素的存在也很容易,可以使用v-if指令:


    
Now you see me

此示例说明了我们不仅可以将数据绑定到文本和属性,还可以将其绑定到DOM的结构。此外,Vue还提供了功能强大的过渡效果系统,当Vue插入/更新/删除元素时,该系统可以自动应用过渡效果。
你可以改变seen从true到false在沙盘下面检查的效果:
示例代码:06-ConditionalRendering.html


九、循环指令v-for

还有很多其他指令,每个指令都有其自己的特殊功能。例如,该v-for指令可用于循环数组中的数据,以显示项目列表:


    
  1. { { todo.text }}

示例代码:07-ListRendering.html

 

十、组件系统

组件系统是Vue中另一个重要的概念,因为它是一种抽象,它使我们能够构建由小型,独立且经常可重用的组件组成的大规模应用程序。如果我们考虑一下,几乎任何类型的应用程序接口都可以抽象为组件树

光脚丫思考Vue3与实战:第01章 初步认识Vue3_第3张图片

在Vue中,组件本质上是具有预定义选项的实例。在Vue中注册组件非常简单:我们像对待对象一样创建一个组件对象,并App在parent的components选项中对其进行定义:

// Create Vue application
const app = Vue.createApp(...)

// Define a new component called todo-item
app.component('todo-item', {
  template: `
  • This is a todo
  • ` }) // Mount Vue application app.mount(...)

    现在,您可以在另一个组件的模板中编写它:

    但这会为每个待办事项呈现相同的文本,这并不是超级有趣。我们应该能够将数据从父范围传递到子组件中。让我们修改组件定义以使其接收prop:

    app.component('todo-item', {
      props: ['todo'],
      template: `
  • { { todo.text }}
  • ` })

    现在我们可以使用v-bind以下方式将待办事项传递到每个重复的组件中:

    
        

    这是一个人为的示例,但我们设法将我们的应用程序分成两个较小的单元,并且通过props接口将子级与父级很好地分离。现在,我们可以使用更复杂的模板和逻辑来进一步改进组件,而不会影响父应用程序。
    在大型应用程序中,有必要将整个应用程序划分为多个组件以使开发易于管理。我们将在本指南的后面部分讨论有关组件的更多信息,但这是一个(虚构的)示例,该示例显示了应用程序模板与组件的外观:

    示例代码:08-TodoList.html

    与自定义元素的关系

    您可能已经注意到,Vue组件与“自定义元素”非常相似,后者是Web组件规范的一部分。这是因为Vue的组件语法是按照规范松散建模的。例如,Vue组件实现了Slot API和isspecial属性。但是,有一些主要区别:

    • Web组件规范已完成,但并非在每个浏览器中都本机实现。Safari 10.1 +,Chrome 54+和Firefox 63+本机支持Web组件。相比之下,Vue组件在所有受支持的浏览器(具有兼容版本及更高版本的IE11)中均能正常工作。必要时,Vue组件也可以包装在本地自定义元素中。
    • Vue组件提供了重要的功能,这些功能在普通的自定义元素中不可用,最显着的是跨组件数据流,自定义事件通信和构建工具集成。

    尽管Vue在内部不使用自定义元素,但是当使用或分发自定义元素时,它具有很大的互操作性Vue CLI还支持构建将自身注册为本地自定义元素的Vue组件。

    你可能感兴趣的:(Vue.js,Vue3,Vue.js,Node.js,HTML,前端)