Vue与React的异同-组件（二）

//html
<div id="example">
  <my-component></my-component>
</div>

// 注册
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
})

// 创建根实例
new Vue({
  el: '#example'
})

var Child = {
  template: '<div>A custom component!</div>'
}

new Vue({
  // ...
  components: {
    // <my-component> 将只在父组件模板中可用
    'my-component': Child
  }
})

import React from "react";

class Demo extends React.Component {
    constructor(props) {
        super(props);
        // 设置 initial state
        this.state = {
            text: props.initialValue || 'placeholder'
        };
        // ES6 类中函数必须手动绑定，也可在调用的时候绑定，或者通过箭头函数
        this.handleChange = this.handleChange.bind(this); 
    }

    handleChange(event) {
        this.setState({
            text: event.target.value
        });
    }

    render() {
        return (
            <div>
                Type something:
                <input onChange={this.handleChange}
               value={this.state.text} />
            </div>
        );
    }
}

export default Demo;

Vue.component('child', {
  // 在 JavaScript 中使用 camelCase
  props: ['myMessage'],
  template: '<span>{{ myMessage }}</span>'
})

//父组件，
<!-- 在 HTML 中使用 kebab-case  ||  React使用JSX语法，则不存在此问题-->
<child my-message="hello!"></child>

<div>
  <input v-model="parentMsg">
  <br>
  <child v-bind:my-message="parentMsg"></child>
</div>

componentWillReceiveProps(nextProps) {
		if(this.props.text !== nextProps.text) {
			this.setState({
            text: nextProps.text
       		 });
    	}
}

// 父组件模版
<div id="counter-event-example">
  <p>{{ total }}</p>
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>

//子组件代码
Vue.component('button-counter', {
  template: '<button v-on:click="incrementCounter">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    incrementCounter: function () {
      this.counter += 1
      this.$emit('increment')
    }
  },
})

//父组件实例
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function () {
      this.total += 1
    }
  }
})

//子组件
class Child  extends Component { 
  handle (e) {    
  //回调函数传递参数给父组件
    this.props.onChange(e.target.value);
  }
  render(){
     return(
		<input type="text" onChange={this.handle.bind(this)}>
       )
  }
}

//父组件
class Parent extends Component{ 
  constructor(props){
     super(props);
     this.handleChildChange=this.handleChildChange.bind(this);
  }
  handleChildChange(value){
    if(value){
          this.setState({value:value});
    }
  }

  render() {
      return (
		< Child onChange={this.handleChildChange} ></Child>
           )
  }
}

//app-layout 组件
<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

//父组件模板
<app-layout>
  <h1 slot="header">这里可能是一个页面标题</h1>
  <p>主要内容的一个段落。</p>
  <p>另一个主要段落。</p>
  <p slot="footer">这里有一些联系信息</p>
</app-layout>

//渲染结果
<div class="container">
  <header>
    <h1>这里可能是一个页面标题</h1>
  </header>
  <main>
    <p>主要内容的一个段落。</p>
    <p>另一个主要段落。</p>
  </main>
  <footer>
    <p>这里有一些联系信息</p>
  </footer>
</div>

//子组件
<div class="child">
  <slot text="hello from child"></slot>
</div>

//父组件
<div class="parent">
  <child>
    <template slot-scope="props">
      <span>hello from parent</span>
      <span>{{ props.text }}</span>
    </template>
  </child>
</div>

//渲染结果
<div class="parent">
  <div class="child">
    <span>hello from parent</span>
    <span>hello from child</span>
  </div>
</div>

<input v-model="something">

//等于以下的语法糖
<input
  v-bind:value="something"
  v-on:input="something = $event.target.value">

<div v-for="item in items" :key="item.id">
  <!-- 内容 -->
</div>

//带破折号的key值需添加双引号，不然报错，故所有的对象key值都可以写成带引号
:class="{ 'market-no-tag': marketNoTag }"

- v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 同时惰性渲染，只有值变更才会开始渲染。
- v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
- 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。其他指令参考

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})

<p>Reversed message: "{{ reversedMessage() }}"</p>
methods: {
  reversedMessage: function () {
    return this.message.split('').reverse().join('')
  }
}

computed: {
  fullName: {
    // getter
    get: function () {
    	 ...
    },
    // setter
    set: function (newValue) {
		...
    }
  }
}

var vm = new Vue({
  data: {
    a: 1,
  },
  watch: {
    a: function (val, oldVal) {
      console.log('new: %s, old: %s', val, oldVal)
    },
  }
})