vue 创建组件 模板 动态组件 传值
lesson10
1.demo vue样本
<body>
<div id="myApp">
</div>
</body>
<script>
new Vue({
el:"#myApp",
data:{},
methods:{},
computed:{},
filters:{}
})
</script>
2.案例： 模拟百度搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin:0;
}
p{
border:1px solid green;
}
p.active{
background:gray;
}
</style>
<script src="lib/vue.js"></script>
<!--1、依赖于你的vue.js
2、当你引入resource时，它会在你的Vue.prototype.$http=-->
<script src="lib/vue-resource.js"></script>
</head>
<body>
<div id="myApp">
<!--<input type="text" @keyup.65="search">-->
<!--<input type="text" @keyup.a="search">-->
<!--<input type="text" @keyup.left="search">-->
<form action="https://www.baidu.com/s" target="_blank">
<input type="text" autocomplete="off" v-model="pwd" name="wd" @keyup="search">
</form>
<p v-for="(item,i) in g" :class="{active:index===i}">{{item.q}}</p>
</div>
</body>
<script>
// Vue.prototype.$zhang = {
// run(){
// console.log(12);
// }
// }
new Vue({
el:"#myApp",
data:{
pwd:"",
g:[],
index:-1,
q:""// q 代表的是搜索的值
},
methods:{
search(e){
// 第一个参数是地址,第二个参数是你传递的内容，第三个是cb
// https://www.baidu.com/sugrec?prod=pc&from=pc_web&wd=%E6%97%A0%E9%87%8F&cb=fn
if(e.keyCode === 40){
this.index++;
if(this.index> this.g.length-1){
this.index=-1;
this.pwd = this.q;// 搜索的数据
}else{
this.pwd = this.g[this.index].q;
}
}else{
this.$http.jsonp("https://www.baidu.com/sugrec",{
from:"pc_web",
prod:"pc",
wd:this.pwd
},{
jsonp:"cb"
}).then(({data})=>{
console.log(data);
this.g = data.g;
this.q = data.q;
})
}
// https://www.baidu.com/sugrec?from=pc_web&pwd=&cb=
// console.log(e.keyCode)
// this.$zhang.run();
}
},
computed:{},
filters:{}
})
</script>
</html>
3.模板 template
1、template 有且只能有一个根元素。
2、将你要挂载的元素进行替换操作。
3、模板当中可以使用指令，data,methods等等都可以使用
// 注意：
当你实现化VUE实例时，他会看是否有模板，如果有会将你挂载的元素替换。如果没有就使用你挂载的元素作为模板。
template有三种使用方法
1、直接赋值
template:`<div>1</div>`
2、通过script标签来定义
<script type="x/template" id="tp">
<div>2</div>
</script>
template:"#tp"
3、使用内置组件template
<template id="my">
<div>3</div>
</template>
template:"#my"
4.补充指令
v-html：输出的是HTML,可以被浏览器所识别编译。
v-text:输出的是纯文本格式
5.组件
实例： 组件1
<body>
<div id="myApp">
大家好，我在MyApp中
<one></one> 组件的调用
</div>
</body>
<script>
new Vue({
el:"#myApp",
// 定义组件 注册组件 ----》局部组件
components:{
one:{
// 模板决定你组件的内容。
template:`<div>one组件当中</div>`
}
}
})
</script>
实例： 组件2
<body>
<div id="myApp">
大家好，我在MyApp中
<one></one>
</div> //挂载的元素
</body>
<script>
new Vue({
el:"#myApp",
template:`<div>啦啦啦<one></one></div>`, //template模板 会将挂载的元素替换
components:{
one:{
template:`<div>one组件当中</div>` //one 就是 vue实例下的一个组件
}
}
})
</script>
6.组件的命名规则：
如果组件名字当中包含大写字母需要将其改为小写并以-分割。
7.单向数据流
实例可以向组件进行传递，通过属性（props）
但是 通过属性给组件传递的数据，在组件内是不允许直接修改的。
实例：
<body>
<div id="myApp">
<p>myApp:{{a}}</p>
<one num="12" age="13"></one>
</div>
</body>
<script>
new Vue({
el:"#myApp",
data:{
a:1
},
components:{
one:{
//将你要接收的数据进行设置
props:["num","age"]
temtemplate:'<div> {{num}} {{age}}</div>'
}
}
})
8属性传值：
向下传值通过属性： a.数据的传递是单向的
b.如果要修改数据的话，可以通过父级向组件传递一个函数，通过该函数对你的数据进行修改。
9. 组件vue实例当中的data与vue实例当中的data定义是有 区别的。
data是一个函数，该函数必须要有一个返回值，返回值必须要是一个对象。
为了要保证你子组件当中数据的独立性。
10. 组件嵌套
</body>
<script>
new Vue({
el:"#myApp",
components:{
one:{
template:`<div>one <two></two></div>`,
components:{
two:{
template:`<div>two</div>`
}
}
}
}
})
</script>
11.组件与v-for 遍历
<body>
<div id="myApp">
<goods-list v-for="item in arr" :info="item"></goods-list>
</div>
</body>
<script>
new Vue({
el:"#myApp",
data:{
arr:[
{
goodsTitle:"栗子",
goodsPrice:12
},
{
goodsTitle:"地板",
goodsPrice:34
}
]
},
components:{
goodsList:{
props:["info"],
template:`<div>
<h3>{{info.goodsTitle}}</h3>
<p>{{info.goodsPrice}}</p>
</div>`
}
}
})
</script>
12.动态组件
<!--动态组件 is属性的值即是所选用的组件名-->
<components :is="comArr[index]"></components>
案例说明：
<body>
<div id="myApp">
<input type="button" @click="changeIndex" value="换肤">
<!--动态组件 is属性的值即是所选用的组件名-->
<components :is="comArr[index]"></components>
</div>
</body>
<script>
const one = {
template:`<div style="background:red;">one</div>`
};
const two = {
template:`<div style="background:yellow;">two</div>`
};
const three = {
template:`<div style="background:pink;">three</div>`
};
const four = {
template:`<div style="background:deeppink;">four</div>`
};
new Vue({
el:"#myApp",
data:{
index:0,
comArr:["one","two","three","four"]
},
methods:{
changeIndex(){
this.index++;
if(this.index>this.comArr.length-1)
this.index=0;
}
},
components:{
one,
two,
three,
four
}
})
</script>
重点知识点归纳：
1、template有三种使用方法
1、直接赋值
template:`<div>1</div>`
2、通过script标签来定义
<script type="x/template" id="tp">
<div>2</div>
</script>
template:"#tp"
3、使用内置组件template
<template id="my">
<div>3</div>
</template>
template:"#my"
2.定义组件 局部组件 全局组件
局部组件：
new Vue({
components:{
one:{
子组件如何接收：
//将你要接收的数据进行设置
props:["num","age"]
template:`<div>one组件当中</div>`
}
}
})
全局组件：
Vue.component(componentName,config) //第一个参数是你组件的名字，第二个是给件的配置项
3.动态组件：<!--动态组件 is属性的值即是所选用的组件名-->
<components :is="组件名[index]"></components>
4.es6模块化：
如何导出： export const
如何引入：script 引入 通过import
5. 向下如何传 子组件如何接收。
通过props设置允许接收的属性名：
将你要接收的数据进行设置
props:["num","age"]
