import styled from 'vue-styled-components'

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

const Dashboard = {
  name: 'Dashboard',
  
  render() {
    return (
        <Container>內(nèi)容</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>

<!-- 動(dòng)態(tài)指定 -->
<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>
})}

<!-- 對(duì)應(yīng)@click -->
<el-buton onClick={this.handleClick}>Click me</el-buton>
<!-- 對(duì)應(yīng)@click.native -->
<el-button nativeOnClick={this.handleClick}>Native click</el-button>
<!-- 傳遞參數(shù) -->
<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) {
    // 對(duì)應(yīng)`.self`
    if (e.target !== e.currentTarget) return
    
    // 對(duì)應(yīng) `.enter`, `.13`
    if (!e.shiftKey || e.keyCode !== 13) return
    
    // 對(duì)應(yīng) `.stop`
    e.stopPropagation()
    
    // 對(duì)應(yīng) `.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>
    )
  }
}

<!-- 在雙花括號(hào)中 -->
{{ message | capitalize }}

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

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