class 属性规定元素的类名（classname）。
class 属性大多数时候用于指向样式表中的类（class）。不过，也可以利用它通过 JavaScript 来改变带有指定 class 的 HTML 元素。
你为什么选择React而不选择Vue？
前端领域，选择框架是根据使用场景、业务需求、技术实现等综合因素考虑的，选择最适合的才能发挥最大效果。
目前前端三大主流框架有：React、Vue、Angular，他们在各自特定的场景下使用都非常出色。其中，Vue是不错的渐进式JavaScript库，更易于样式开发构建UI。而偶更倾向于选择React，因为React具有独特优势：
React函数式编程理念使代码更优雅和合理严谨的单向数据流设计，方便构建大型复杂稳定的单页面应用丰富的技术生态圈，拥有世界范围内各大技术社区支持方便配合ReactNative开发跨终端应用React的函数式编程理念使代码更优雅和合理
函数式编程设计思想。函数式编程是用函数的组合来进行编程。先声明函数，然后调用函数，每一步都有返回值，通过抽出每一步逻辑运算抽象，封装在函数中。再将函数组合来编写程序。例如：计算平均值百分比，大家可以拆分为三个函数，一个是计算平均值，一个是计算百分比，一个是综合调用的函数，通过函数嵌套函数的方式，使得代码更优雅，更有利于复用。
React使用函数式编程思想使代码更优雅和合理，更有利于组件化、模块化开发。React的每个组件就是函数生成，页面的渲染过程本质就是函数的嵌套调用过程。React的这种设计对于使用来说非常方便，例如以下子组件嵌套子组件再嵌套子组件示例：子组件中嵌套子组件调用模式始终都是相同的。父组件调用子组件都只需要考虑传递的参数props，而子组件只需要考虑传入的参数。
严谨的单向数据流设计，方便构建大型复杂稳定的单页面应用
React的数据流始终是单向设计的，严格遵照数据驱动DOM。这样的好处是，降低了组件互相通信的代码耦合度，数据流更清晰，调试更方便。大型复杂单页面应用一直是企业的难题，传统方式开发都不能够很好的维护。而使用React为基础的技术栈，能够方便地拆分模块、组件，再配合Redux数据流管理，能够高效构建应用。事实证明，这种React、Redux的大型复杂单页面项目构建方案，已经在各大互联网公司得到应用和发展。
丰富的技术生态圈，拥有世界范围内各大技术社区支持
React是由Facebook公司开发的高品质现代化前端框架，具有很高的权威性和专业性，在世界范围内得到各大技术社区支持，包括国内的技术社区。比如，npm官网、淘宝cnpm社区等都有很丰富的生态。众多的开发者共同添砖加瓦，开源共享，丰富了技术生态圈，让大家方便学习和使用基于React的组件、插件，减少开发成本，提高开发效率。在国内，由阿里巴巴公司开发的基于React基础开发的Antd组件库深受各大互联网企业好评，开箱即用，为加速国内中小企业的中台化、信息化推进起到了重要作用。
方便配合ReactNative开发跨终端应用
当前互联网公司的一个重要难题问题是：如何减少成本、高效的进行跨终端应用开发。也就是说，互联网公司都希望能够开发iOS、Android、H5应用。React配合ReactNative库能够方便地开发跨终端应用。ReactNative设计原理上和React一致，使用了React技术栈，就已经有了基础，再配合ReactNative就能一套代码，编译生成多端应用。ReactNative方便众多公司快速高效开发App，降低研发成本，提高了生产力，减少了开发时间。
React、Vue发展趋势
React的发展趋势更注重函数式编程。当前从16.7版本以后，出现了Hook函数钩子的思想，只能是React函数式的组件才能使用。这一特性很明显，React希望将函数式编程发挥极致，更优更好地项目开发。有趣的是，这里出现了useMemo函数，像极了Vue中的computed的作用，这里React就是借鉴了Vue的动态监听变量的模式。
Vue的发展趋势为更注重了项目标准化、严谨化。在Vue3中已经开始使用了TypeScript替代不够严格的JavaScript写法。而引入TypeScript这一点是借鉴了React的能够深度融合TypeScript更严谨开发的经验。
React、Vue发展趋势表明，两种框架互相汲取，取长补短，都是为了能够更好地进行应用开发。
如何正确选择框架
面对React、Vue，大家应该怎么选。这里提供一些思路：
小型偏重于项目如果是偏重于UI展现，更多的样式开发，推荐使用Vue。发挥Vue模板样式的优势。具有复杂的数据逻辑应用如中台化项目，建议使用React。单向数据流的模式能够避免数据逻辑错误。大型复杂单页面项目，推荐React。再配合如Redux、Mbox等状态管理库，组件化、模块化开发，有效管理。写在最后
React、Vue都是出色的前端框架，都有各自的一席之地。React框架的函数式编程理念、严谨的单向数据流设计、丰富的技术生态圈以及方便开发跨终端应用具有更大优势。大家只有根据使用场景、业务需求、技术实现等综合因素选择最适合的框架，才能发挥最大的优势，提高生产力。
以上是偶的观点，希望对你有所帮助。
template跟html的区别？
Vue template和html5的template用法比较1.html5中的template标签
html中的template标签中的内容在页面中不会显示。但是在后台查看页面DOM结构存在template标签。这是因为template标签天生不可见，它设置了display:none;属性。
2.template标签操作的属性和方法
content属性:在js中template标签对应的dom对象存在content属性，对应的属性值是一个dom节点，节点的nodeName是#document-fragment。通过该属性可以获取template标签中的内容，template对象.content可以调用getElementById、querySelector、querySelectorAll方法来获取里面的子节点。
innerHTML:可以获取template标签中的html
3.vue中的template
(1)template标签在vue实例绑定的元素内部
它是可以显示template标签中的内容，但是查看后台的dom结构不存在template标签。如果template标签不放在vue实例绑定的元素内部默认里面的内容不能显示在页面上，但是查看后台dom结构存在template标签。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template</title>
<script src="/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<template>
<div>
<h1>hello world! tem</h1>
</div>
</template>
<div>
<template>
<div>
<h1>hello world! app</h1>
</div>
</template>
</div>
<script type="text/javascript">
var tem =document.getElementById("tem");//获取template标签
console.log(tem);
console.log(tem.innerHTML); //
var title = tem.content.getElementById("title"); //在template标签内部内容，必须要用.content属性才可以访问到
console.log(title);`在这里插入代码片`
</script>
<script>
new Vue({
el : #app,
})
</script>
</body>
</html>
(2)vue实例中的template属性
将实例中template属性值进行编译，并将编译后的dom替换掉vue实例绑定的元素，如果该vue实例绑定的元素中存在内容，这些内容会直接被覆盖。
特点：
1）如果vue实例中有template属性，会将该属性值进行编译，将编译后的虚拟dom直接替换掉vue实例绑定的元素（即el绑定的那个元素）；
2）template属性中的dom结构只能有一个根元素，如果有多个根元素需要使用v-if、v-else、v-else-if设置成只显示其中一个根元素；
3）在该属性对应的属性值中可以使用vue实例data、methods中定义的数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>template</title>
<script src="/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<template id = "first">
<div v-if = "flag">第一个{{msg}}</div>
<div v-else>第二个</div>
</template>
<div id = "app"></div>
<abc>
<div v-if="flag">{{msg}}</div>
<div v-else>111</div>
</abc>
</script>
<script>
new Vue({
el:"#app",
data:{
msg:"hello",
flag:true
},
template:"#first"//通过该属性可以将自定义的template属性中的内容全部替换app的内容,并且会覆盖里面原有的内容，并且在查看dom结构时没有template标签
});
</script>
</body>
</html>
如果将上面的template:"#first"改为template:"#second"，则标签中的内容也会显示在页面上。所以此处利用template标签来定义vue实例中需要设置的template属性。(?)
行元素和块元素有什么区别呢？
这个行元素和块元素，应该是指css中的行元素和块元素；对于css初学者有时会混淆行元素和块元素，那么下面偶来回答一下这两者的区别；
行元素
1、可以和其他元素在同一行，不需要另起一行；
2、不能设置width和height属性，宽高由内容决定；
3、上边距和下边距不可设置；
常见行元素有:<span>、<a>、<i>、<label>等；
块元素
1、每个块元素都是独占一行显示；
2、宽高、内外边距都可以设置；
常见块元素有:<div>、<p>、<ol>、<ul>、<dl>等；
总结：
行元素和块元素之间是可以通过display属性相互转换的，如：将行元素的display属性设置为block，就可以使行元素转换成块元素；将块元素的display属性设置为inline;，就可以使块元素转换成行元素；
