Vue学习20210314.pdf

Vue.js 是一款流行的前端JavaScript框架，用于构建用户界面。这篇文档是关于Vue的学习总结，主要涵盖了环境搭建、基本使用和Vue指令的介绍。 环境搭建是任何开发工作的基础。在搭建Vue开发环境时，我们需要安装一系列软件和工具，如VSCode编辑器，包括Vetur插件（提供代码高亮和格式化功能）、LiveServer（内置服务器）、HTML CSS Support（CSS自动补全）、Path Intellisense（路径自动补全）以及JavaScript和HTML的snippet插件，以提高开发效率。此外，为了加速下载速度，还安装了cnpm（淘宝npm镜像）以及Vue CLI（命令行工具）。安装webpack和webpack-cli用于模块打包，而@vue/cli则是Vue官方的脚手架工具，用于快速创建项目。 接着，文档介绍了如何使用Vue的基本语法。Vue中通过双大括号`{{ }}`进行数据绑定，可以展示数据、执行计算或者三目运算。例如，`{{1+2}}`会显示计算结果，`{{myparam}}`则会显示data对象中myparam的值。需要注意的是，双大括号内应为变量或字符串，不能直接写表达式，否则会导致错误。对于HTML内容的插入，需要使用`v-html`指令。 在HTML转义方面，Vue提供了`v-html`指令来插入HTML代码，而不是简单的文本。例如，`<div v-html="myhtml"></div>`会将`myhtml`的数据内容作为HTML插入，而非纯文本。 接下来，文档提到了Vue指令。Vue指令是一种特殊的属性，它们以`v-`开头，后接JavaScript表达式。例如，`v-show`和`v-if`用于根据条件动态地显示或隐藏元素，但它们的区别在于`v-if`在条件不满足时不会生成DOM，而`v-show`则是通过改变CSS的`display`属性来控制元素的可见性。 `v-if`更适合于条件较少，但需要频繁切换的情况，因为它的渲染效率更高；而`v-show`适用于条件复杂，但元素不需要被销毁重建的情况，因为它有更快的初始渲染速度。 此外，Vue不监听未在`data`中预先定义的变量，这是因为Vue是依赖收集机制，通过getter和setter来监听数据变化。如果在运行时动态添加新的属性，Vue不会自动更新视图。为了解决这个问题，可以使用`Vue.set`方法来将新的属性添加到响应式系统中。 这篇Vue学习总结涵盖了从环境配置到基础语法和指令的讲解，是初学者入门Vue的良好资源。理解并掌握这些知识，将有助于开发者构建高效、动态的前端应用。