<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js"></script>
<style>
div {
font-size: 14px;
font-weight: normal;
color: grey;
}
.title {
font-size: 22px;
font-weight: bolder;
color: skyblue;
}
.common {
margin-top: 20px;
margin-bottom: 20px;
border-top: 2px dashed gainsboro;
}
.parting-line {
background: peachpuff;
margin: 20px;
}
</style>
</head>
<body>
<div id="app1">
<div class="common">
<div class="title">(1) app1-传递静态prop</div>
<blog-post post-title="m kkdsd"></blog-post>
dynamically assigned a value of a variable </ div><div class = "title">
<Blog the bind-POST-V: POST-title = "post.title"> </ POST-Blog>
the digital values with a default //
<div class = "title"> (3) app1- impart a dynamic complex expression values </ div>
<Blog the bind-POST-V: POST-title = "post.title + 'by' + post.author. name "> </ POST-Blog>
</ div>
</ div>
</ body>
<Script>
// prop verification
Vue.component ( 'My-Component', {
The props: {
// foundation type checking
propA: Number ,
// plurality of possible types
propB,: [string, Number the],
// mandatory string
propC: {
type: string,
required: to true
},
propD: {
type: Number the,
default: 100
},
the object with default values //
PROPE: {
type: Object,
default: function () {
return {Message: 'Hello'}
}
},
// custom validation function
propF: {
Validator: function ( value) {
// this value must match the string following a
return [ 'Success',' warning ',' Danger ']. the indexOf (value)! == -1
}
}
}
})
Vue.component (' Blog -post ', {
The props: [' posttitle '],
Template: `<H3> posttitle {{}} </ H3>`
})
Was app1 = new Vue ({
el:'#app1',
data:{
post:{
title:'kkk',
author:{
name:'888'
}
}
}
})
</script>
</html>