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>
  • 相关阅读:
    1 TKinter小窗口及标题
    css之padding,marging
    css之opacity
    css之position
    Leetcode 1368 使网格图至少有一条有效路径的最小代价
    Leetcode 137 只出现一次的数字II
    Leetcode 135分发糖果
    Leetcode 134加油站
    Leetcode 124 二叉树的最大路径和
    Leetcode 5346 二叉树中的列表
  • 原文地址:https://www.cnblogs.com/yinxuejunfeng/p/9221019.html
Copyright © 2011-2022 走看看