分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

Vue.js——component(组件)

发布时间:2023-09-06 01:28责任编辑:林大明关键词:js组件

概念:

  组件(Component)是自定义元素。

作用:

  可以扩展HTML元素,封装可重用的代码。

<div id="myView"> ???<!-- 把学生的数据循环输出,用 v-bind动态绑定 props的值到父组件的数据中--> ???<student ???????v-for="student in studentList" ???????v-bind:data="student" ???????v-bind:key="student.id"> ???</student></div>
<!-- 定义模型层,存放学生的数据-->
var myModel = {studentList:[{id:1,name:‘张三‘,height:178},{id:2,name:‘李四‘,height:178},{id:3,name:‘王平‘,height:178},{id:4,name:‘老张‘,height:173}]};
<!-- 创建视图层,接收存放学生数据的界面、数据-->
var myViewModel = new Vue({ el:‘#myView‘, data:myModel });
//导入自己写的js,主要目的是:组件可复用//<script src="js/student.js"></script>//注册Vue.component(‘student‘, { ???//声明props ???props:[‘data‘], ???template: ‘<div><span style="color:red">{{data.id}}</span><span style="color:green">{{data.name}}</span><span style="color:blue">{{data.height}}</span></div>‘});//目的:组件可复用

Vue.js——component(组件)

原文地址:http://www.cnblogs.com/laizhouzhou/p/7966945.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved