0810 vue 创建组件 模板 动态组件 传值
Posted wangwenxin123
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了0810 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"]
以上是关于0810 vue 创建组件 模板 动态组件 传值的主要内容，如果未能解决你的问题，请参考以下文章