dunizb
dunizb

Vue.js开发常见问题解析

此前的Vue.js系列文章：

  • Vue.js常用开发知识简要入门（一）

  • Vue.js常用开发知识简要入门（二）

  • Vue.js常用开发知识简要入门（三）

camelClass & kebab-case

HTML标签中的属性名不区分大小写。设置prop名字为camelClass形式的时候，需要转换为kebab-case形式（短横线）在HTML中使用。

Vue.component('child', {
    //这里可以是camelClass形式
    props: ['myMessage'],
    template: '{{ myMessage }}'
});

字面量语法 & 动态语法

这个问题比较绕，也算是一个笔记常犯的一个错误吧，使用字面量语法传递数值：

因为他是一个字面prop，它的值是字符串“1”，而不是以实际的数字传递下去。如果想传递一个真实的JavaScript类型的数字，则需要使用动态语法，从而让它的值被当做JavaScript表达式计算。

模板解析

Vue的模板是DOM模板，使用浏览器原生的解析器而不是自己实现一个。相比字符串模板，DOM模板有一些好处，但是也有问题，它必须是有效的HTML片段。一些HTML元素对什么元素可以放在它里面有限制。常见的限制有：

  • a不能包行其他的交互元素（如按钮、链接）

  • ul和ol只能直接包含li。

  • select只能包含option和optgroup。

  • table只能直接包含thead、tbody、ftoot、tr、caption、col、colgroup。

  • tr只能直接包含th和td。

在实际应用中，这些限制会导致意外的结果。尽管再简单的情况下它可能可以工作，但是我们不能依赖自定义组件在浏览器验证之前展开结果。例如不是有效的模板，即使my-select组件最终展开为。

另一个结果是，自定义标签（包括自定义元素和特殊标签，如、