Vue2.5开发去哪儿网App 第四章笔记 上
程序员文章站
2023-08-18 08:08:26
一 . 组件细节知识点 1. 解决组件在h5中编码规范 例如 ： table , ul , ol 等等 使用 is 属性解决 组件使用细节点 < ......
一 . 组件细节知识点
1. 解决组件在h5中编码规范
例如 ： table , ul , ol 等等
<table>
<tbody>
<row></row>
<row></row>
<row></row>
</tbody>
</table>
vue.component('row',{
template:'<tr><td>this is a row</td></tr>'
});
使用 is 属性解决
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>组件使用细节点</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<!--1.vue提供的is属性-->
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
</div>
<script>
vue.component('row',{
template:'<tr><td>this is a row</td></tr>'
});
var vm = new vue({
el:"#app"
})
</script>
</body>
</html>
2. 非根组件定义data
在子组件里面定义data时，data必须是一个函数，不能是一个对象。这是为了保证每个子组件都有独立的data数据
写法：
data:function(){
return {
content:'this is a content'
}
}
3.代码里面操作dom
handleclick:function () {
//可根据ref 获取dom节点
var hello = this.$refs.hello.innerhtml;
alert('获取到的值是:'+hello)
}
4. counter 求和 了解ref的使用
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>组件使用细节点</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<table>
<tbody>
<tr is="row"></tr>
<tr is="row"></tr>
<tr is="row"></tr>
</tbody>
</table>
<div @click="handleclick" ref="hello">获取hello</div>
<!--#计数器-->
<counter @change="gettotal" ref="one"></counter>
<counter @change="gettotal" ref="two"></counter>
<!--#连个counter求和-->
<!--发布订阅模式-->
<div>总数是：{{total}}</div>
</div>
<script>
vue.component('row',{
data:function(){
return {
content:'this is a content'
}
},
template:'<tr><td>{{content}}</td></tr>'
});
// #计数器
var counter = vue.extend({
template:'<div><button @click="counterclick">click me</button>{{number}}</div>',
data:function () {
return {
number:0
}
},
methods:{
counterclick:function () {
this.number++;
//向父组件传值
this.$emit('change')
},
}
})
vue.component('counter',counter);
var vm = new vue({
el:"#app",
data:{
total:0
},
methods:{
handleclick:function () {
//可根据ref 获取dom节点
var hello = this.$refs.hello.innerhtml;
alert('获取到的值是:'+hello)
},
gettotal:function () {
var refs = this.$refs;
this.total = refs.one.number + refs.two.number
}
}
})
</script>
</body>
</html>
二 . 父子组件传值
父组件向子组件传值都是通过属性的形式传递的：
<div id="app">
<counter :count="9"></counter>
<counter :count="1"></counter>
</div>
<script>
var counter = {
props:['count'],
template:'<div>{{count}}</div>'
}
var vm = new vue({
el:"#app",
components:{
counter:counter
}
})
counter 求和：
vue 会对子组件 直接对父组件传递值得操作 给予警告
子组件不能修改父组件的值，只能使用，单向数据流的作用
修改方法： 对父组件的值克隆一个副本：对子组件自己值进行修改
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>父子间更多传值方式</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<counter :count="2" @change="gettoal"></counter>
<counter :count="3" @change="gettoal"></counter>
<div>{{total}}</div>
</div>
<script>
var counter = {
props:['count'],
template:'<div @click="handleclick">{{number}}</div>',
data:function(){
return {
number:this.count
}
},
methods:{
handleclick:function () {
this.number = this.number + 1;
this.$emit('change',1)
}
}
}
var vm = new vue({
el:"#app",
data:{
total:5
},
components:{
counter:counter
},
methods:{
gettoal:function (number) {
this.total += number
}
}
})
</script>
</body>
</html>
三 . 组件参数校验与非props特性
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。
非props特性: 1.当子组件 未接收并且使用 2.会显示在子组件的html属性上
props特性:不会显示在子组件的html属性上
props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>组件参数校验与非props特性</title>
<script src="../../vue.js"></script>
</head>
<body>
<!--props 可以是数组或对象，用于接收来自父组件的数据。props 可以是简单的数组，或者使用对象作为替代，对象允许配置高级选项，如类型检测、自定义校验和设置默认值。-->
<!--非props特性: 1.当子组件 未接收并且使用 2.会显示在子组件的html属性上-->
<!--props特性:不会显示在子组件的html属性上-->
<div id="app">
<child :content="{id:123,name:'dell'}" newd="newd"></child>
</div>
<script>
vue.component('child',{
// props:{
// content:{
// type:[number,string,object],
// default:{id:1,name:'dong'},
// required: true,
// // validator: function (value) {
// // console.log(value)
// // if(value.name!=='dong'){
// // alert('姓名错误')
// // }
// // }
// }
// },
template:"<div>{{ content }}{{newd}}</div>"
})
var vm = new vue({
el:"#app"
})
</script>
</body>
</html>
四 . 给组件绑定原生事件
原始步骤：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>给组件绑定原生事件</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<!--此处 @click="hancleclick" 监听自定义的事件-->
<child @click="hancleclick"></child>
</div>
<script>
vue.component('child',{
//此处 @click="hancleclick" 监听原生的事件
template:'<div @click="hancleclick">child</div>',
methods:{
hancleclick:function () {
// alert('child click')
this.$emit('click')
}
}
})
var vm = new vue({
el:"#app",
methods:{
hancleclick:function () {
alert('father click')
}
}
})
</script>
</body>
</html>
添加 native 修饰符 .native - 监听组件根元素的原生事件。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>给组件绑定原生事件</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<child @click.native="hancleclick"></child>
</div>
<script>
vue.component('child',{
template:'<div>child</div>',
})
var vm = new vue({
el:"#app",
methods:{
hancleclick:function () {
alert('father click')
}
}
})
</script>
</body>
</html>