本文介绍如何使用Vue.js和Vue Router构建一个包含首页、表单、购买和我的界面的响应式多页面应用。通过示例代码详细展示了组件、数据绑定、条件渲染和事件处理等核心概念。
参考网上例子（ui是bootstrap）
两个主要js文件
<script src="https://unpkg.com/vue/dist/vue.js"></script><!--Vue核心-->
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script><!--Vue路由核心-->
在<body></body>中定义根节点 id="app"(例子)
<div id="app">
<!--router-view 为路由模板显示区域-->
<router-view></router-view>
<!--底部导航-->
<div id="nav">
<ul class="nav nav-pills">
<li class="active">
<!--v-on:click 为方法触发-->
<a v-on:click="show(0)"><span class="glyphicon glyphicon-home" aria-hidden="true"></span> 首页</a>
</li>
<li >
<a v-on:click="show(1)"><span class="glyphicon glyphicon-comment" aria-hidden="true"></span> 表单</a>
</li>
<li>
<a v-on:click="show(2)"><span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span> 购买</a>
</li>
<li>
<a v-on:click="show(3)"><span class="glyphicon glyphicon-user" aria-hidden="true"></span> 我的</a>
</li>
</ul>
</div>
</div>
/*创建Vue和挂载根实例*/
<!--视图页面-->
<script type="text/x-template" id='home'>
<div>
<!--轮播图-->
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1882767818,2900717669&fm=26&gp=0.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<!--***********-->
<!--v-for='y in pic' 循环语句-->
<!--***********-->
<div class="item" v-for='y in pic'>
<img v-bind:src='y.picUrl' alt="...">
<div class="carousel-caption">
...
</div>
</div>
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
<!--九宫格-->
<div id="jiugongge">
<!--***********-->
<!--v-for='y in pic' 循环语句
v-bind:src 点击事件
-->
<!--***********-->
<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3" v-for='z in icon'>
<img v-bind:src="z.iurl" />
<div>{{z.name}}</div>
</div>
</div>
<!--主页商品展示-->
<div v-for='x in info'>
<router-link :to='x.toUrl'>
<!-- <a v-bind:href='x.toUrl'> -->
<div class="col-xs-12 col-sm-12 col-md-6 col-lg-6 production">
<div class="image"><img v-bind:src='x.imgsrc' /></div>
<div class="content">{{x.info}}</div>
</div>
<!-- </a> -->
</router-link>
</div>
<div> </div>
<div> </div>
</div>
</script>
<script type="text/x-template" id='info'>
<div>
data默认值：{{ infomessage }}
<p>单个复选框：</p>
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
<p>多个复选框：</p>
<input type="checkbox" id="runoob" value="Runoob" v-model="checkedNames">
<label for="runoob">Runoob</label>
<input type="checkbox" id="google" value="Google" v-model="checkedNames">
<label for="google">Google</label>
<input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
<label for="taobao">taobao</label>
<br>
<span>选择的值为: {{ checkedNames }}</span>
<br>
<p>input 元素：</p>
<input v-model="message" placeholder="编辑我……">
<p>消息是: {{ message }}</p>
<br>
<br>
<p>textarea 元素：</p>
<p style="white-space: pre">{{ message2 }}</p>
<textarea v-model="message2" placeholder="多行文本输入……"></textarea>
<br>
<br>
<input type="radio" id="p1" value="单选1" v-model="picked">
<label for="p1">单选1</label>
<br>
<input type="radio" id="p2" value="单选2" v-model="picked">
<label for="p2">单选2</label>
<br>
<span>选中值为: {{ picked }}</span>
<br>
<br>
<select v-model="selected" name="fruit">
<option value="">选择一个语言</option>
<option value="php">php</option>
<option value="vue">vue</option>
</select>
<br>
<span>选中值为: {{ selected }}</span>
<br>
<br>
<br>
<input type="button" @click="get()" value="点我异步获取数据(Get)">
<div id='ajax' style="bottom:20px">
<div v-for='x in info_test'>
<div class="content">{{x}}</div>
</div>
</div>
</div>
</script>
<script type="text/x-template" id='goumai'>
<div>
语法页
<h3>文本{{}}</h3>
<p>{{ message }}</p>
<br>
<h3>v-html="xxxx"</h3>
<div v-html="message_1"></div>
<br>
<label for="r1">v-bind</label><input type="checkbox" v-model="use" id="r1">
<br><br>
<div v-bind:class="{'class1': use}">
v-bind:aaaa
</div>
<br>
</div>
</script>
<script type="text/x-template" id='wode'>
<div>
这是我的界面
</div>
</script>
<script type="text/x-template" id='detail'>
<div>
这是详情页{{ message }}
</div>
</script>
<script type="text/javascript">
/*定义组件*/
const home = {
template: '#home',
/*
props:{
info:Array,
pic:Array,
icon:Array
},
*/
data() {
return {
info:[
{imgsrc:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1882767818,2900717669&fm=26&gp=0.jpg',info:'看看空间就看见可能吧宝贝空间就立即离开',nav:'咖啡/麦片/冲饮',toUrl:'/detail'},
{imgsrc:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1882767818,2900717669&fm=26&gp=0.jpg',info:'看看空间就看见可能吧宝贝空间就立即离开',nav:'咖啡/麦片/冲饮',toUrl:'http://www.baidu.com'},
{imgsrc:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1882767818,2900717669&fm=26&gp=0.jpg',info:'看看空间就看见可能吧宝贝空间就立即离开',nav:'咖啡/麦片/冲饮',toUrl:'http://www.baidu.com'},
],
pic:[
{picUrl:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1882767818,2900717669&fm=26&gp=0.jpg'},
{picUrl:'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1882767818,2900717669&fm=26&gp=0.jpg'}
],
icon:[
{iurl:'img/5.png',name:'玩具'},
{iurl:'img/6.png',name:'盆栽'},
{iurl:'img/7.png',name:'首饰'},
{iurl:'img/8.png',name:'美食'},
],
message: 'ceshishihihih'
};
},
}
const info = {
template: '#info',
data() {
return {
checked : false,
checkedNames: [],
infomessage:'222aasda',
message:'测试input框',
message2:'测试文本框',
picked : '单选',
selected: '',
info_test:Array
};
},
methods: {
get:function(){
//发送get请求
this.$http.get('test.php').then(function(res){
console.log(res.body);
$('#ajax').html(res.body);
info_test = res.body;
},function(){
console.log('请求失败处理');
});
}
}
}
const goumai = {
template: '#goumai',
data() {
return {
message : '文本测试',
message_1 : '<strong style="color:red">v-html</strong>',
use: false
};
},
}
const wode = {
template:'#wode'
}
const detail = {
template:'#detail',
props:{
message:String
}
}
/*定义路由*/
const myroutes = [{
path: '/home',
component: home
}, {
path: '/info',
component: info
}, {
path: '/goumai',
component: goumai
}, {
path: '/wode',
component: wode
}, {
path: '/detail',
component: detail
}
]
/*创建VueRouter实例，然后传'routes'配置*/
const myr = new VueRouter({
routes: myroutes
})
/*创建Vue和挂载根实例*/
const app = new Vue({
el:'#app',
router: myr,
components: {info},
data:{
},
methods: {
show: function(num) {
if(num == 0) {
myr.push('home')
} else if(num == 1) {
myr.push('info')
} else if(num == 2) {
myr.push('goumai')
}else{
myr.push('wode')
}
}
}
})
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
