vue 组件基础

组件的使用,利用属性传递参数,参数可以是对象

<div id="myDiv">
<h2>组件</h2>
<ol>
<game-item v-for="item in games" :game="item"></game-item>
</ol>
</div>
<script>
Vue.component('game-item', {
props: ['game'],
template: "<li>{{game.title}}</li>"
})
var myDiv = new Vue({
el: "#myDiv",
data: {
games: [
{"title": "c++"},
{"title": "java"},
{"title": "java"},
]
}
})
</script>

组件也可以有函数,和计算属性

<div id="myDiv">
<my_com></my_com>
</div>
<div id="myDiv2">
组件接受一个名为score的参数,根据参数显示不同的信息<br>
<my_com2 :score='50'></my_com2>
<my_com2 :score='70'></my_com2>
<my_com2 :score='90'></my_com2>
</div>

<div id="myDiv3">
<input type="text" placeholder="请输入姓名" v-model="name">
<my_com3 :com_name="name"></my_com3>
</div>
<script>
//组件的动态数据应该使用数据函数
Vue.component('my_com', {
template: "<h1>{{message}}</h1>",
data: function () {
return {message: 'hello'}
}
})
var myDiv = new Vue({
el: "#myDiv",
})

Vue.component('my_com2', {
props: ['score'],
template: "<h1>分数是:{{score}},级别:{{rank}}</h1>",
computed: {
rank: function () {
if (this.score < 60)
return '不及格'
else if (this.score < 80)
return '良好'
else
return '优秀'
}
}
})
//依然在dom中,只是不显示而已
var myDiv = new Vue({
el: "#myDiv2",
})

Vue.component('my_com3', {
props: ['com_name'],
template: "<h1>你好,{{com_name}}</h1>",
})
var myDiv = new Vue({
el: "#myDiv3",
data:{
name:'aaa'
}
})
</script>

数据验证

<div id="myDiv">
<show_info name="aaa" :age="1" :detail="{address:'earth',language:'English'}"></show_info>

使用默认值 <br>
<show_info name="aaa" :age="1"></show_info>

</div>
<script>

Vue.component('show_info', {
props: {
name: {
type: String,
required: true,
},
age: {
type: Number,
validator: function (value) {
return value >= 0 && value <= 120
}
},
detail: {
type: Object,
default: function () {
return {
address: 'Xian',
language: 'Chinese'
}
}
}

},
template: '<h2>name:{{this.name}},age:{{this.age}},detail:{{this.detail}}</h2>'
})

var myDiv = new Vue({
el: "#myDiv",
})

table组件,显示时需要使用is属性

<div id="myDiv">
<my_component></my_component>
<my_com></my_com>

</div>

<div id="myDiv2">
<my_component></my_component>
<my_com></my_com>
</div>

<div id="myDiv3">
表行组件,必须使用is属性传递,否则无法显示<br>
<table border="1">
<tr>
<td>编号</td>
<td>名称</td>
</tr>

3ff0
<tr is="my_row1"></tr>
<tr is="my_row2"></tr>

</table>
</div>

<script>
//全局组件注册
Vue.component('my_component', {
template: '<h1>hello</h1>'
})
Vue.component('my_row1', {
template: '<tr><td>(1)</td><td>python</td></tr>'
})
Vue.component('my_row2', {
template: '<tr><td>(2)</td><td>java</td></tr>'
})
//局部组件注册
var com = {
template: "<h2>world</h2>"
}

//必须实例化 vue对象
var myDiv = new Vue({
el: '#myDiv'
})
var myDiv2 = new Vue({
el: '#myDiv2',
components: {
'my_com': com
}
})
var myDiv = new Vue({
el: '#myDiv3'
})
</script>

不同定义的风格

<div id="myDiv" class="container">
<hello></hello>
</div>

<template id="hello-component">
<div>
<h1>template:{{cnt}}</h1>
<button @click="add">add</button>
</div>
</template>
</body>

<script>
var hello = {
hello: {
template: "#hello-component",
data: function () {
return {
cnt: 0,
}
},
methods: {
add: function () {
console.log('add')
this.cnt++
}
}
}
}
new Vue({
el: '#myDiv',
components: hello
})

Vue.component('hello', {
template: "#hello-component",
data: function () {
return {
cnt: 0,
}
},
methods: {
add: function () {
this.cnt++
}
}
})

new Vue({
el: "#myDiv",

})
</script>

对路由视图进行命名,home路由有两个视图组件,设置components属性设置不同的视图对应的模板

<div id='myDiv' class="container">
<div>
<h1>简单路由</h1>
<router-link to='/home'>Home</router-link>
<router-link to='/about'>About</router-link>
<router-link to='/more'>More</router-link>
</div>

<!--显示对应路由的组件-->
<router-view name='header'></router-view>
<router-view name='footer'></router-view>

</div>
</body>

<script>
//路由匹配
var routes = [
{
path:'/home',
components:{
header:{
template:'<h1>home-header</h1>'
},
footer:{
template:'<h1>home-footer</h1>'
}
}
},
{
path:'/err',
component:{
template:'<h1>err</h1>'

}
},
{
path:'/manage',
component:{
template:'<h1>manage</h1>'

}
}
]
//路由对象
var router = new VueRouter({
routes: routes
})

//传入对象
new Vue({
el: "#myDiv",
router: router
})
</script>