程序员经验分享-hwhale

Vue新手入门-3

2023-05-16

基于vue2.5.9版本

定义全局组件（3种写法）

首先声明一个new Vue（{}）；然后在js里面编写；最后把注册的组件放入进去即可；

  1. 写法-1
 /*1.0 定义一个组件写法*/
    //定义组件
    var login12 = Vue.extend({
        template: "    <h1>登录12</h1>",
    })
    //注册组件
    Vue.component("login1", login12)
    //在html中
    <div id="app">
        <login1></login1>
    </div>
  1. 写法-2
/*2.0 定义一个组件写法*/
    Vue.component("login", {
        template: "<h1>登录</h1>",
    })
//在html中
<div id="app">
    <login></login>
</div>
  1. 写法-3
/*3.0 定义一个组件写法*/这里有两种写法一种是放入`template` ；另一种是放入`script`
    Vue.component("ac1", {
        template: "#acc1",
    })

    Vue.component("ac", {
        template: "#acc",
    })
    //在html中
    <div id="app">
        <ac></ac>
        <ac1></ac1>
    </div>
    //----
    <template id="acc">
        <a href="#">登录</a>
    </template>
    <script id="acc1" type="text/x-handlebars-template">
        <a href="#">登录script</a>
    </script>

最后-附上代码

<body>
<div id="app">
    <login></login>
    <ac></ac>
    <ac1></ac1>
    <login1></login1>
</div>
<template id="acc">
    <a href="#">登录</a>
</template>
<script id="acc1" type="text/x-handlebars-template">
    <a href="#">登录script</a>
</script>
<script>
    /*1.0 定义一个组件写法*/
    //定义组件
    var login12 = Vue.extend({
        template: "    <h1>登录12</h1>",
    })
    //注册组件
    Vue.component("login1", login12)
    /*2.0 定义一个组件写法*/
    Vue.component("login", {
        template: "<h1>登录</h1>",
    })
    /*3.0 定义一个组件写法*/
    Vue.component("ac1", {
        template: "#acc1",
    })

    Vue.component("ac", {
        template: "#acc",
    })

    new Vue({
        el: "#app",
    })
</script>
</body>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

vue

新手入门

Vue新手入门-3 的相关文章

  • 微信小程序从入门到放弃（四）

    swiper组件的使用 官方链接 swiper官方链接 可以设置上下滚动 vertical 为true xff0c 可以设置为上下滚动 xff1b false左右滚动 xff1b 无缝滚动 circular 为true xff0c 可以设置

  • 微信小程序从入门到放弃（五）

    一 字体的大小 font size 像素单位rpx与px的差别 lt view style 61 34 font size 30px 34 gt 我是汉字font size 30px lt view gt br lt view style

