Vue.js快速入门

- 使用 Virtual DOM，提供了响应式编程和组件化的视图组件；
- 不同于angualr的大而全，vue、react将注意力集中保持在核心库，如果如果你需要用到其他的话，可以在社区中寻找或者自己开发一个，如vue-router（路由）和vuex(负责处理全局状态管理的库)；

- 性能：据vue.js官网声称vue的性能在某些场景下是优于react的——渲染性能 10,000 个列表项 100 次，vue较之react平均快100ms；Vue 每秒最高处理 10 帧，而 React 每秒最高处理不到 1 帧，因此在开发类似动画这样的应用时，vue.js更占优势；
- html模板绑定：react使用JSX，vue也支持JSX，但建议使用其内置的模板引擎，也可以使用Jade。JSX的不足在于：当遇到需要使用if判断、循环绑定时，jsx的语法让代码看起来很混乱、也不直观；当然，jsx也有自己的优势——支持linting等检查；
- css： vue通过在dom上增加scoped，就可以实现CSS Modules的功能；
- React相比Vue也有自己的优势，react的生态系统更丰富、完善；

<template>
  	<nv-head></nv-head>
  	<index-center></index-center>
  	<nv-bottom></nv-bottom>
</template>
<script>
  export default {
      components:{
          "nvHead":require('../components/head.vue'),
          "nvBottom":require('../components/footer.vue'),
          "indexCenter":require('../components/index-center.vue')
      }
  }
</script>

<style>
	.footer{position: absolute;bottom: 20px;width: 100%;color: #5f6060;line-height: 25px;font-size: 12px;}
</style>
<template>
   <section class="footer text-center hidden-sm hidden-xs">
      <p v-on:click="hello"></p>
   </section>
</template>
<script>
export default {
	data () {
  		return {
    			msg: '©2016 coderYin 苏ICP备15056083号-1 All rights reserved.'
  		}
	},
	methods:{
    		hello: function(){
      			alert("hello world");
      			this.msg="我被点击啦";
   		 }
	}
}
</script>

var Vue = require('vue')
	
//路由
var VueRouter = require('vue-router')
Vue.use(VueRouter)
	
//vue-resource：通过 XMLHttpRequest 或 JSONP 发起请求并处理响应
var VueResource = require('vue-resource')
Vue.use(VueResource)
	
//多个页面
var index = require('./views/index.vue')
var blogManage = require('./views/blog-manage.vue')
var blog = require('./views/blog.vue')
var works = require('./views/works.vue')
	
// 你也可以自定义组件
var helloWorld = Vue.extend({
  	template: '<p>Hello world</p>'
})

// 路由器需要一个根组件。
// 出于演示的目的，这里使用一个空的组件，直接使用 HTML 作为应用的模板
var Apptest = Vue.extend({})

// 创建一个路由器实例
// 创建实例时可以传入配置参数进行定制，为保持简单，这里使用默认配置
var router = new VueRouter()

// 定义路由规则
//在使用 vue-router 时，我们需要做的就是把路由映射到各个组件
//vue-router 会把各个组件渲染到正确的地方。
router.map({
  	'/index': {
    		component: index
  	},
  	'/blogmanage': {
   		component: blogManage
 	},
  	'/blog': {
    		component: blog
  	},
  	'/works': {
  		 component: works
  	},
  	'/helloworld': {
  		 component: helloWorld
  	}
})

// 现在我们可以启动应用了！
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
router.start(Apptest, '#test')