杭州制作手机网站18,销售技巧,装修之家网,word模板网站创建函数写法一#xff1a;
重点#xff1a;函数有几种写法
function DemoShow() {return (div classNameApp函数声明/div);
}export default DemoShow;对应js创建函数声明#xff1a;function sum1(a,b){return ab
}
创建函数写法二#x…创建函数写法一
重点函数有几种写法
function DemoShow() {return (div classNameApp函数声明/div);
}export default DemoShow;对应js创建函数声明function sum1(a,b){return ab
}
创建函数写法二
import React from reactconst DemoShow:React.FC(){return{div函数表达式/div}}export default DemoShow对应函数表达式 由于我这边是ts所以有引React.FCconst sun2 (a,b){console.log(ab)}
变量写法与Vue对比
react
function TextComponent() {const a 1;return (divReact变量写法 {a}/div);
}export default TextComponent; Vue2
templatedivVue2的变量写法{{ a }}/div
/templatescript
export default {data() {return {a: 10};}
};
/script
Vue3
template
模版里面不用.value
divVue3的变量写法{{a}}/div
button clickBtnClick按钮/button/templatescript setup
import { ref } from vue
const a ref(10)
ref的变量在方法里面要.value
const BtnClick () {console.log(a.value)
}
/script
行内样式非变量写法对比
react
function App() {return (div style{{ color: redfontSize:18px }}红色/div);
}
Vue
templatediv stylecolor: rgba(0, 0, 0, 0.65); font-size: 14px;Vue的非变量的行内样式写法/divdiv :stylestyleObject/div
/templatescript
export default {data() {return {color: red,fontSize: 14px};},computed: {styleObject() {return {color: this.color,fontSize: this.fontSize};}}
};
/script
reactts的父子组件传参
父组件SonDemo sendSonfromfather/SonDemo子组件import React from react;interface MiddleProps {sendSon: string;
}const App: React.FCMiddleProps (props) {console.log(props.sendSon); // 正确解构 propsreturn (div{props.sendSon}/div // 返回一个 div 元素展示 sendSon 的值);
};export default App;