随机推荐

  • 微信小程序从入门到放弃（六）

    微信小程序wx hideLoad 安卓不兼容问题 当频繁进行数据交互的时候 xff0c 加载动画 xff0c 在安卓上的时候 xff0c hideLoad xff0c 不能执行 xff0c 使showLoad xff08 xff0c 一直在

  • WIN10的MD5命令

    windows方法 xff1a win键 43 r键输入cmd调出命令行 输入 xff1a 查看MD5值 xff1a certutil hashfile 文件名 MD5 查看 SHA1 certutil hashfile 文件名 SHA1

  • css3样式效果

    一 盒子内圆角 效果图 css样式代码 xff1a width 300px br height 200px br background radial gradient circle at top left transparent 28px

  • 3D背景图动画阴影效果

    先看效果图 原理rotate的使用 当鼠标放到图片的一角处的时候 xff0c 实现该处向下坍缩的效果 xff0c 即用的是rotate的3D属性 xff0c 此时的图片向相应的方向的进行偏转 xff0c 偏转的角度x xff0c y如下图所

  • Vue遇到的bug-01（vue引擎模板报错）

    vue结合webpack的使用 01 报错信息 xff1a 如下图 xff08 配置文件格式错误 xff09 错误的代码 xff1a 如下图 报错信息显示的是配置文件错误 xff08 报错信息的最后一句话是 loaders should b

  • 百度地图API支持HTTPS

    百度地图怎么样才能支持API支持HTTPS 报错信息如下 xff1a Mixed Content The page at https www c 8 com public admin index index html was loaded

  • 数组Array、对象Object、json格式常用的方法小结。

    一 对象Object常用方法 1 初始化方法 var obj 61 var obj 61 new obj var obj 61 Object create null 2 添加元素的方法 dic key 61 value 3 删除key的方法

  • 微信小程序动画特效

    效果 代码见下 xff1a 启动的一瞬间字体在跳动 xff0c 星空在不停的旋转 wxml代码 lt pages welcome welcome wxml gt br lt view class 61 34 stars 34 gt br l

  • 放大镜插件etalage的使用方法

    效果图 如果有人需要etalage的话 xff0c 可以给我留言 xff1b 官方链接Etalage 下载位置 xff1a github 1 使用方法 安装js xff0c css xff0c 文件 xff0c 分别是 xff1a 1 xf

  • 日期插件layDate的使用

    效果图 官方链接 1 layui中的laydate 官方链接 2 贤心的layui 使用说明 只需引入 laydate js 即可HTML结构 lt input span class hljs keyword type span 61 sp

  • jQuery实现可以编辑的表格实例详解

    效果图 点击单个可以进行修改 点击修改所有的表格都可以进行修改 点击保存所有的数据可以获取并打印出来 本人demo需要引入jq文件 代码见如下 xff08 有详细的注解 xff09 span class hljs doctype lt DO

  • input上传图片并预览

    首先说一下input 大家都知道上传文件 xff0c 图片是通过input 的file进行上传的 1 首先是样式 大家都知道input在HTML的代码为 lt input type 61 34 file 34 gt xff1b 在页面的样式

  • PyQt5 使用QT Desinger 布置QChartViewer

    QChartView原来是QT公司的商用包 xff0c 后来开源了 但是相对来说文档说明少 最近想利用QT DESINGER直接拖拉拽在GUI窗体里放QChartViewer xff0c 网上参考部分资料后顺利实现 xff0c 现留作备忘

  • js拳皇特效

    js拳皇特效 效果图 很简单的特效 xff0c 运用了面向对象 xff0c 原型等简单的方法 废话不多说 xff0c 上代码 xff1a span class hljs tag lt span class hljs title script

  • 微信小程序从入门到放弃（七）

    scroll view不显示滚动条 新版本的微信小程序已经把scroll view的滚动条默认为隐藏了 xff0c 而有的业务逻辑需要把滚动条显示出来 xff1b 所以 xff1a 本人查了好久终于找到了解决的方案 xff0c 就是找到滚动

  • cookie+bootstrap-table+抽奖概率算法

    span class hljs comment 获得cookie span span class hljs function span class hljs keyword function span span class hljs tit

  • Vue新手入门-1

    基于vue2 5 9版本 数据绑定v bind 像img这样的标签 xff0c 直接在src里面写 lt img src 61 34 picimg 34 alt 61 34 34 gt xff1b 是不正确的 xff0c 这里需要用v bi

  • Vue新手入门-2

    基于vue2 5 9版本 生命周期vue1 0 created gt beforeCompile gt compiled gt ready gt attached gt detached gt beforeDestroy gt destro

  • cropper.js 裁剪图片并上传（文档翻译+demo）

    官网http fengyuanchen github io cropper 文档https github com fengyuanchen cropper blob master README md v3 x版本 引入 43 使用 span

  • Vue新手入门-3

    基于vue2 5 9版本 定义全局组件 xff08 3种写法 xff09 首先声明一个new Vue xff08 xff09 xff1b 然后在js里面编写 xff1b 最后把注册的组件放入进去即可 xff1b 写法 1 span clas

热门标签