35互联做的网站如何,中超最新积分榜,建站之星安装模板失败,怎样自己动手做微官网站一、Ant-Design学习 因为Ant-Design是基于React实现的#xff0c;之前自己也学过一段时间的React#xff0c;对React还是相对比较熟悉的#xff0c;在学习Ant-Design也还不算吃力。 最开始是从源码看起#xff0c;从最简单的Icon组件看的#xff0c;然后连续看了几个组件就…一、Ant-Design学习 因为Ant-Design是基于React实现的之前自己也学过一段时间的React对React还是相对比较熟悉的在学习Ant-Design也还不算吃力。 最开始是从源码看起从最简单的Icon组件看的然后连续看了几个组件就有点吃不消了哈哈哈。所以就改为实战了。在Ant-Design官网上有一个Ant-Design快速上手的教程https://ant.design/docs/react/practical-projects-cn可以跟着它学习一下你可以从中学到dva的8个概念。dva 是一个基于 React 和 Redux 的轻量应用框架概念来自 elm支持 side effects、热替换、动态加载、react-native、SSR 等已在生产环境广泛应用学完上面那个基础教程之后接着就开始学习Ant-Design的组件一个一个看每个组件有哪些属性和方法以及怎么使用。Ant-Design最适用的场景就是开发后台管理系统就开始实践可以去github上找一些别人写的例子来看看完看懂之后可以自己再实践一遍。二、mustache模板学习 这个模板和nodejs里面的ejs模板差不多但是它的语法更简单支持的语言也很多具体可以到官网去看https://mustache.github.io/。 几个常用的语法 {{prop}}这个标签是mustache模板标签用的最多的一个了可以将数据源上prop属性对应的值转换成字符串输出。{{prop}}}这个标签是为了防止prop中包含html标签可以解析html标签如果在{{prop}}中prop是html标签那么会将标签原样输出。{{#prop}}{{/prop}}:这对标签的作用非常强大可以同时完成if-else和for-each以及动态渲染的模板功能 1) if-else渲染 只有prop属性在数据源对象上存在并且不为falsy值javascript 6个falsy值null,undefined,NaN,0,false,空字符串并且不为空数组的情况下标签之间的内容才会被渲染否则都不会被渲染 2for-each渲染 当prop属性所引用的是一个非空数组时这对标签之间的内容将会根据数组大小进行迭代并且当数组元素为对象时还会把该对象作为每一次迭代的上下文以便迭代时的标签可以直接引用数组元素上的属性script idtpl2 typetext/html-{{#prop}}{{name}},{{/prop}}-
/script
scriptvar tpl2 document.getElementById(tpl2).innerHTML.trim();Mustache.parse(tpl2);console.log(Mustache.render(tpl2, {prop: [{name: jason}, {name: frank}]}));//-jason,frank,-
/script 如果prop属性所引用的是一个函数但是这个函数返回值是一个数组类型那么仍然会进行for-each渲染 script idtpl2 typetext/html-{{#prop}}{{name}},{{/prop}}-
/script
scriptvar tpl2 document.getElementById(tpl2).innerHTML.trim();Mustache.parse(tpl2);console.log(Mustache.render(tpl2, {prop: function(){return [{name: jason}, {name: frank}];}}));//-jason,frank,-
/script 3 动态渲染 当prop属性所引用的是一个函数并且这个函数的返回值还是一个函数的话mustache会再次调用这个返回的函数并给它传递2个参数text表示原来的模板内容render表示mustache内部的执行渲染的对象以便在这个函数内部可以通过这render对象结合原来的模板内容自定义渲染的逻辑并把函数的返回值作为渲染结果这个返回值渲染的逻辑跟{{prop}}标签完全一样 script idtpl2 typetext/html-{{#prop}}content{{/prop}}-
/script
scriptvar tpl2 document.getElementById(tpl2).innerHTML.trim();Mustache.parse(tpl2);console.log(Mustache.render(tpl2, {prop: function(){return function (text, render) {return b render(text) /b};}}));//-bcontent/b-
/script {{^prop}}{{/prop}}这个模板和{{#prop}}{{/prop}}作用相反只有在数据源上prop属性对应的值不存在是falsy值空数组的时候才会显示模板内容{{!content}}注释掉content这段内容三、require.js学习 之前在看grunt打包的代码时有看到过define写法我就去查了一下原来是require.js的一种语法在使用的时候要特别注意路径问题。 因为官网都是英文所以就先看的阮一峰大神的博客文章粗略了解一下。后来自己实践的时候也遇到了问题写了一个简单的引入mustache模板文件的demo现在还没解决因为当时解决了一天也没解决有点失落所以就何弃疗了有时间就去解决它。四、grunt学习 因为项目中要用到所以就临时学了一些它的配置以及服务器应该怎么搭建还有看了一些插件的使用。 推荐一篇文章https://www.cnblogs.com/yexiaochai/p/3603389.html 转载于:https://www.cnblogs.com/sminocence/p/9090633.html
