如何使用vue.js,vue中的方法
本文主要介绍如何在vue中使用JSX，帮助你更好的理解和使用Vue。感兴趣的朋友可以了解一下。
JSX 是什么
JSX是Javascript的语法扩展，JSX=Javascript XML，也就是用Javascript写XML。因为这个特性，JSX既有Javascript的灵活性，同时又有html的语义性和直观性。
为什么要在 Vue 中使用 JSX
有时，我们使用渲染函数来抽象组件。渲染函数在官方文档里看不清楚，有时候写起来很痛苦。
创建元素(
锚定标题，{
道具：{
级别：1
}
}, [
createElement(span ， Hello )。
世界！
]
)
其对应的模板如下：
锚定标题：级别=1
spanHello/span world！
/锚定标题
这显然是一个吃力不讨好的任务，而JSX就是在这个时候被派上场的。要在Vue中使用JSX，我们需要使用Babel插件，它可以让我们回归到更接近模板的语法。让我们一起开始用Vue写JSX吧。
开始
快速阅读创建Vue项目，直接使用vue-cli创建项目：
#只需按回车键。
vue创建vue-jsx
安装依赖关系：
npm安装@ vue/babel-preset-jsx @ vue/babel-helper-vue-jsx-merge-props
配置。babelrc:
模块.导出={
预设：[
@vue/cli-plugin-babel/preset ，
[@vue/babel-preset-jsx ，
{
injectH: false
}]
]
}
基础内容
下面是用Vue写的一些基本内容，包括纯文本，动态内容，标签的使用，自定义组件的使用。这些类似于我们通常使用的单文件组件，如下所示：
render() {
返回(
差异
H3内容/h3
{/*纯文本*/}
费罗，我是戈帕尔/p
{/*动态内容*/}
phello { this.msg }/p
{/*输入框*/}
输入/
{/*自定义组件*/}
我的组件/我的组件
/div
);
}
Attributes/Props
属性的绑定和普通的HTML结构是一样的。
render() {
return divinput占位符=111 //div
}
请注意，如果属性是动态的，则之前的v-bind:placeholder= this . placeholder text 将变成placeholder={ this . placeholder text }
render() {
返回输入
type=电子邮件
placeholder={ this . placeholder text }
/
}
我们也可以扩展一个对象。
渲染(createElement) {
返回(
按钮{.this.largeProps}/button
)
}
像输入标记一样，您可以按如下方式批量绑定属性
常量输入属性={
类型：“电子邮件”，
占位符：“输入您的电子邮件”
};
render() {
返回输入{.{ attrs: inputAttrs }} /
}
插槽
让我们看看如何实现命名槽和作用域槽。
命名slot:父组件的编写方式与单文件组件模板相同，要插入的位置由slot=header 指定。组件指定插槽的名称。$slots.header，其中header是插槽的名称。
父组件：
render() {
{/*命名插槽*/}
我的组件
标题槽=标题标题/标题
标题槽=内容内容/标题
页脚位置=footer 页脚/页脚
/myComponent
}
子组件：
render() {
返回(
差异
{/*纯文本*/}
p我是自定义组件/p
{这个。$slots.header}
{这个。$slots.content}
{这个。$slots.footer}
/div
);
}
作用域slot:由{this。子组件中的$ scoped slots . test({ user:this . user })}是test，用户被传递给父组件。当父组件写入子组件的标签时，它通过scopedSlots值指定插入的位置是test，并在回调函数中获取子组件传入的用户值。
父组件：
render() {
{/*命名插槽作用域slot */}
我的组件{
.{
scopedSlots: {
测试：({用户})=(
div {用户名}/div
)
}
}
}
/myComponent
子组件：
render() {
返回(
差异
{这个。$scopedSlots.test({
用户：this.user
})}
/div
);
}
指令
的常见说明如下：
render() {
{/*指令*/}
{/* v型车*/}
divinput v model={ this . newdotext }//div
{/*垂直模型和修改器*/}
divinput v model _ trim={ this . TIR mdata }//div
{/* v-on监听事件*/}
divinput vOn:input={ this . input text }//div
{/* v-on监听事件和修饰符*/}
divinput vOn:click _ stop _ prevent={ this . input text }//div
{/* v-html */}
p domPropsInnerHTML={html} /
}
函数式组件
功能组件是无状态和无实例的组件。详情请参考官网说明。使用以下内容创建一个新的FunctionalComponent.js文件：
导出默认值({ props })=phello { props . message }/p
父组件的调用如下：
从导入funComponent。功能组件
.
render() {
Return {/*功能组件*/}
func component消息= Gopal /func component
}
这就是如何在Vue中使用JSX的细节。关于在Vue中使用JSX的更多信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。