Vue之组件使用(一)

最新推荐文章于 2024-09-17 13:42:29 发布

dengjingzhi3900

最新推荐文章于 2024-09-17 13:42:29 发布

阅读量70

点赞数

文章标签： javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/yinxuejunfeng/p/9221019.html

版权

这仅仅是个人为了防止忘记做的笔记而已，仅供参考，有不对的地方请纠正

组件这种东西用来封装多次使用的控件还是很有用处的，我还是挺喜欢这种模式，优化了前端的工作，写个组件也比较简单。下次有时间记录一下样式的复用

首先呢，使用webstorm创建一个新的Vue项目

创建完毕项目后，我们在component目录下创建一个index页面，然后在这里做测试，因为我所有的选择都是默认的，自己在做的时候可以根据实际需求来写，都无所谓，这不是重点。

那么重点来了，组件，我首先，引入Vue.js，引入完毕后来写组件

引入之后，使用component属性自定义所需的控件

vue.component('Hello',{
      template:'<h1>Hello World</h1>'
    });

我这里定义了一个Hello，我在页面上可以这么引用自定义组件

<div id="app">
    <Hello></Hello>
</div>

那么我运行之后在页面上显示的结果就是这样的，这就是一个最简单的组件使用方式。

至于Vue，可以自己去官网找下载链接，我这里就不放Vue的下载链接了，下面我附上整个页面的源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test</title>
  <script src="vue.min.js"></script>
  <script>
    vue.component('Hello',{
      template:'<h1>Hello World</h1>'
    });
    new vue({
      el:"#app"

    });

  </script>
</head>
<body>
<div id="app">
    <Hello></Hello>
</div>
</body>
</html>