下面是本文的屏幕录像的在线视频:
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
下图是文章大纲:
一、概述
Vue(发音为/vjuː/,类似于view)是用于构建用户界面的渐进式框架。与其他整体框架不同,Vue从头开始设计以逐渐采用。核心库仅集中在视图层,并且易于拾取并与其他库或现有项目集成。另一方面,当与现代工具和支持库结合使用时,Vue也完全能够为复杂的单页应用程序提供支持。
常见的高级功能:
如果您想在开始学习之前了解有关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)建立联系。
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指令可用于循环数组中的数据,以显示项目列表:
-
{
{ todo.text }}
示例代码:07-ListRendering.html
十、组件系统
组件系统是Vue中另一个重要的概念,因为它是一种抽象,它使我们能够构建由小型,独立且经常可重用的组件组成的大规模应用程序。如果我们考虑一下,几乎任何类型的应用程序接口都可以抽象为组件树:
在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属性。但是,有一些主要区别:
尽管Vue在内部不使用自定义元素,但是当使用或分发自定义元素时,它具有很大的互操作性。Vue CLI还支持构建将自身注册为本地自定义元素的Vue组件。