jsx

1.React 1.1React介绍 由Facebook开源 用于构建用户界面的 JavaScript 库 相关网站 http://www.ruanyifeng.com/blog/2015/03/react.html https://react.docschina.org/ 1.2React的特点 声明式编码（Declarative） 告诉机器你想要的是什么，让机器去实现。而无需告诉机器如何去实现 组件化编码(Component-Based) 组件：用来实现特定功能代码和资源的集合（html/css/image） 支持客户端和服务器端渲染 更高效 单向数据流 1.3为什么高效 使用虚拟DOM 用虚拟DOM映射真实DOM，新增标签的时候修改的是虚拟DOM,真实DOM不发生改变，当我们完成所有操作进行打包渲染页面时，真实DOM会发生改变，这样减少了页面渲染次数 高效DOM diff算法，最小化页面重绘（局部渲染） 2React的基本使用 2.1本地环境的搭建 引入文件 react.js：React的核心库。这个包，是专门用来创建React组件、组件生命周期等。 react-dom.js:操作DOM的扩展库。这个包，主要封装了和 DOM 操作相关的包（比如，把组件渲染到页面上）。 babel.min.js:将 JSX语法 解析为 纯JS语法代码。 本地库引入并实现第一个hello

react的jsx语法很好用，但是vue的jsx语法就不是很好用了。 vue的jsx语法不能实现双向数据绑定以及各种比如v-for指令，只能自己用代码用另一种方式实现出来。着实是费了一些功夫，现在来说一下我使用vue的jsx语法过程中用到的东西吧，当个记录，也方便以后查看。 因为我的项目用得是iview的框架，所以这里用的是iview的table组件+vue2.0+jsx 传送门 ：iview: https://www.iviewui.com/components/table 　　　　vue的jsx语法： https://cn.vuejs.org/v2/guide/render-function.html#ad 以下是代码： 　　 1 // 以下是table 2 <div style="width:100%;"> 3 <i-table border :columns="columns2" :data="data2" style="width:100%;"></i-table> 4 </div> 5 6 7 // 以下是data数据 8 9 export default { 10 data(){ 11 return { 12 columns2: [ 13 { 14 title: "编号" , 15 key: "num" , 16 align: "center" , 17 width: