이 글에서는 주로 Vue.js 컴포넌트에 대한 자세한 설명을 소개합니다. 컴포넌트는 Vue.js의 가장 강력한 기능 중 하나이므로 관심 있는 분들은 참고하시기 바랍니다
컴포넌트란 무엇입니까? 컴포넌트는 Vue.js의 가장 강력한 기능 중 하나입니다. 구성 요소는 HTML 요소를 확장하여 재사용 가능한 코드를 캡슐화할 수 있습니다. 높은 수준에서 구성 요소는 Vue.js의 컴파일러가 특수 기능을 추가하는 자체 정의 요소입니다. 어떤 경우에는 구성 요소가 is 속성으로 확장된 기본 HTML 요소의 형태일 수도 있습니다.
컴포넌트 등록은 어떻게 하나요?
end 메소드를 사용하여 컴포넌트를 생성한 후 Vue.comComponent 메소드를 사용하여 컴포넌트를 등록해야 합니다. Vue.extend 메소드의 형식은 다음과 같습니다:
var MyComponent = Vue.extend({
// 选项...后面再介绍
})HTML 태그에서 이 구성 요소 이름을 사용할 수 있습니다. 전체 구성 요소 등록 및 사용 예를 살펴보겠습니다.
<p id="example"> <my-component></my-component> </p>
// 定义
var MyComponent = Vue.extend({
template: '<p>A custom component!</p>'
})
// 注册
Vue.component('my-component', MyComponent)
// 创建根实例
new Vue({
el: '#example'
})<p id="example"> <p>A custom component!</p> </p
중첩된 구성 요소
구성 요소 자체에도 구성 요소가 포함될 수 있습니다. 아래 상위 구성 요소에는 하위 구성 요소라는 구성 요소가 포함되어 있지만 이 구성 요소는 상위 구성 요소에서만 사용할 수 있습니다.
var child = Vue.extend({
template: '<p>A custom component!</p>'
});
var parent = Vue.extend({
template: '<p>Parent Component: <child-component></child-component></p>',
components: {
'child-component': child
}
});
Vue.component("parent-component", parent);// 在一个步骤中扩展与注册
Vue.component('my-component', {
template: '<p>A custom component!</p>'
})
// 局部注册也可以这么做
var Parent = Vue.extend({
components: {
'my-component': {
template: '<p>A custom component!</p>'
}
}
})동적 구성 요소
<p id="dynamic"> <button id="home">Home</button> <button id="posts">Posts</button> <button id="archive">Archive</button> <br> <component :is="currentView"></component> </p>
var vue = new Vue({
el:"#dynamic",
data: {
currentView: "home"
},
components: {
home:{
template: "Home"
},
posts: {
template: "Posts"
},
archive: {
template: "Archive"
}
}
});
document.getElementById("home").onclick = function(){
vue.currentView = "home";
};
document.getElementById("posts").onclick = function(){
vue.currentView = "posts";
};
document.getElementById("archive").onclick = function(){
vue.currentView = "archive";
};심층 대응 원칙
객체 를 vue 인스턴스에 데이터 옵션으로 전달하면 vue.js는 Object를 사용하여 해당 속성을 탐색합니다. DefineProperty는 이를 getter/setter로 변환합니다. 이는 ES5 기능이며 모든 vue.js는 IE8 이하를 지원하지 않습니다. 템플릿의
객체 속성 삭제를 감지할 수 없습니다. 데이터에 있어야 합니다. 이렇게 해야 vue.js가 응답하기 위해 getter/setter모드로 변환할 수 있습니다. 예:
var data = { a: 1 };
var vm = new Vue({
data: data
});
// `vm.a` 和 `data.a` 现在是响应的
vm.b = 2
// `vm.b` 不是响应的
data.b = 2
// `data.b` 不是响应的key,value) 인스턴스 메소드를 사용할 수 있습니다:
// `vm.b` 및 ` data.b`가 이제 반응합니다
对于普通对象可以使用全局方法：Vue.set(object, key, value)：
Vue.set(data, 'c', 3)
// `vm.c` 和 `data.c` 现在是响应的
初始化数据：尽管Vue.js提供动态的添加相应属性，还是推荐在data对象上声明所有的相应属性。
不这么做：
var vm = new Vue({
template: '<p>{{msg}}</p>'
})
// 然后添加 `msg`
vm.$set('msg', 'Hello!')应该这么做：
var vm = new Vue({
data: {
// 以一个空值声明 `msg`
msg: ''
},
template: '<p>{{msg}}</p>'
})
// 然后设置 `msg`
vm.msg = 'Hello!'组件完整案例
下面介绍的例子实现了模态窗口功能，代码也比较简单。
html代码：
<!-- 实现script定义一个模板 --> <script type="x/template" id="modal-template"> <!--模板是否显示通过v-show="show"来设置， transition设置动画效果--> <p class="modal-mask" v-show="show" transition="modal"> <p class="modal-wrapper"> <p class="modal-container"> <p class="modal-header"> <!--slot 相当于header占位符--> <slot name="header"> default header </slot> </p> <p class="modal-body"> <!--slot 相当于body占位符--> <slot name="body"> default body </slot> </p> <p class="modal-footer"> <!--slot 相当于footer占位符--> <slot name="footer"> default footer </slot> <button class="modal-default-button" @click="show = false">OK</button> </p> </p> </p> </p> </script> <p id="app"> <!--点击按钮时设置vue实例特性showModal的值为true--> <button id="show-modal" @click="showModal = true">show modal</button> <!--modal是自定义的一个插件，插件的特性show绑定vue实例的showModal特性--> <modal :show.sync="showModal"> <!--替换modal插件中slot那么为header的内容--> <h3 slot="header">Custom Header</h3> </modal> </p>
js代码：
//定义一个插件，名称为modal
Vue.component("modal", {
//插件的模板绑定id为modal-template的DOM元素内容
template: "#modal-template",
props: {
//特性，类型为布尔
show:{
type: Boolean,
required: true,
twoWay: true
}
}
});
//实例化vue，作用域在id为app元素下，
new Vue({
el: "#app",
data: {
//特性，默认值为false
showModal: false
}
});css代码：
.modal-mask {
position: fixed;
z-index: 9998;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
display: table;
transition: opacity .3s ease;
}
.modal-wrapper {
display: table-cell;
vertical-align: middle;
}
.modal-container {
width: 300px;
margin: 0px auto;
padding: 20px 30px;
background-color: #fff;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .33);
transition: all .3s ease;
font-family: Helvetica, Arial, sans-serif;
}
.modal-header h3 {
margin-top: 0;
color: #42b983;
}
.modal-body {
margin: 20px 0;
}
.modal-default-button {
float: right;
}
/*
* the following styles are auto-applied to elements with
* v-transition="modal" when their visiblity is toggled
* by Vue.js.
*
* You can easily play with the modal transition by editing
* these styles.
*/
.modal-enter, .modal-leave {
opacity: 0;
}
.modal-enter .modal-container,
.modal-leave .modal-container {
-webkit-transform: scale(1.1);
transform: scale(1.1);
}相关文章：
위 내용은 강력한 Vue.js 구성 요소에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
