从传统的后端渲染页面的模式转到使用 vue 在浏览器端渲染，有一个很大的不同就是数据获取的问题，即通过异步加载的方式(ajax)来获取数据而不在是后台直接打数据到框架结合的后台模板上进行渲染，这也是 Vue 这类前端框架的一个技术支撑点。
理解好了后台渲染和前端渲染的区别，就应该知道不存在冲突的问题了。
https://unpkg.com/[email protected]/dist/vue.js
来，直接开始：
创建一个 .html 文件，然后通过如下方式引入 Vue：
https://jsfiddle.net/chrisvfritz/50wL7mdz/
Vue.js 文档： https://cn.vuejs.org/v2/guide/
https://www.w3cplus.com/blog/vue
Vue 以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。
如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。
当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id="app">
<h1>Hello App!</h1>
<p>
<!-- 使用指令 v-link 进行导航。 -->
<a v-link="{ path: '/foo' }">Go to Foo</a>
<a v-link="{ path: '/bar' }">Go to Bar</a>
</p>
<!-- 路由外链 -->
<router-view></router-view>
</div>
<script src="http://cdn.jsdelivr.net/vue/1.0.12/vue.min.js"></script>
<script src="http://cdn.bootcss.com/vue-router/0.7.13/vue-router.min.js"></script>
<script type="text/javascript">
'use strict'
Vue.use(VueRouter)
// 定义组件
var Foo = Vue.extend({
props: ['src'],
template: '<iframe :src="src"></iframe>',
route: {
data: function (transition) {
this.src = 'https://cn.bing.com/search?q=' + transition.to.path
}
}
})
// 路由器需要一个根组件。
// 出于演示的目的，这里使用一个空的组件，直接使用 HTML 作为应用的模板
var App = Vue.extend({})
// 创建一个路由器实例
// 创建实例时可以传入配置参数进行定制，为保持简单，这里使用默认配置
var router = new VueRouter()
// 定义路由规则
// 每条路由规则应该映射到一个组件。这里的“组件”可以是一个使用 Vue.extend
// 创建的组件构造函数，也可以是一个组件选项对象。
// 稍后我们会讲解嵌套路由
router.map({
'/foo': {
component: Foo
},
'/bar': {
component: Foo
}
})
// 现在我们可以启动应用了！
// 路由器会创建一个 App 实例，并且挂载到选择符 #app 匹配的元素上。
router.start(App, '#app')
</script>
</body>
</html>
