最原始组件的调用
//声明入口组件 组件的首字母大写
var App = {
template:'<h1>我是入口组件</h1>'，
methos:{
//.......
}
};
//只有在new Vue中，才能使用单标签的组件
new Vue({
el:'#app',
components:{ //声明要用的组件们
//key 是组件名，value是组件对象
app:App
},
template:'<app/>'//入口组件
});
总结：1，生出子，声明子，使用子
建建组件的几种方式
//函数调用的方式创建组件
var MyBody = Vue.extend({
template:'<div>我是中部</div>'
});
//方式二:语法糖
var MyBody = {
template:'<div>我是中部</div>'
}
父组件向子组件传递数据
image.png
<!DOCTYPE html>
<html>
<head>
<title>父向子传递数据</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
var Son = {
template:`
<div>
接收的参数是：{{title}}
<h1 v-if='xxx'>1</h1>
<h1 v-show='xxx'>2</h1>
<ul>
<li v-for="stu in ['张三','李四']" >{{stu}}</li>
</ul>
<button @click='changeXxx'>改变</button>
<hr/>
单向数据流(vue -> html)
<br/>
<input type='text' :value = 'text' />
<br/>
<br/>
双向数据流(vue -> html -> vue)
<br/>
<input type='text' v-model:value = 'text' />
<br/>
输出 {{text}}
</div>
`,
props:['title'],
data:function (){
return {
xxx:true,
text:'我是input的值'
}
},
methods:{
changeXxx:function(){
this.xxx = !this.xxx;
}
}
}
// 父组件给子组赋值其实就是 调用v-bind给元素的属性赋值
var App = {
components:{
son:Son,
},
template:`
<div>
<son :title='xxx'/>
</div>
`,
data:function (){
return {
xxx:'我是title属性的数据',
}
}
}
new Vue({
//data 不在这里声明，只是启动组件
el:'#app',
//声明组件
components:{
app:App,
},
template:'<app/>'
});
</script>
</body>
</html>
-
node_modules/vue/dist文件夹里js说明
image.png
复习
image.png
image.png
nodejs KOA框架 mp3文件 快进功能，需要setHeader 头部给浏览器
image.png
