Vue框架入门

vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。

设计理念：把所有页面元素切割成很多组件

vue安装好以后，新建一个项目，展示如下

里面有2个重要的地方，一个是App.vue，一个是main.js。
main.js是入口文件，这个我们可以不用动

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* 实例化一个vue对象 */
new Vue({
  el: '#app',  //css语法，表示id是app
  router,
  render: h => h(App),   //render：渲染方法，要挂载在App.vue文件上
  components: {App},
  template: ''
})

然后我们再来看看App.vue

组件A代码

显示效果如下：