首页 > 其他分享 >vue编码一个简单的组件

vue编码一个简单的组件

时间:2023-05-06 17:35:52浏览次数:30  
标签:编码 vue app component Vue zujianmingcheng 组件

基于上一篇博客,现在我来学一下,如何根据vue编写一个简单的组件

第一步:导入vue.js模板

第二步:代码编写,定义一个Vue组件component

第三步:还是需要id填写app调用这个script

zujianmingcheng == 组件名称 (自定义的)

全部代码演示

<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

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

</div>

<script src="js/vue.js"></script>

<script>

    //定义一个组件
    Vue.component("zujianmingcheng",{
        template: '<font color="blue">定义蓝色组件</font>'

    });

    var vm = new Vue({
        el: "#app"
    });

</script>

</body>
</html>


标签:编码,vue,app,component,Vue,zujianmingcheng,组件
From: https://www.cnblogs.com/yzx-sir/p/17378037.html

相关文章

  • vite vue3 EsLint配置
    1、安装ESLintnpmi-Deslint2、初始化配置EsLintnpxeslint--init2-1、选择模式 2-2、选择语言模块 2-3、选择语言框架 2-4、是否使用ts 2-5、代码在哪里运行2-6、选择一个风格2-7、你想遵循哪一种风格指南2-8、希望配置文件是什么格式2-9、依赖......
  • vue笔记,七个属性以及代码演示
    v-bind:title="xxx"利用v-bind即可完成,鼠标悬停几秒查看此处动态绑定信息步骤一:官网下载vue.js文件导入到idea对应的文件中并且代码引用这个包步骤二:写一下代码eg.举个例子<divid="app"><spanv-bind:title="message">鼠标悬停几秒查看此处动态绑定信息......
  • ASN1编码
    ASN1编辑过程CN+学号+学号AttributeType编码 countryName为“CN”编码:1302434e 长度:02 标识符:13 organizationName为学号20201326编码:13083230323031333236 长度:08 标识符:13 commonName为姓名Jiangjin编码:13084a69616e676a696e ......
  • vue v-bind与v-model的区别
    1.v-bind是单向绑定,用来绑定数据和属性以及表达式,数据只能从data流向页面;v-model是双向绑定,数据能从data流向页面,也能从页面流向data。2.v-bind可以给任何属性赋值,v-model只能给表单类,也就是具有value属性的元素进行数据双向绑定,如input、text、radio、checkbox、selected。可以......
  • Mac M系列芯片 vue前端node-sass兼容问题解决
    0、由于M系列芯片是arm架构,在使用brew安装node时都是arm的node,但是[email protected]版本中不支持arm架构的出现如下报错:Error:NodeSassdoesnotyetsupportyourcurrentenvironment:OSXUnsupportedarchitecture(arm64)withUnsupportedruntime(88)Formoreinfor......
  • ajax请求与前后端交互的数据编码格式
    目录一、AjaxAJAX简介应用场景AJAX的优点语法实现二、数据编码格式(Content-Type)写在前面form表单几种数据编码格式介绍三、ajax携带文件数据四、ajax补充说明一、AjaxAJAX简介AJAX(AsynchronousJavascriptAndXML)翻译成中文就是“异步的Javascript和XML”。即使用Javascript......
  • vue思考与element-ui的代码基础
    说一下我对vue的理解在我看来vue就是对变量定义,之后把变量返回回去再由主题部分调用返回的函数,可以直接用调用的关键字而这个和CSS有一点相像与element-ui<divid="app"><!--在这放emement-ui官方给的代码--></div><scriptscr="vues.js"></script><scriptsrc="ele......
  • django内置序列化组件(drf前身)
    目录一、django内置序列化组件(drf前身)一、django内置序列化组件(drf前身)一、django内置序列化组件(drf前身)这里的内置序列化组件,其实就是实现将后端数据,存放到字典中或是存放到列表中有序输出。这里是我们用JsonResponse模块自己实现的代码'''前后端分离的项目视图函数......
  • Vue实现计算器
    <head><metacharset="UTF-8"><title>计算器</title><!--引入Vue--><scripttype="text/javascript"src="../jquery.js"></script><scripttype="text/jav......
  • 一统天下 flutter - widget 自定义: 通过 SingleChildRenderObjectWidget 实现自定义
    源码https://github.com/webabcd/flutter_demo作者webabcd一统天下flutter-widget自定义:通过SingleChildRenderObjectWidget实现自定义组件示例如下:lib\widget\custom\single_child_render_object_widget.dart/**通过SingleChildRenderObjectWidget实现自......