zoukankan      html  css  js  c++  java
  • Vue之组件使用(一)

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

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

    首先呢,使用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>
  • 相关阅读:
    stl测试
    noip2017逛公园
    比赛
    莫队算法
    noi.ac 第五场第六场
    重排DL
    bzoj2870
    异象石(就是sdio宝藏那题)
    Genius ACM
    模板复习
  • 原文地址:https://www.cnblogs.com/yinxuejunfeng/p/9221019.html
Copyright © 2011-2022 走看看