vue组件定义,全局、局部组件,配合模板及动态组件功能示例
(编辑:jimmy 日期: 2024/11/29 浏览:3 次 )
本文实例讲述了vue组件定义,全局、局部组件,配合模板及动态组件功能。分享给大家供大家参考,具体如下:
一、定义一个组件
定义一个组件:
1. 全局组件
var Aaa=Vue.extend({ template:'<h3>我是标题3</h3>' }); Vue.component('aaa',Aaa);
*组件里面放数据:
data必须是函数的形式,函数必须返回一个对象(json)
2. 局部组件
放到某个组件内部
var vm=new Vue({ el:'#box', data:{ bSign:true }, components:{ //局部组件 aaa:Aaa } });
1. 全局组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="/UploadFiles/2021-04-02/vue.min.js"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="/UploadFiles/2021-04-02/vue.min.js">组件里面放数据:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="/UploadFiles/2021-04-02/vue.min.js">2. 局部组件
放到某个组件内部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="/UploadFiles/2021-04-02/vue.min.js">另外一种写法,局部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="/UploadFiles/2021-04-02/vue.min.js">二、配合模板
配合模板:
1. template:'<h2 @click="change">标题2->{{msg}}</h2>'
2. 单独放到某个地方
a).
<script type="x-template" id="aaa"> <h2 @click="change">标题2->{{msg}}</h2> </script>b).
<template id="aaa"> <h1>标题1</h1> <ul> <li v-for="val in arr"> {{val}} </li> </ul> </template>方法一:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="/UploadFiles/2021-04-02/vue.min.js">方法二:
上一篇:详解使用React.memo()来优化函数组件的性能<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="/UploadFiles/2021-04-02/vue.min.js">三、动态组件
动态组件:
<component :is="组件名称"></component>
下一篇:express.js中间件说明详解