Vue入门笔记Day2

最新推荐文章于 2024-07-12 16:27:40 发布

阿浩！

最新推荐文章于 2024-07-12 16:27:40 发布

阅读量91

点赞数 1

分类专栏： Vue 文章标签： vue javascript html js

本文链接：https://blog.csdn.net/weixin_43273921/article/details/115354224

版权

这篇博客介绍了Vue.js的MVVM模式和组件系统。通过对比传统的MVP模式，阐述了MVVM的优势。文章重点探讨了Vue组件，包括全局和局部组件的创建及应用。举例说明了如何对TodoList组件进行全局和局部的改进，以展示组件的可复用性和灵活性。

摘要由CSDN通过智能技术生成

1.MVVM模式

传统设计模式MVP：Model层:数据层 Presenter层:呈现层控制器（控制层） View层：视图层（一般指dom展示）

2.组件

组件（Component）是 Vue.js 最强大的功能之一。
组件可以扩展 HTML 元素，封装可重用的代码。
组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：

（1）全局组件
语法格式如下：

Vue.component(组件名,{方法})

Vue.component("TodoItem",{       //TodoItem到标签里可以小写<todo-item>但是i前面要有横杠
				props:['content'],                         //props表示从父组件接受一些什么内容
				template:"<li>{
  {content}}</li>",
			})

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：<tagName></tagName>
全局组件：所有实例都能用全局组件。

（2）局部组件
局部组件只能在这个实例中使用：

var TodoItem = {
				props:['content'],
				template:"<li>{
  {content}}</li>",
			}

在跟实例里面注册：

conponents:{
	TodoItem:TodoItem   //将TodoItem注册到实例中，原来是TodoItem,在实例中依然是TodoItem。
},

实例1.TodoList全局组件改进

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue.js" type="text/javascript" charset="utf-8"></script

最低0.47元/天解锁文章

阿浩！

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue入门笔记Day2

1.MVVM模式传统设计模式MVP：Model层:数据层 Presenter层:呈现层控制器（控制层） View层：视图层（一般指dom展示）2.组件组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树：（1）全局组件语法格式如下：Vue.component(组件名,{方法})Vue.component("TodoItem"
复制链接

扫一扫