vue和react的语法，对与JS基础语法的违反

vue对js基础语法违反

1.js基础里，双引号里是字符串，不会做任何其他操作。vue中的双引号，不代表字符串，他可能还需要运算。这号蛋疼了。
2.css中的短链接，要换成小驼峰式。

react对js基础语法违反

1.js基础里，双引号里是字符串，不会做任何其他操作。vue中的双引号，不代表字符串，他可能还需要运算。这号蛋疼了。
2.css中的短链接，要换成小驼峰式。class必须换成className
3.onclick也必须写成onClick。

vue的又一个注意事项

//正确  
 <tr v-if="item.cardStatus==='request'" v-for="item in iccard_data"> </tr>

//错误
 <tr v-if='item.cardStatus==="request"' v-for="item in iccard_data"> </tr>

vue双引号中的内容，什么时候是字符串，什么时候是表达式

vue中，模板内HTML标签：XXX=""，@xxx=""，双引号中的内容是一个js表达式，而不是一般的HTML属性。
在插值语法中，{{"xxx"}}会渲染出xxx字符串

<div @click="a++">{{a}}</div>
<div :class="abc">{{a}}</div>

这时候 a++ 是一段模板编译后由 Vue 执行的 JS 代码，而不是简单的属性字符串。同理，router-link 中书写的也是 JS 代码，而不是链接字符串。
需要直接返回字符串路径时，就必须采用单引号把字符串内容括起来，例如:type="'/index'" 这样。
如果写 :type="/index"，那么 Vue 会求值一个名为 /index 的变量，而这显然是非法的。

HTML和JS出现两种命名方法的原因：（小大驼峰和短横线出现的原因）

1.html的标签，都是单个单词。因此扩展的标签，建议用双单词来写，这样很难出错。
2.html是不要分大小写的，所有的大写属性，都会被渲染成小写。所以，在自定义标签名和自定义属性的时候，加上短横线。
3.在JS语句不支持短横线，因为他会被解释为加减乘除里的减号（-）。
所以，无论实在vue还是react，对短横线的操作，都是改成小驼峰式。

官网关于两种写法的解释

HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：

//vue本身就是写在js中的，vue写的时候，要同时兼顾HTML和js
Vue.component('blog-post', {
  // 在 JavaScript 中是 camelCase 的
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})
<!-- 在 HTML 中是 kebab-case 的 -->
<blog-post post-title="hello!"></blog-post>