在main.js内配置路由及相应模板
import Vue from 'vue'
import App from './App'
// 引入router路由
import Router from 'vue-router'
// 引入项目的四个模块组件
import index from './components/index'
import d2 from './components/d2'
import login from './components/login'
import register from './components/register'
import cart from './components/cart'
import detail from './components/detail'
import test from './components/test'
// 使用router
Vue.use(Router)
// 定义路由
var routes = [
{
path: '/',
component: index
}
,{
path: '/index',
component: index
}, {
path: '/d2',
component: d2
}, {
path: '/login',
component: login
},{
path: '/register',
component: register
},{
path: '/cart',
component: cart
},{
path: '/detail',
component: detail
},{
path: '/test',
component: test
},
]
// 实例化路由
var vueRouter = new Router({
mode:'history',
routes:routes
})
// 创建和挂载根实例
new Vue({
mode:'history',
el: '#app',
router: vueRouter,
template: '<App></App>',
components: { App }
})
具体模板代码:
<template>
<div>
<input type="text" v-model="message">
{{ message +"不好啊"}}
<br>
{{ message.split("").reverse().join("") }}
<br>
{{ message | reverse | uppercase }}
<br>
<div v-show="flag">
你能看到我
</div>
<div v-if="num==10">
num={{10}}
</div>
<div v-else-if="num=9">
num=9
</div>
<div v-else>
num != 10
</div>
<ul>
<li v-for="item in tlist">
{{ item.text }}
</li>
</ul>
反转前:{{ message }}<br>
反转后:{{ reverse_message }}
<br>
<table>
<tr v-for="(item,index) in datalist">
<td>{{ item.name }}</td>
<td>
<button @click="minus(index)">-</button>
<input type="text" v-model="item.num">
<button @click="add(index)">+</button>
</td>
</tr>
</table>
</div>
</template>
<script>
export default {
data () {
return {
message:'hello world',
tlist:[{text:'汽车'},{text:'面包'}],
flag:1,
num:9,
datalist:[{name:'汽车',num:2},{name:'飞机',num:0}]
}
},
//监听属性
computed:{
reverse_message:function(){
return this.message.split('').reverse().join('')
}
},
//绑定事件
methods:{
add:function(index){
this.datalist[index].num++;
},
minus:function(index){
if(this.datalist[index].num > 0){
this.datalist[index].num--;
}else{
alert("商品不能为空")
}
},
}
}
</script>
<style>
</style>