div设置高度 vue_Vue系列：组件化开发

最新推荐文章于 2023-06-21 10:45:20 发布

weixin_39535557

最新推荐文章于 2023-06-21 10:45:20 发布

阅读量245

点赞数

文章标签： div设置高度 vue

本文链接：https://blog.csdn.net/weixin_39535557/article/details/112205234

版权

基础语法

v-model修饰符

lazy：失去焦点或者回车时，才会更新data。
number：指定双向绑定的数据为number类型。
trim：去除左右空格。

示例：

<input type="text" v-model.lazy="message">
<input type="age" v-model.number="age">
<input type="text" v-model.trim="name">

组件化开发

组件化将一个页面拆分成一个个小的功能块，易于管理和维护。
Vue.js中应用会被抽象成一颗组件树。

全局组件

使用全局组件的流程：
- 创建组件构造器：调用Vue.extentd()方法创建组件构造器。
- 注册组件：调用Vue.component()方法注册组件。
- 使用组件：在Vue实例的作用范围内使用组件。

全局组件流程示例。

<body>
<div id="app">
<my-message>my-message>
<my-message>my-message>
div>
body>
<script>
	const cpnC = Vue.extend({
		template:`<div><h1>标题h1><p>内容001p><p>内容002p>div>
		`
	})
	//注册全局组件，可以在多个Vue实例下使用
	Vue.component('my-message',cpnC)  
	const app = new Vue({
		el: '#app'
	})script>

局部组件

局部组件：在Vue实例中配置components属性，只能在自己的Vue实例中使用。

const cpnC = Vue.extend({
	template:`
<div>
<h1>标题h1>
<p>内容001p>
<p>内容002p>
div>
	`
})
const app = new Vue({
	el: '#app',
	components:{
	    cpn: cpnC
	}
})

全局组件和局部组件语法糖

Vue简化了调用Vue.extend()的步骤，可以直接使用一个对象来代替。


<body>
<div id="app">
<com1>com1>
div>
body>
<script>
	Vue.component('com1',{
		template:`<div><h1>标题222h1><p>内容2222p><p>内容22222p>div>
		`
	})script>


<body>
<div id="app">
<cpn2>cpn2>
div>
body>
<script>
	Vue.component('com1',{
		template:`<div><h1>标题222h1><p>内容2222p><p>内容22222p>div>
		`
	})
	const app = new Vue({
		el: '#app',
		components:{
			cpn2:{
				template:`<div><h1>标题333h1><p>内容3333p><p>内容33333p>div>
				`
			}
		}
	})script>

组件模板抽离写法

方法一：使用script标签写法。

<body>
<div id="app">
<com1>com1>
div>
body>
<script type="text/x-template" id="cpn"><div><h1>标题模板抽离标题h1><p>内容抽离11p><p>内容抽离11p>div>script>
<script>
	Vue.component('com1',{
		template:'#cpn'
	})script>

方法二：使用template标签写法。

<body>
<div id="app">
<cpn2>cpn2>
div>
body>
<template id="cpn2">
<div>
<h1>标题模板抽离标题222h1>
<p>内容抽离222p>
<p>内容抽离222p>
div>
template>
<script>const app = new Vue({
		el: '#app',
		components:{
			cpn2:{
				template:'#cpn2'
			}
		}
	})script>

父组件和子组件

在父组件中使用components添加子组件。

示例。

<body>
<div id="app">
<cpn2>cpn2>
div>
body>
<script>
	const cpnC1 = Vue.extend({
		template:`<div><h1>标题222h1><p>内容2222p><p>内容22222p>div>
		`
	})
	const cpnC2 = Vue.extend({
		template:`<div><h1>标题h1><p>内容001p><p>内容002p><cpn1>cpn1>div>
		`,
		components:{
			cpn1: cpnC1
		}
	})
	const app = new Vue({
		el: '#app',
		components:{
			cpn2:cpnC2
		}
	})script>

组件中的data函数

组件中的data必须是函数形式。
组件会被多个地方复用，以函数形式返回时，每个组件独立，不会共用属性。

父组件向子组件的通信

通过props向子组件传递数据。

向子组件传递数据示例。

<body>
<div id="app">
<cpn :msg="message">cpn>
div>
body>
<template id="cpn1">
<div>
<h1>这是子组件标题h1>
<p>这是子组件内容p>
div>
template>
<template id="cpn2">
<div>
<h1>这是父组件标题h1>
<p>这是父组件内容p>
		{{msg}}
<cpnzi>cpnzi>
div>
template>
<script>const cpnzi = {
		template:'#cpn1'
	}const cpn ={
		template:'#cpn2',
		props:['msg'],
		components:{
			cpnzi:cpnzi
		}
	}const app = new Vue({
		el: '#app',
		data:{
			message:'消息01'
		},
		components:{
			cpn:cpn
		}
	})script>

props更多写法示例。

// 数组形式
props:['msg'],

//类型限制
props:{
    cmovies: Array
}

//更多设置
props:{
    cmessage:{
        type: String,
        default: 'aaaaa',
        required: true
    }
}

//类型是对象或者数组时，默认值必须是一个函数。
props:{
    cmessage: {
        type: Array,
        default() {
            return []
        }
    }
}

子组件向父组件的通信

通过自定义事件($emit)向父组件触发事件，父组件中使用v-on监听子组件事件。
如果父组件监听自定义事件时，指定的处理函数没有写参数，vue会自动将子组件$emit中携带的参数传递过来。(其他场景中，会默认传event)

代码示例。

<body>
<div id="app">
<sub1 @add="addSub" @dec="decSub">sub1>
<h2>{{count}}h2>
div>
body>
<template id="sub1">
<div>
<input v-model:value="num">
<button @click="addnum">+button>
<button @click="decnum">-button>
div>
template>
<script>const sub1 ={template:'#sub1',
		data(){return {num:1
			};
		},methods:{
			addnum(num){this.$emit('add',this.num)
			},
			decnum(){this.$emit('dec',this.num)
			}
		}
	}const app = new Vue({el: '#app',data:{count:0
		},components:{
			sub1
		},methods:{
			addSub(num){console.log(num)this.count += parseInt(num)
			},
			decSub(num){console.log(num)this.count -= parseInt(num)
			}
		}
	})script>

【学习进度一览】

weixin_39535557

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
div设置高度 vue_Vue系列：组件化开发

基础语法v-model修饰符lazy：失去焦点或者回车时，才会更新data。number：指定双向绑定的数据为number类型。trim：去除左右空格。示例：<input type="text" v-model.lazy="message"><input type="age" v-model.number="age"><input type="text" v...
复制链接

扫一扫