随笔分类 - Vue
学习和记录
摘要：1、问题现象 在Vue中通过document的getElementById()方法返回元素对象时，有时候遇到为null值。 2、问题分析 在代码中确实为目的元素指定了ID，那为何还会出现对象为null的现象呢？首先，对该ID元素的属性、样式进行分析，它是通过v-if指令来控制是否显示的，它是动态加载
阅读全文
摘要：1、问题现象 element-ui组件el-progress的status属性在本地环境调试时在控制台输出中没有看到警告信息，而在测试环境中的控制台输出中看到了警告信息，如下截图所示： 2、问题分析 查看element-ui官网对el-progress的属性介绍： 参数 说明 类型 可选值 默认值
阅读全文
摘要：今天在调试代码时发现控制台经常输出一个error日志，出于好奇，于是探个究竟。若在你的Vue文件中有如下类似的示例代码： <template> <div> <p>Welcome to home</p> <el-button @click="testButton">Test</el-button> <
阅读全文
摘要：假设有这样一个单文件组件：CustomerInput.vue，其内容如下： 那么在其它单文件组件中使用该组件时，可以这样使用： 这样就实现了简单的双向绑定了。
阅读全文
摘要：1、组件的实现逻辑代码 暂且将文件名称为thousand-bit-input.vue <template> <div> <input :class="thousandBitInputClass" :disabled="disabled" :placeholder="placeholder" :req
阅读全文
摘要：对于客户端应用程序和服务器应用程序，都可以通过webpack打包，下图转自它出。
阅读全文
摘要：在elementUI中，table表格组件的列本身有属性支持当前页的筛选功能，不过当列项较多时，并且列的label文字较长时，此时的筛选功能按钮（一个箭头向下的小按钮）不是很明显，对用户来说感观效果不是很好。此时，可以通过自定义表格头样式来提升感观效果，我们可以在表头中添加选择器，同样也可以实现当前
阅读全文
摘要：Element-UI组件可以应用于Vue、React和Angular框架，下面将在Vue中使用Element-UI时了解到相关知识记录如下： （1）安装：推荐使用npm安装Element-UI，以便能够更好地与webpack打包工具配合使用。 npm i -S element-ui （2）引用：不管
阅读全文
摘要：了解Vue风格指南，有利于规范编码，现将一些规则记录如下： （1）组件 组件名应该始终是多个单词的，根组件 App 以及 <transition>、<component> 之类的 Vue 内置组件除外。这样可以避免与HTML元素名冲突，因为所有的 HTML 元素名称都是单个单词的。 单文件组件的文件
阅读全文
摘要：简单了解一下Vue的服务器端渲染（server side render）： （1）什么是服务器端渲染？ 简单来说就是将组件渲染为服务器端的HTML字符串，然后将它们直接发送到客户端，在浏览器中能够进行正常交互的应用程序。 服务器渲染的 Vue.js 应用程序也可以被认为是"同构"或"通用"。 应用程
阅读全文
摘要：在任何 web 应用中，允许未过滤的用户提供的内容成为 HTML、CSS 或 JavaScript 都有潜在的危险。 （1）注入HTML Vue 会自动转义 HTML 内容，以避免向应用意外注入可执行的 HTML。 （2）注入URL 如果没有对该 URL 进行“过滤”以防止通过 javascript
阅读全文
摘要：Vue 应用中原始 data 对象的实际来源——当访问数据对象时，一个 Vue 实例只是简单的代理访问。所以，如果你有一处需要被多个实例间共享的状态，可以简单地通过维护一份数据来实现共享，通过store 模式来实现。所有 store 中 state 的改变，都放置在 store 自身的 action
阅读全文
摘要：使用单文件组件的好处是可以提高响应速度，提升体验效果。 （一）模板预编译 当使用 DOM 内模板或 JavaScript 内的字符串模板时，模板会在运行时被编译为渲染函数。通常情况下这个过程已经足够快了，但对性能敏感的应用还是最好避免这种用法。 预编译模板最简单的方式就是使用单文件组件——相关的构建
阅读全文
摘要：（1）Vue.js允许自定义过滤器，而过滤器用在两个地方： 双花括号插值 v-bind表达式 （2）过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示。 （3）过滤器是 JavaScript 函数。 （4）过滤器函数总接收表达式的值作为第一个参数，并且过滤器还可以接受额外的参
阅读全文
摘要：（01）autofocus 在移动版 Safari 上不工作。 （02）Vue.directive定义全局自定义指令；directives选项定义局部自定义指令。 （03）指令对象提供的钩子函数： bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置。可以采用函数简写的
阅读全文
摘要：（1）混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。 （2）一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 （3）当组件和混入对象含有同名选项时，这些选项将以恰当的方式进行“合并”。 数据对象在内部会
阅读全文
摘要：（1）Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡 条件渲染 (使用 v-if) 条件展示 (使用 v-show) 动态组件 组件根节点 （2）CSS 动画用法同 CSS 过渡，区别是在动画中 v-enter 类名在节点插入 DOM 后不会立
阅读全文
摘要：（1）组件是可复用的 Vue 实例，且带有一个名字；它们与 new Vue 接收相同的选项，但是像 el 这样根实例特有的选项除外。 （2）每用一次组件，就会有一个它的新实例被创建。 （3）一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。 （4）一个组件默认
阅读全文
摘要：（1）v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。 （2）对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发
阅读全文
摘要：v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是
阅读全文
