Vue.js 프레임 워 크 경로 사용 방법 인 스 턴 스 상세 설명
html 코드:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name='viewport' content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'>
<link href="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="../css/css.css" rel="external nofollow" />
<script src="../lib/vue.min.js" type="text/javascript"></script>
<script src="../lib/vue-router.js" type="text/javascript" charset="utf-8"></script>
<title> app </title>
</head>
<body>
<div id="app">
<router-view v-bind:info='info' v-bind:pic='pic' v-bind:icon='icon'></router-view>
<!-- -->
<div id="nav">
<ul class="nav nav-pills">
<li class="active">
<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>
<!-- -->
<script type="text/x-template" id='home'>
<div>
<!-- -->
<div id="header">
<h5> app</h5>
</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="../img/ _ _files/594781cc80d85.jpg" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<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" rel="external nofollow" rel="external nofollow" 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" rel="external nofollow" rel="external nofollow" 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">
<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'>
<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>
</div>
<div> </div>
<div> </div>
</div>
</script>
<script type="text/x-template" id='info'>
<div>
info
</div>
</script>
<script type="text/x-template" id='goumai'>
<div>
</div>
</script>
<script type="text/x-template" id='wode'>
<div>
</div>
</script>
<script type="text/javascript">
/* */
const home = {
template: '#home',
props:{
info:Array,
pic:Array,
icon:Array
}
}
const info = {
template: '#info'
}
const goumai = {
template: '#goumai'
}
const wode = {
template:'#wode'
}
/* */
const myroutes = [{
path: '/home',
component: home
}, {
path: '/info',
component: info
}, {
path: '/goumai',
component: goumai
}, {
path: '/wode',
component: wode
}]
/* VueRouter ， 'routes' */
const myr = new VueRouter({
routes: myroutes
})
/* Vue */
const app = new Vue({
router: myr,
data:{
info:[
{imgsrc:'http://img.alicdn.com/bao/uploaded/i2/TB16ybkRpXXXXXeXXXXXXXXXXXX_!!0-item_pic.jpg',info:' 380 / ',nav:' / / ',toUrl:'http://item.taobao.com/item.htm?id=534003771051'},
{imgsrc:'http://img.alicdn.com/bao/uploaded/i2/TB1SLSiRFXXXXaMXVXXXXXXXXXX_!!0-item_pic.jpg',info:' ',nav:' / / ',toUrl:'http://item.taobao.com/item.htm?id=550539721556'},
{imgsrc:'http://img.alicdn.com/bao/uploaded/i4/TB1cYYHQVXXXXakXXXXXXXXXXXX_!!0-item_pic.jpg',info:' 2017 T ',nav:' / ',toUrl:'http://item.taobao.com/item.htm?id=549327457300'}
],
pic:[
{picUrl:'../img/ _ _files/555737bbad955.jpg'},
{picUrl:'../img/ _ _files/594781cc80d85.jpg'}
],
icon:[
{iurl:'../img/ _ _files/5695f4aeb8a3f.png',name:' '},
{iurl:'../img/ _ _files/5695ff4d7bd96.png',name:' '},
{iurl:'../img/ _ _files/5695ff6d5b989.png',name:' '},
{iurl:'../img/ _ _files/5695ff9b2eebd.png',name:' '},
{iurl:'../img/ _ _files/5695ffd10d9e3.png',name:' '},
{iurl:'../img/ _ _files/569600f2bb151.png',name:' '},
{iurl:'../img/ _ _files/569600f2bb151.png',name:' '},
{iurl:'../img/ _ _files/5805f0ba98f4f.png',name:' '},
]
},
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')
}
}
}
}).$mount('#app')
window.onload = app.show(0)
</script>
<script src="../js/js.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
#header{
background: white;
text-align: center;
margin:0 auto;
}
#jiugongge{
margin-top:20px;
}
#jiugongge div{
text-align: center;
}
.production{
display:flex;
margin-top:10px;
}
.production .image{
flex: 1;
}
.production .content{
flex: 2;
}
.image img {
width:150px;
}
#nav{
position: fixed;
bottom: 0px;
background: white;
width:100%;
margin:0 10px;
}
#nav ul{
width:100%;
}
#nav li{
width:24%;
}
#produces{
height:40px;
margin-bottom: 40px;
}
$('ul').on('click','li',function(){
$('li').attr('class','')
$(this).attr('class','active')
})
이상 은 Vue.js 프레임 워 크 의 사용 방법 입 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남기 거나 본 사이트 의 커 뮤 니 티 에 가서 토론 을 하 십시오.읽 어 주 셔 서 감사합니다. 도움 이 되 셨 으 면 좋 겠 습 니 다.본 사이트 에 대한 지지 에 감 사 드 립 니 다!
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
LaravelAPI + Nuxt로 MultiAuth 구현현재 SIer5년째로 javascript(Jquery만), PHP(프레임워크 없음)를 2년 정도, C#(Windows 앱) 3년 정도 왔습니다. 여러가지 인연이 있어, 개인으로 최근 웹 서비스의 시작을 하게 되었습니...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
