三千幻想乡

不过该文件中要填充的字段太多，所以npm官方提供了 npm init 命令帮助我们快速初始化 package.json 文件，根据你选的选项不同，文件中的字段可能有所不同，所以这一步实际上就是帮你把Vue的工程目录创建出来并且往package.json中填充一些字段以供后续安装依赖。要做一个动态网页，光有前端UI是不够的，还得与后端交互，以及有数据持久存储。仅仅用Vue是无法做出那样的网页的，所以需要一门后端/服务端语言，而在Nodejs的加持下，JS就可以实现那样的效果，去访问更多的计算机资源。

虽然Vue的声明性渲染模型为你抽象了大部分对DOM的直接操作，但在某些情况下，我们仍然需要直接访问底层DOM元素。要实现这一点，我们可以使用特殊的 ref attribute：ref 是一个特殊的attribute，和 v-for 章节中提到的 key 类似。它允许我们在一个特定的DOM元素或子组件实例被挂载后，获得对它的直接引用。这可能很有用，比如说在组件挂载时将焦点设置到一个input元素上，或在一个元素上初始化一个第三方库。挂载结束后引用都会暴露在 this.$refs 之上：注意，你只可以在组件

每个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂在实例到 DOM，以及在数据改变时更新 DOM。然而在有些情况下，我们需要在状态变化时执行一些“副作用”：例如更改DOM，或是根据异步操作的结果去修改另一处的状态。watch 默认是浅层的：被侦听的属性，仅在被赋新值时，才会触发回调函数——而嵌套属性的变化不会触发。因此，在大多数场景下，你无需关心怎么停止它。回顾一下，响应式属性就是用响应式系统进行包装的对象的顶层属性，即data选项中返回的对象中的顶层属性。

对于需要使用IME（Input Method Editor，输入法编辑）的语言（中日韩文），你会发现 v-model 不会在 IME 输入还在拼字阶段时出发更新。true-value 和 false-value attributes 不会影响 value attribute，因为浏览器在表单提交时，并不会包含未选择的复选框。因此，我们建议提供一个空值的禁用选项，如上例所示。HTML表单用于搜集不同类型的用户输入，它表示网页文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到Web服务器。

我们可以使用 v-on 指令（简写位@）来监听DOM事件，并在事件触发时执行对应的JavaScript。用法：v-on:click=“methodName” 或 @click=“handler”。事件处理器的值可以是：内联事件处理器通常用于简单场景（内联这玩意儿，也称行内，一般是写在标签上的，这就注定了它不宜搞太复杂），例如：1.3. 方法事件处理器随着事件处理器的逻辑变得复杂，内联代码方式变得不够灵活。因此 v-on 也可以接受一个方法名或对某个方法的调用。举例来说：方法事件处理器会自动接收原生

Vue实现了一些巧妙的方法来最大化对DOM元素的重用，因此用另一个包含部分重叠对象的数组来做替换，仍会使一种非常高效的操作。推荐在任何可行的时候为 v-for 提供一个 key attribute，除非所迭代的DOM内容非常简单（例如：不包含组件或有状态的DOM元素），或者你有意采用默认行为来提高性能。为了给Vue一个提示，以便它可以跟踪每个节点的标识，从而重用和重新排序现有的元素，你需要为每个元素对应的块提供一个唯一的 key attribute。你也可以使用 v-for 来遍历一个对象的所有属性。

在这种情况下我们可以在一个 元素上使用 v-if ，这只是一个不可见的包装器元素，最后渲染的结果并不会包含合格 元素。总的来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。对于只有一个根元素的组件，当你使用了 class attribute 时，这些class会被添加到根元素上，并与该元素上已有的class合并。和 v-else 类似，一个使用 v-else-if 的元素必须紧跟在一个 v-if 或一个 v-else-if 元素后面。

若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。想象一下我们有一个非常耗性能的计算属性 list ，需要循环一个巨大的数组并做许多计算逻辑，并且可能也要其他计算属性依赖于 list。更改快照是没有意义的，因为计算属性的返回值应该被视为只读的，并且永远不应该被更改——应该更新它所依赖的源状态以触发新的计算。更重要的是，如果在模板中需要不止一次这样的计算，我们可不想将这样的代码在模板里重复好多遍。计算属性默认是只读的。

每个Vue应用都是通过createApp函数创建一个新的 应用实例 ：1.2. 根组件传入createApp的对象实际上是一个组件，每个应用（app）都需要一个“根组件”，其他组件将作为其子组件。如果你使用的是单文件组件，我们可以直接从另一个文件中导入根组件。虽然本文的许多示例只需要一个组件，但大多数真实的应用都是由一课嵌套的、可重用的组件树组成的。例如，一个代办事项（Todos）应用的组件树可能是这样的：1.3. 挂载应用应用实例必须在调用了.mount()方法后才会渲染出来。该方法接收一个“容

以前写桌面程序比较多，最近发现客户现场有许多网页端的系统，客户说这种网页端系统非常方便，输个IP就能访问了。确实，这是B/S相对于C/S一个很大的优势。那好嘛，既然客户喜欢，也为了增加个人竞争力，我也得做起来，顺便扩充一下自己的技术栈。但我已经很久没接触网页了，上次写的时候还是用最原始的HTML、CSS和JS。于是，第一步我决定进行一个技术选型，了解一下现在有哪些较新的网页技术。通过一些招聘网、技术群、百度，我发现 Vue 和 React ，这两种技术出现的比较多。所以我决定从这两者中进行选择。稍微了解