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=)