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>
  • 相关阅读:
    创建自定义图标和图像
    使用_CRTDBG_LEAK_CHECK_DF检查VC程序的内存泄漏(转)
    Hadoop Netflix数据统计分析2(转)
    系统提供的按钮和图标
    STATIC变量问题
    表格视图,文本视图和Web视图
    Hadoop Netflix数据统计分析1(转)
    获取程序数据路径(转)
    C++中STRING转为INT (转)
    netflix 推荐算法学习1(转)
  • 原文地址:https://www.cnblogs.com/yinxuejunfeng/p/9221019.html
Copyright © 2011-2022 走看看