<body>
<div id = 'app'>
<div>
<h3>正常的数据</h3>
<p>
Prop验证
</p>
<div>
<p>name:{{dr.name}}</p>
<p>age:{{dr.age}}</p>
</div>
</div>
<hr>
<div>
<h3>组件的数据</h3>
<div>
<p><input v-model="telphone" /></p>
</div>
<div>
<div>component组件(默认):</div>
<child :child-msg = 'name' my-text = '测试看看'
:msg_null="123+456"
msg_string="this is string"
:msg_number="99"
:msg_twoway.sync="telphone"
:msg_validate="mobilephone"
:msg_number2String="mobilephone"
:msg_obj2json="dr"
:msg_json2obj="drJson">
</child>
</div>
</div>
</div>
<template id = 'child'>
<div>
<p>msg_1:{{msg_1}}</p>
<p>childMsg:{{childMsg}}</p>
<p>myText:{{myText}}</p>
<p>show_text:{{show_text}}</p>
<hr>
<div>msg_null:{{msg_null}}</div>
<div>msg_string:{{msg_string}}</div>
<div>msg_number:{{msg_number}}</div>
<div>msg_obj:{{"name-->"+msg_obj.name+", age-->"+msg_obj.age}}</div>
<div>msg_twoway:<input v-model="msg_twoway"></div>
<div>msg_validate:{{msg_validate}}</div>
<div>msg_number2String:{{msg_number2string}}</div>
<div>msg_obj2json:{{msg_obj2json}}</div>
<div>msg_json2obj:{{"name: "+msg_json2obj.name+"; age: "+msg_json2obj.age}}</div>
</div>
</template>
<script src="https://cdn.bootcss.com/vue/2.5.8/vue.min.js"></script>
<script type="text/javascript">
Vue.component('child', {
template : '#child',
props: {
childMsg : String,
myText : String,
//基础类型检测("null"意思是任何类型都可以)
msg_null: null,
//String类型,必须是定义过的,可以是空字符串""
msg_string: {
type: String,
required: true,
},
//Number类型,默认值100
msg_number: {
type: Number,
default: 100,
},
//Object类型,返回值必须是js对象
msg_obj: {
type: Object,
default: function() {
return {
name: "DarkRanger",
age: "18",
}
}
},
//指定这个prop为双向绑定
//如果绑定类型不对将抛出一条警告
msg_twoway: {
type: String,
twoWay: true,
},
//自定义验证,必须是Number类型,验证规则:大于0
msg_validate: {
type: Number,
validator: function(val) {
return val > 0;
}
},
//将值转为String类型
//在设置值之前转换值(1.0.12+)
msg_number2string: {
coerce: function(val) {
return val + ""
}
},
//js对象转JSON字符串
msg_obj2json: {
coerce: function(obj) {
return JSON.stringify(obj);
}
},
//JSON转js对象
msg_json2obj: {
coerce: function(val) {
return JSON.parse(val);
}
}
},
data : function () {
return {
msg_1 : '这是子组件自己的数据',
childMsg : '这是子组件自己的数据', // 这个数据会被父组件传过来的数据覆盖
show_text : this.myText
}
}
}) ;
var _vm = new Vue({
data : {
name : '风君子',
telphone: "0356-1234567",
mobilephone: 15912345678,
dr: {
name: "DarkRanger",
age: 25
},
drJson: '{"name":"DarkRanger","age":25}',
},
methods : {}
}).$mount('#app');
</script>
<!--
解释说明:
1、msg_null:不论什么数据类型,只要能解析成功,就渲染成正确的html。
2、msg_string:只能传递String类型的字符串,如果将child中的“msg_string="this is string"”更改为“:msg_string="1+2"”,控制台报错。
3、msg_number:如果在child06标签中没有定义值,我们将会取默认值100,现在定义了“:msg_number="99"”,如果将“:msg_number="99"”更改为“msg_number="99"”,控制台报错。
4、msg_obj:在js中我们定义的msg_obj的default属性是一个具有返回js对象的函数,这里取值的时候直接取的就是返回值,如果在child06中定义或者绑定了新的js对象,则会将msg_obj更新为新的数据。取js对象属性值的时候用{{Object.prop}}取值即可。
5、msg_twoway:双向数据绑定,在测试的过程中发现,即使设置“twoWay: true”,当子组件发生变化时,vue实例的数据并不会更新,还是单向的数据绑定,这里我将child中原先的“:msg_twoway="telphone"”更改为“:msg_twoway.sync="telphone"”,保证测试能够数据双向绑定。
6、msg_validate:有验证规则的组件数据,这里定义的规则是当前数值必须大于0,如果将child06中的“:msg_validate="mobilephone"”更改为“:msg_validate="-1"”。控制台报错。
7、msg_number2string:在结果赋值之前将数值转化为字符串。
8、msg_obj2json:vue.js内置了JSON的两个方法,一个是JSON.parse(jsonStr)==》将JSON字符串转化为js对象,另外一个是JSON.stringify(obj)==》将js对象序列化为JSON字符串。这里是将obj转化为json字符串,需要添加coerce属性,它是一个具有返回json字符串的函数,当然不是必须得用JSON.stringify(obj)方法,只要方法合理,能够转化为json能够识别的字符串即可。
9、msg_json2obj: 将json字符串转化为js对象。
-->
</body>
原文链接:http://blog.csdn.net/qq_24122593/article/details/53019354