<template>
  <div>
    <h1>{{ detailData.title }}</h1>
    <article v-html="detailData.content"></article>
  </div>
</template>
<script>
import Axios from 'axios'
export default {
  props: ['dataList'],
  data () {
    return {
      detailData: {}
    }
  },
  created () {
    let { id } = this.$route.params
    Axios.get('https://cnodejs.org/api/v1/topic/' + id).then(res => {
      let { data } = res.data
      this.detailData = data
    })
  }
}
</script>
<style scoped>
</style>

正如上面你看到的例子中，HTML, JavaScript和CSS都写在一个文件之中。你不再需要在.vue组件文件中引入CSS，虽然这也是可以的。

React也是非常相似的，JavaScript与JSX被写入同一个组件文件中

/**
import React, { Component } from 'react'
 
class Footer extends Component{
    render() {
        constructor(props) {
            super(props)
        }
        return (
            <footer className="footer">
                <span className="todo-count">
                    <strong>0</strong>
                    <span>item left</span>
                </span>
                <ul className="filters">
                    <li>
                        <a href="jvascript:;">All</a>
                    </li>
                    <li>
                        <a href="jvascript:;">Active</a>
                    </li>
                    <li>
                        <a href="jvascript:;">Completed</a>
                    </li>
                </ul>
                <button className="clear-completed">
                    clear all completed
                </button>
            </footer>
        )
    }
}
export default Footer

3、提供了响应式 (Reactive)
4、props
在上面两个例子中，可以看到React和Vue都有'props'的概念，这是properties的简写。props在组件中是一个特殊的属性，允许父组件往子组件传送数据。
5、构建工具
React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用Create React App (CRA)，而Vue对应的则是vue-cli。两个工具都能让你得到一个根据最佳实践设置的项目模板。
由于CRA有很多选项，使用起来会稍微麻烦一点。这个工具会逼迫你使用Webpack和Babel。而vue-cli则有模板列表可选，能按需创造不同模板，使用起来更灵活一点。
6、Chrome 开发工具
React和Vue都有很好的Chrome扩展工具去帮助你找出bug。它们会检查你的应用，让你看到Vue或者React中的变化。你也可以看到应用中的状态，并实时看到更新。
7、配套插件
Vue与React最后一个相似但略有不同之处是它们配套框架的处理方法。相同之处在于，两个框架都专注于UI层，其他的功能如路由、状态管理等都交由同伴框架进行处理。
而不同之处是在于它们如何关联它们各自的配套框架。Vue的核心团队维护着vue-router和vuex，它们都是作为官方推荐的存在。而React的react-router和react-redux则是由社区成员维护，它们都不是官方维护的。
8、Vue和React均是单向数据流传递
单向数据流指只能从一个方向修改数据，姑且我们可以这样理解，如下图所示。一个父组件下有两个子组件1和子组件2，父组件可以向子组件传递数据。假如子组件都获取到了父组件的name，在子组件1中对name重新修改之后，子组件2和父组件中的值并不会发生改变，这正是因为Vue中的机制是单向数据流，子组件不能直接改变父组件的状态。但反过来，如果是父组件中的name修改了，当然两个子组件中的name也就改变了