- index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>meb</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div id="test"></div>
<hr>
<div id="product"></div>
<hr>
<!--测试路由-->
<div id="menu">
<!-- 点击链接-->
<ul>
<li><router-link to="/product">/product</router-link></li>
<li><router-link to="/app">/app</router-link></li>
</ul>
<!--显示位置-->
<router-view></router-view>
</div>
</body>
</html>
- main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import VueResource from 'vue-resource'
import Product from './product' //只要引入了，样式就会使用到了
import App from './App'
//开启debug模式
Vue.config.debug = true;
Vue.use(VueRouter);
Vue.use(VueResource);
//component id避免html tag,不然会出现警告：
//Do not use built-in or reserved HTML elements as component id: Div
//所以我命名为`MyDiv`，而不是Div
const MyDiv = { template: '<div class="a"><h2>我是第 1 个子页面</h2></div>'}
new Vue({
el: '#app',
template: "<MyDiv/>",
components: {MyDiv}
})
/////////////////template方式显示组件/////////////////////
new Vue({
el: '#product',
template: '<Product/>',
components: {Product} //注册组件
})
/////////////////render方式显示组件/////////////////////
new Vue({
el: '#test',
render: h => h(Product)
})
/////////////////显示路由功能/////////////////////
const router = new VueRouter({
mode: 'history',
routes: [
{ path: '/app',
component:App
},
{
path: '/product',
component: Product
}
]
})
new Vue({
router,
el: '#menu'
})
- product.vue
<template>
<div id="product">
<h1>this is produt list</h1>
<span>{{msg}}</span>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
</div>
</template>
<script>
//var $ = require('jquery')
//import $ from 'jquery'
/* $(function() {
alert($('#product').html());
})*/
export default {
name: 'product',
data() {
return {
msg: "this is a message from product"
}
}
}
</script>
<!--lang="scss" 开启scss功能-->
<style lang="scss">
$blue: #1875e7;
#product {
color: $blue;
}
</style>
页面效果：
