- Vue.extend creates a component constructor
- template:'' the content to be displayed by the component
- component('',); Register the component and receive two parameters, the first parameter is the label to use, and the second parameter identifies the builder to display the content
For details, please see vue's API: http://v1-cn.vuejs.org/guide/components.html
1. Simple components
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iaiai - qq:176291935</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
</body>
<script type="text/javascript">
var AAA = Vue.extend({ //Create a component constructor
template:'<strong>123</strong>' //Content to be displayed by the component
});
//var a = new AAA(); is equivalent to a new Vue with all its properties (generally this method is not used)
Vue.component('aaa',AAA); //Register the component
new View({
el:'#box',
data:{
bSign:true
}
})
</script>
</html>
2. Add events to components
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iaiai - qq:176291935</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body>
<div id="box">
<aaa></aaa>
</div>
</body>
<script type="text/javascript">
Vue.component('aaa',{
data(){
return {
msg: 'I am a p tag'
};
},
methods:{
sj:function(){
alert(111);
}
},
template:'<p @click="sj()">{{msg}}</p>' //The received data value must be in the form of a function, and the function must return an object
})
new View({
el:'#box',
data:{
},
})
</script>
</html>
Three, vue dynamic components - tab
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>iaiai - qq:176291935</title>
<script type="text/javascript" src="js/vue.js" ></script>
</head>
<body id="box">
<input type="button" @click="s='suning'" value="tab 1" /><!--is followed by the name of the component -->
<input type="button" @click="s='saning'" value="选项卡2" />
<comment :is='s'></comment>
</body>
<script type="text/javascript">
new View({
el:'#box',
data:{
s:'suning'
},
components:{
'suning':{
template:'<p>Tab 1</p>'
},
'saning': {
template:'<p>Tab 2</p>'
}
},
})
</script>
</html>
Fourth, the nesting of routing
<html>
<head>
<title>iaiai - qq:176291935</title>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/vue-resource.js" ></script>
<script type="text/javascript" src="js/vue-router.js" ></script>
</head>
<style>
.v-link-active{
color: red;
}
</style>
<body>
<div id="box">
<ul>
<li>
<a v-link="{path:'/home'}">首页</a>
</li>
<li>
<a v-link="{path:'/news'}">新闻</a>
</li>
</ul>
<div>
<router-view></router-view><!-- display content-->
</div>
</div>
<template id="home">
<h3>home</h3>
<a v-link="{path:'/home/login'}">登陆</a>
<a v-link="{path:'/home/reg'}">注册</a>
<router-view></router-view>
</template>
<template id="news">
<h3>News</h3>
<div>
<a v-link="{path:'/news/detail/001'}">新闻001</a>
<a v-link="{path:'/news/detail/002'}">新闻002</a>
</div>
<router-view></router-view>
</template>
<template id="detail">
<!--{{$route | json}}-->
{{$route.params | json}} <!-- About $route, please see 5, $route parameters -->
</template>
</body>
<script>
var App = Vue.extend();
var Home = Vue.extend({
template:'#home'
});
var News = Vue.extend({
template:'#news'
});
var Detail = Vue.extend({
template:'#detail'
});
var router = new VueRouter ();
router.map({
'home':{
component:Home,
subRoutes:{
'login':{
component:{
template: 'You clicked to log in'
}
},
'reg':{
component:{
template: 'You clicked register'
}
}
}
},
'news':{
component:News,
subRoutes:{
'/detail/:id':{
component:Detail
}
}
},
});
router.redirect({
'/':'/home'
})
router.start(App,'#box');
</script>
</html>
5. Parameters of $route
- $route contains additional information about the route
- $route.params get the current parameters
- $route.path gets the current route
- $route.query to get data