Vue中jsx不完全应用指南小结

import styled from 'vue-styled-components'

const Container = styled.div`
 heigth: 100%;
`

const Dashboard = {
 name: 'Dashboard',
 
 render() {
 return (
  <Container>内容</Container>
 )
 }
}

export default Dashboard

<span>Message: {this.messsage}</span>
<!-- 类似于v-html -->
<div domPropsInnerHTML={this.dangerHtml}/>
<!-- v-model -->
<el-input v-model={this.vm.name} />

<div class="btn btn-default" style="font-size: 12px;">Button</div>

<!-- 动态指定 -->
<div class={`btn btn-${this.isDefault ? 'default' : ''}`}></div>
<div class={{'btn-default': this.isDefault, 'btn-primary': this.isPrimary}}></div>
<div style={{color: 'red', fontSize: '14px'}}></div>

{/* 类似于v-if */}
{this.withTitle && <Title />}

{/* 类似于v-if 加 v-else */}
{this.isSubTitle ? <SubTitle /> : <Title />}

{/* 类似于v-for */}
{this.options.map(option => {
 <div>{option.title}</div>
})}

<!-- 对应@click -->
<el-buton onClick={this.handleClick}>Click me</el-buton>
<!-- 对应@click.native -->
<el-button nativeOnClick={this.handleClick}>Native click</el-button>
<!-- 传递参数 -->
<el-button onClick={e => this.handleClick(this.id)}>Click and pass data</el-button>

const Demo = () => (
 <li>One</li>
 <li>Two</li>
)

const Demo = () => (
 <div>
  <li>One</li>
 <li>Two</li>
 </div>
)

const Demo = () => [
 <li>One</li>
 <li>Two</li>
]

{
 data() {
 return {
  options: ['one', 'two']
 }
 },
 
 render() {
 const LiItem = () => this.options.map(option => <li>{option}</li>)
           
 return (
  <div>
   <ul>
    <LiItem />
   </ul>
   </div>
 )
 }
}

<el-button {...{
 '!click': this.doThisInCapturingMode,
 '!keyup': this.doThisOnce,
 '~!mouseover': this.doThisOnceInCapturingMode
}}>Click Me!</el-button>

methods: {
 keyup(e) {
 // 对应`.self`
 if (e.target !== e.currentTarget) return
 
 // 对应 `.enter`, `.13`
 if (!e.shiftKey || e.keyCode !== 13) return
 
 // 对应 `.stop`
 e.stopPropagation()
 
 // 对应 `.prevent`
 e.preventDefault()
 
 // ...
 }
}

const LiArray = () => this.options.map(option => (
 <li ref="li" key={option}>{option}</li>
))

const LiArray = () => this.options.map(option => (
 <li ref="li" refInFor={true} key={option}>{option}</li>
))

<div class="page-header__title">
 {this.$slots.title ? this.$slots.title : this.title}
</div>

<div class="page-header__title">
 <slot name="title">{{ title }}</slot>
</div>

<current-user>
 {{ user.firstName }}
</current-user>

<!-- current-user组件定义部分 -->
<span>
 <slot v-bind:user="user">
  {{ user.lastName }}
 </slot>
</span>

<!-- current-user 使用 -->
<current-user>
 <template v-slot:default="slotProps">
  {{ slotProps.user.firstName }}
 </template>
</current-user>

<template>
 <div>
 <slot v-bind:injectedProps="slotProps">
  {{ user.lastName }}
  </slot>
 </div>
</template>

<script>
 export default {
 data() {
  return {
  user: {
   firstName: 'snow',
   lastName: 'wolf'
  }
  }
 },
 
 computed: {
  slotProps() {
  return {
   user: this.user,
   logFullName: this.logFullName
  }
  }
 },
 
 methods: {
  logFullName() {
  console.log(`${this.firstName} ${this.lastName}`)
  }
 }
 }
</script>

<current-user>
 <template v-slot:default="{ injectedProps }">
  <div>{{ injectedProps.user.firstName }}</div>
  <el-button @click="injectedProps.logFullName">Log Full Name</el-button>
 </template>
</current-user>

<current-user v-slot="{ user = { firstName: 'Guest' } }">
 {{ user.firstName }}
</current-user>

// current-user components
{
 data() {
 return {
  user: {
  firstName: 'snow',
  lastName: 'wolf'
  }
 }
 },
 
 computed: {
 slotProps() {
  return {
  user: this.user,
  logFullName: this.logFullName
  }
 }
 },
 
 methods: {
 logFullName() {
  console.log(`${this.firstName} ${this.lastName}`)
 }
 },
 
 render() {
 return (
  <div>
  {this.$scopedSlots.subTitle({
   injectedProps: this.slotProps
  })}
  </div>
 )
 }
}

