props选项
作用 : props选项用来声明他期待获得的数据
props本质 : props为元素属性
用事件改变props时方法后无需写小括号
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="div">
<!--定义自己所需的info值-->
<demo info='苟利国家生死以,' info2='岂因祸福避趋之!' img='https://ss2.bdstatic.com/kfoZeXSm1A5BphGlnYG/icon/weather/aladdin/jpg/a2.jpg'></demo>
<demo info='烟锁池塘柳,' info2='桃燃锦江堤!' img='https://ss0.bdstatic.com/k4oZeXSm1A5BphGlnYG/icon/weather/aladdin/jpg/a0.jpg'></demo>
</div>
<template id="tmp">
<div>
<p>{{ msg }}</p>
<h1 @click="fn">{{ name }}</h1>
<img :src = 'img'/>
</div>
</template>
</body>
</html>
<script type="text/javascript">
var vm = new Vue({
el:'#div',
components:{
demo:{
template:'#tmp',
data:function(){
return{
msg:'hello',
name:'leition'
}
},
// 创建props并命名
props: ['info', 'info2','img'],
methods:{
// 用info值替换name值
fn:function(){
this.msg = this.info;
this.name = this.info2;
}
}
}
}
})
</script>
![Vue - 安装Node.js（配置环境变量、配置NPM下载存放目录、NPM设置镜像仓库）[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)