下面是本文的屏幕录像的在线视频：
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也完全能够为复杂的单页应用程序提供支持。
常见的高级功能：
- 解耦视图与数据。
- 可复用的组件。
- 前端路由。
- 状态管理。
- 虚拟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)建立联系。
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：
<body>
<div id="counter">
Counter: {{ counter }}
</div>
</body>
<script>
const Counter = {
data() {
return {
counter: 0
}
}
}
Vue.createApp(Counter).mount('#counter');
</script>我们已经创建了第一个Vue应用程序！这看起来与呈现字符串模板非常相似，但是Vue在后台做了很多工作。数据和DOM现在已链接，并且所有内容现在都是响应式的。我们怎么知道？看下面的示例，其中counter属性每秒增加一次，您将看到呈现的DOM的变化：
<script>
const Counter = {
data() {
return {
counter: 0
}
},
mounted() {
setInterval(() => {
this.counter++
}, 1000)
}
}
Vue.createApp(Counter).mount('#counter');
</script>示例代码：02-Counter.html
五、绑定元素属性v-bind
除了文本插值，我们还可以像这样绑定元素属性：
<body>
<div id="bind-attribute">
<span v-bind:title="message">
Hover your mouse over me for a few seconds to see my dynamically bound
title!
</span>
</div>
</body>
<script>
const AttributeBinding = {
data() {
return {
message: 'You loaded this page on ' + new Date().toLocaleString()
}
}
}
Vue.createApp(AttributeBinding).mount('#bind-attribute')
</script>
在这里，我们遇到了新的事物。v-bind您看到的属性称为指令。指令是带有前缀v-以指示它们是Vue提供的特殊属性，并且您可能已经猜到了，它们将特殊的响应性行为应用于渲染的DOM。在这里，我们基本上是说“使用当前活动实例上的title属性，使该元素的属性保持最新message。”
示例代码：03-AttributeBinding.html
六、事件交互v-on
为了让用户与您的应用进行交互，我们可以使用v-on指令附加事件侦听器，以在实例上调用方法：
<body>
<div id="event-handling">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button>
</div>
</body>
<script>
const EventHandling = {
data() {
return {
message: 'Hello Vue.js!'
}
},
methods: {
reverseMessage() {
this.message = this.message
.split('')
.reverse()
.join('')
}
}
}
Vue.createApp(EventHandling).mount('#event-handling');
</script>请注意，在这种方法中，我们无需触摸DOM就可以更新应用程序的状态，所有DOM操作均由Vue处理，并且您编写的代码集中在基础逻辑上。
示例代码：04-EventHandling.html
七、数据双向绑定v-model
Vue还提供了一个v-model指令，使表单输入和应用程序状态之间的双向绑定变得轻而易举：
<body>
<div id="two-way-binding">
<p>{{ message }}</p>
<input v-model="message" />
</div>
</body>
<script>
const TwoWayBinding = {
data() {
return {
message: 'Hello Vue!'
}
}
}
Vue.createApp(TwoWayBinding).mount('#two-way-binding');
</script>示例代码：05-TwoWayBinding.html
八、条件指令v-if
同样，切换元素的存在也很容易，可以使用v-if指令：
<body>
<div id="conditional-rendering">
<span v-if="seen">Now you see me</span>
</div>
</body>
<script>
const ConditionalRendering = {
data() {
return {
seen: false
}
}
}
Vue.createApp(ConditionalRendering).mount('#conditional-rendering');
</script>此示例说明了我们不仅可以将数据绑定到文本和属性，还可以将其绑定到DOM的结构。此外，Vue还提供了功能强大的过渡效果系统，当Vue插入/更新/删除元素时，该系统可以自动应用过渡效果。
你可以改变seen从true到false在沙盘下面检查的效果：
示例代码：06-ConditionalRendering.html
九、循环指令v-for
还有很多其他指令，每个指令都有其自己的特殊功能。例如，该v-for指令可用于循环数组中的数据，以显示项目列表：
<body>
<div id="list-rendering">
<ol>
<li v-for="todo in todos">
{{ todo.text }}
</li>
</ol>
</div>
</body>
<script>
const ListRendering = {
data() {
return {
todos: [{
text: 'Learn JavaScript'
},
{
text: 'Learn Vue'
},
{
text: 'Build something awesome'
}
]
}
}
}
Vue.createApp(ListRendering).mount('#list-rendering');
</script>示例代码：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: `<li>This is a todo</li>`
})
// Mount Vue application
app.mount(...)现在，您可以在另一个组件的模板中编写它：
<ol>
<!-- Create an instance of the todo-item component -->
<todo-item></todo-item>
</ol>但这会为每个待办事项呈现相同的文本，这并不是超级有趣。我们应该能够将数据从父范围传递到子组件中。让我们修改组件定义以使其接收prop：
app.component('todo-item', {
props: ['todo'],
template: `<li>{{ todo.text }}</li>`
})现在我们可以使用v-bind以下方式将待办事项传递到每个重复的组件中：
<body>
<div id="todo-list-app">
<ol>
<!--
Now we provide each todo-item with the todo object
it's representing, so that its content can be dynamic.
We also need to provide each component with a "key",
which will be explained later.
-->
<todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item>
</ol>
</div>
</body>
<script>
const TodoList = {
data() {
return {
groceryList: [{
id: 0,
text: 'Vegetables'
},
{
id: 1,
text: 'Cheese'
},
{
id: 2,
text: 'Whatever else humans are supposed to eat'
}
]
}
}
}
const app = Vue.createApp(TodoList);
app.component('todo-item', {
props: ['todo'],
template: `<li>{{ todo.text }}</li>`
});
app.mount('#todo-list-app');
</script>
这是一个人为的示例，但我们设法将我们的应用程序分成两个较小的单元，并且通过props接口将子级与父级很好地分离。现在，我们可以<todo-item>使用更复杂的模板和逻辑来进一步改进组件，而不会影响父应用程序。
在大型应用程序中，有必要将整个应用程序划分为多个组件以使开发易于管理。我们将在本指南的后面部分讨论有关组件的更多信息，但这是一个（虚构的）示例，该示例显示了应用程序模板与组件的外观：
<div id="app">
<app-nav></app-nav>
<app-view>
<app-sidebar></app-sidebar>
<app-content></app-content>
</app-view>
</div>示例代码：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组件。
172
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