<current-user {...{
 scopedSlots: {
 subTitle: ({ injectedProps }) => (
  <div>
   <h3>injectedProps.user</h3>
  <el-button onClick={injectedProps.logFullName}>Log Full Name</el-button>
  </div>
 )
 }
}}></current-user>

<input type="text" v-focus={{ value: true }} />

{
 directives：{
 focus: {
  inserted: function(el) {
  el.focus()
  }
 }
 },
 
 render() {
 const directives = [
  { name: 'focus', value: true }
 ]
  
 return (
  <div>
   <input type="text" {...{ directives }} />
  </div>
 )
 }
}

<!-- 在双花括号中 -->
{{ message | capitalize }}

<!-- 在 `v-bind` 中 -->
<div v-bind:id="rawId | formatId"></div>

<div>{this.$options.filters('formatDate')('2019-07-01')}</div>

<template>
 <div>
 <div>输入的值：{{ title }}</div>
 <input type="text" value="我是DOM属性值" v-model="title" @input="logTitle" />
 </div>
</template>

<script>
export default {
 data() {
 return {
  title: ''
 }
 },
 
 methods: {
 logTitle(e) {
  // 输出DOM属性
  console.log(e.target.value)
  // 输出HTML属性
  console.log(e.target.getAttribue('value'))
 }
 }
}
</script>

<div>输入值：{ this.title }</div>
<input type="text" value="我是DOM属性" v-model={this.title} onInput={this.logTitle} />

<Demo title="我是组件属性" domPropsTitle="我是DOM属性" />

<div domPropsClassName="mt__xs"></div>

<label aria-label="title"></label>
<label attrsAria-label="title"></label>

<el-upload {...{
 props: {
 onPreview: this.handlePreview
 }
}} />

<el-upload propsOnPreview={this.handlePreview} />

const Demo = () => isTrue ? <p>True!</p> : null

const Demo = () => isTrue && <p>True!</p>

const Demo = () => (
 <div>
  {flag && flag2 && !flag3
  ? flag4
   ? <p>Blash</p>
  : flag5
   ? <p>Meh</p>
  : <p>hErp</p>
  : <p>Derp</p>
 }
 </div>
)

const Demo = () => (
 <div>
 {
  (() => {
  if (flag && flag2 &&!flag3) {
   if (flag4) {
   return <p>Blah</p>
   } else if (flag5) {
   return <p>Meh</p>
   } else {
   return <p>Herp</p>
   }
  } else {
   return <p>Derp</p>
  }
  })()
 }
 </div>
)

const Demo = () => (
 <div>
 {
  do {
  if (flag1 && flag2 && !flag3) {
   if (flag4) {
   <p>Blah</p>
   } else if (flag5) {
   <p>Meh</p>
   } else {
   <p>Herp</p>
   }
  } else {
   <p>Derp</p>
  }
  }
 }
 </div>
)

const Demo = () => {
 const basicCondition = flag && flag1 && !flag3;
 if (!basicCondition) return <p>Derp</p>
 if (flag4) return <p>Blah</p>
 if (flag5) return <p>Meh</p>
 return <p>Herp</p>
}

render() {
 // partial html
 const TabHeader = (
  <div class="page-header page-header--tab"></div>
 )
 
 // function partial
 const Header = () => (
  <div class="page-header"></div>
 )
 
 <div class="page-header">
  {this.withTab ? TabHeader : <Header/>}
 </div>
}

children  # VNode数组，类似于React的children
data   # 绑定的属性
 attrs  # Attribute
 domProps # DOM property
 on    # 事件
injections # 注入的对象
listeners: # 绑定的事件类型
 click   # 点击事件
 ...
parent   # 父组件
props    # 属性
scopedSlots # 对象，作用域插槽，使用中发现作用域插槽也挂在这个下面
slots    # 函数，插槽

render() {
 const Demo = props => {
 return (
  <div>
   <h3>Jsx中的内部组件 { props.data.title }</h3>
  { props.children }
  <br />
  { props.scopedSlots.bar() }
  </div>
 )
 }
 
 return (
  <div>
  <Demo title="test" attrsA="a" domPropsB="b" onClick={this.demo}>
   <h3>我是Children</h3>
  <template slot="bar">
   <p>我是Slot内容</p>
  </template>
  </Demo>
 </div>
 )
}