Vue学习—深入剖析JSX
深入剖析JSX
- 一、深入剖析JSX
-
- 1.插值
- 2.指令
-
- 1..v-text
- 2..v-html
- 3.v-show
- 4.v-if
- 5.v-for
- 6.v-on
- 7.v-bind
- 8.v-model
- 9.v-slot
- 10.v-pre
- 11.v-cloak
- 12.v-once
- 2.Ref
- 3.自定义指令
- 4.过滤器
- 5.插槽
一、深入剖析JSX
Vue中使用JSX语法。可以让我们回到更接近模板的语法上。
render () {
return (
<h1>这是一个标题</h1>
)
}
1.插值
<div>{
this.value }</div>
2.指令
在JSX中，一些指令并不存在，所以我们可以换一种方式来处理。
1…v-text
<div domPropsTextContent="i am a p
">div>
2…v-html
<div domPropsInnerHTML="i am a p
">div>
3.v-show
jsx支持v-show指令：
<div v-show={this.show}>div>
4.v-if
{true && <div>divdiv>}
{true ? <div>divdiv> : <span>spanspan>}
5.v-for
{ [1, 2, 3].map(item => (<div key={item}>{ item }div>))}
6.v-on
<button onClick={this.handleClick}>点击事件button>
<button on-click={this.handleClick}>点击事件button>
<cmp-button nativeOnClick={this.handleClick}>原生点击事件cmp-button>
7.v-bind
<input value={this.value} />
在JSX中可以直接使用class="xx"来指定样式类，内联样式可以直接写成style=“xxx”
<div class="a b" style="font-size: 12px;">Contentdiv>
<div class={
{a: true, b: false}}>Contentdiv>
<div style={
{color: 'red', fontSize: '14px'}}>Contentdiv>
8.v-model
有相应的插件 支持 v-model，所以可以直接使用：
<input type="text" v-model={this.value} />
9.v-slot
<my-cmp>
默认插槽
<div slot="a">具名插槽 adiv>
my-cmp>
10.v-pre
11.v-cloak
12.v-once
以上三个指令，不常用，无替代方案
2.Ref
<div ref="xxx">xxxdiv>
当遍历元素或组件时，如：
[1, 2, 3].map(item => <div ref="xx" key={
item }>{
item }</div>)
会发现从 this.$refs.xxx 中获取的并不是期望的数组值，此时就需要将refInFor属性设置为true了：
[1, 2, 3].map(item => <div ref="xx" refInFor={
true} key={
item}>{
item }</div>)
3.自定义指令
render () {
// 1
return (
<input v-splice={
{
value: this.value, modifiers: {
number: true }}}/>
)
// 2
const directives = [
{
name: 'splice',
value: this.value,
modifiers: {
number: true }
}
];
return (
<div {
...{
directives} }></div>
)
}
4.过滤器
<div>{
{ msg | capitalize }}div>
<div>{ this.$options.filters('capitalize')(this.msg)}div>
5.插槽
模板写法：
<div class="demo">
<slot name="header">slot>
<slot>slot>
div>
<my-cmp>
default
<template v-slot:header>headertemplate>
my-cmp>
JSX写法：
<div class="demo">
{ this.$slots.header }
{ this.$slots.default }
div>
<my-cmp>
default
<template slot="header">headertemplate>
my-cmp>
作用域插槽：
模板写法：
<div class="demo">
<slot :text="'HelloWorld'">slot>
div>
<my-cmp v-slot="slotProps">
{
{ slotProps.text }}
my-cmp>
JSX写法：
<div class="demo">
{
this.$scopedSlots.default({
text: 'HelloWorld',
})
}
div>
<div id="app">
props.text
},
}}>base-demo>
div>