vue.js学习之UI组件开发教程

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了vue.js学习之UI组件开发教程，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8885字，纯文字阅读大概需要13分钟。

内容图文

本文主要给大家介绍了关于vue.js之UI组件开发的相关内容，分享出来供大家参考学习，下面来一起看看详细的介绍：

1. 新建组件：

<script src="/public/javascripts/vue.js"></script>
<style>
 #app1{background-color: red}
 #app2{background-color: blue}
</style>
<body>
<div id="app1">
 <box-one></box-one>
 <box-two></box-two>
 <boxThree></boxThree>
</div>
<div id="app2">
 <box-one></box-one>
 <box-two></box-two>
</div>
<box-one></box-one>
<box-two></box-two>
<script>
Vue.component('box-one', {
 template: '<div class="box-one">box-one</div>'
});
var app1 = new Vue({
 el: '#app1',
 components: {
 'box-two': {
  template: '<div class="box-two">box-two</div>'
 },
 'boxThree': {
  template: '<div class="boxThree">boxThree</div>'
 }
 }
});
var app2 = new Vue({
 el: '#app2'
});
</script>

vue.js学习之UI组件开发教程 - 文章图片

Vue.component 方法用于注册全局组件， new Vue({ components: {}}) 用于注册某个实例内使用的组件，所以 <box-two></box-two> 在 #app2 中失效；
由于浏览器渲染标签时会把标签全部转成小写，驼峰式组件名称会失效，如事例中的 <boxThree></boxThree> ；
在实例以外无法使用任何组件；

2. 浏览器渲染网页标签的限制：

<script src="/public/javascripts/vue.js"></script>
<style>
 .red{background-color: red}
 .blue{background-color: blue}
</style>
<body>
<div id="app1">
 <table class="red">
 <box-one></box-one>
 </table>
 <select class="red">
 <box-two></box-two>
 </select>

 <table class="blue">
 <tr is="box-one"></tr>
 </table>
 <select class="blue">
 <option is="box-two"></option>
 </select>
</div>
<script>
Vue.component('box-one', {
 template: '<tr><td>box-one</td></tr>'
});
Vue.component('box-two', {
 template: '<option>option</option>'
});
var app1 = new Vue({
 el: '#app1'
});
</script>

vue.js学习之UI组件开发教程 - 文章图片

由于受到浏览器渲染标签的限制，例如 table 标签子元素只能是 tbody 或 tr 、select 标签子元素只能是 option ，类似的其他更多的标签，所以 vue 引入了 is 属性；
如果使用的是组件文件 .vue 后缀的文件开发，则因为是字符串方式渲染的，所以不受限制；

3. 组件中的 data 数据集：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <done-button></done-button>
</div>
<script>
Vue.component('done-button', {
 template: '<button>{{text}}</button>',
 data: function (){
 return {
  text: 'ok'
 }
 }
});
var app1 = new Vue({
 el: '#app1'
});
</script>

vue.js学习之UI组件开发教程 - 文章图片

不同于 new Vue({}) 中的实例数据集，组件中的 data 数据集必须是一个函数，再使用函数返回一个对象集，否则会报错；

4. 实例给组件传值：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <done-button text="submit" textOne="submit1" text-two="submit2"></done-button>
</div>
<script>
Vue.component('done-button', {
 template: '<button :data-text="text" :data-text-one="textOne" :data-text-two="textTwo">{{text}}</button>',
 props: ['text', 'textOne', 'textTwo']
});
var app1 = new Vue({
 el: '#app1'
});
</script>

vue.js学习之UI组件开发教程 - 文章图片

props 定义的字符串数组中的值，可以像 data 数据集一样在组件内自由调用；
props 定义的字符串数组中的值，会作为组件标签中的标签属性名，给实例赋值；
受浏览器渲染标签属性的影响，标签属性的命名如果使用驼峰式，则使用时 vue 会自动生成对应的短横线隔开式属性名，如事例中的 text-two；

5. 组件标签属性使用动态数据：

<script src="/public/javascripts/vue.js"></script>
<style>
 .appNumber{background-color: red}
</style>
<body>
<div id="app1">
 <done-button :number="appNumber"></done-button>
 <button class="appNumber" @click="appNumber++">{{appNumber}}</button>
</div>
<script>
Vue.component('done-button', {
 template: '<button @click="number++">{{number}}</button>',
 props: ['number']
});
new Vue({
 el: '#app1',
 data: {
 appNumber: 0
 }
});
</script>

vue.js学习之UI组件开发教程 - 文章图片

实例中的 appNumber 变化时，组件中的 number 会跟着变化；
组件中的 number 变化时，实例中的 appNumber 并不会变化；
实例中的 appNumber 的值，会覆盖组件内 number 的值；
但如果 appNumber 的值是数组或对象，由于是引用类型，则双方都会互相影响；

6. 自定义组件属性的值的规则：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <done-button number1="a" number2="1" :number3="1" ></done-button>
</div>
<script>
Vue.component('done-button', {
 template: '<button :num1="number1" :num2="number2" :num3="number3">{{number1}}</button>',
 props: {
 number1: {
  type: Number
 },
 number2: {
  type: Number
 },
 number3: {
  type: Number
 }
 }
});
new Vue({
 el: '#app1'
});
</script>

vue.js学习之UI组件开发教程 - 文章图片

props 允许接受一个对象作为参数，每个参数作为一个元素属性，type 为属性的值期待的类型；
如果条件不符合，vue 的开发版下会在 console 打印出错误信息，但功能还是能正常传值的；
事例中 number2 传递的其实是 String 类型的 '1'，而只有 :number3 这种赋值才能传递数值类型的 1；
可选项：

{
 // 属性类型： String、Number、Boolean、Function、Object、Array，null-任意类型，
 // 可以使用数组多选
 type: null,

 // 是否必须被赋值：true、false
 required: false,

 // 默认值：可以是一般任意值或有返回值的函数
 default: '',

 // 自定义判断函数：参数 value 为调用时传入的值，
 // 返回 true、false 来通知 vue 机制是否报错
 validator: function(value){ return true } 
}

7. 组件内给实例发送通知：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <done-button v-on:child="father" ></done-button>
</div>
<script>
Vue.component('done-button', {
 template: '<button v-on:click="add()">增加</button>',
 methods: {
  add: function () {
   this.$emit('child', 11);
  }
 }
});
new Vue({
 el: '#app1',
 methods: {
  father: function(number) {
   console.log('father' + number);
  }
 }
});
</script>

vue.js学习之UI组件开发教程 - 文章图片

组件内无法直接与组件外数据集绑定，只能发送事件通知，组件内使用 this.$emit('child', 11) 告诉实例，该调用 child 事件了，后面的参数会变成 child 的调用参数传递；
实例在初始化组件时，定义 v-on:child="father" 元素属性，来监听 child 事件收到通知时应该执行什么处理，通过 father 的形参，可以直接访问 child 的调用参数；

8. 组件之间通信：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <done-button ></done-button>
 <cancel-button></cancel-button>
</div>
<script>
var bus = new Vue();
Vue.component('done-button', {
 template: '<button v-on:click="send()">发送</button>',
 methods: {
  send: function () {
   bus.$emit('done-emit', 11);
  }
 }
});
Vue.component('cancel-button', {
 template: '<p>{{text}}</p>',
 data: function (){
  return {
   text: '00'
  }
 },
 mounted: function() {
  var _this = this;
  bus.$on('done-emit', function(number) {
   _this.text = number;
  });
 }
});
new Vue({
 el: '#app1',
 methods: {
  call: function(value) {
   console.log('father:' + value);
  }
 }
});
</script>

vue.js学习之UI组件开发教程 - 文章图片

可以定义一个全局实例 bus ，在不同组件内使用 bus.$emit 发送通知，使用 bus.$on 监听通知；

9. 组件内容节点的分发：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <box></box>
 <box>
  <h4>box1</h4>
 </box>
 <box>{{box2Text}}</box>
</div>
<script>
Vue.component('box', {
 template: '<p><slot>默认</slot></p>'
});
new Vue({
 el: '#app1',
 data: {
  box2Text: 'box2'
 }
});
</script>

vue.js学习之UI组件开发教程 - 文章图片

vue 默认在组件内定义了 <slot> 标签，用于获取组件被使用时的内容节点；
<slot> 标签的内容为组件的默认内容节点；
内容节点也可使用动态数据；

10. 多个 <slot> 标签之间的使用：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <box>
  <p>ppppp</p>

  <p slot="h4">h4</p>
  <h4 slot="h4">h4</h4>

  <p slot="h5">h5</p>
  <h5 slot="h5">h5</h5>
 </box>
</div>
</div>
<script>
Vue.component('box', {
 template: [
  '<div id="box">',
   '<div class="default">',
    '<slot></slot>',
   '</div>',
   '<div class="h4">',
    '<slot name="h4"></slot>',
   '</div>',
   '<div class="h5">',
    '<slot name="h5"></slot>',,
   '</div>',
  '</div>',
 ].join('')
});
new Vue({
 el: '#app1'
});
</script>

vue.js学习之UI组件开发教程 - 文章图片

没有声明 name 属性的 <slot> 标签，是为组件的内容节点中没有声明 slot 属性的标签而占位；
声明了 name 属性的 <slot> 标签，是为组件的内容节点中与之相等 slot 属性的标签而占位；
多个标签应用了相同的 slot 属性也会有效；

11. <slot> 标签回传数据给内容节点：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <box >
  <template scope="props">
   <span>{{props.text}}</span>
  </template>
 </box>
</div>
</div>
<script>
Vue.component('box', {
 template: '<div id="box"><slot v-for="i in items" :text="i"></slot></div>',
 data: function (){
  return {
   items: [0,1,2,3,4]
  }
 }
});
new Vue({
 el: '#app1'
});
</script>

vue.js学习之UI组件开发教程 - 文章图片

首先，数据是组件内提供的，但数据的布局方式由实例调用组件时决定；
在组件的内容节点内，必须使用 <template> 标签包含着要渲染的子元素，并且定义 scope="props" 属性，而 <template> 标签内则是 props 对象的作用域上下文；
props 内自动含有 <slot> 标签中的属性，例如事例中的 text 属性，则可直接使用 props.text 访问到 text 属性的值；
当然，也可以结合 <slot name="header"> 使用，而 <template slot="header"> 即可；
<template> 标签为 vue 保留的标签，实际只是个占位符；

12. 动态切换组件：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <component :is="view"></component>
 <button @click="view = 'inlinebox'">change</button>
</div>
</div>
<script>
Vue.component('box', {
 template: '<div id="box">box</div>',
});
Vue.component('inlinebox', {
 template: '<div id="inlinebox">inlinebox</div>'
});
new Vue({
 el: '#app1',
 data: {
  view: 'box'
 }
});
</script>

vue.js学习之UI组件开发教程 - 文章图片

<component> 标签为 vue 保留的标签，实际只是个占位符；
is 属性可指定组件标签名，也可绑定动态变量；

13. 在实例中访问子元素对象：

<script src="/public/javascripts/vue.js"></script>
<body>
<div id="app1">
 <box ref="box1"></box>
</div>
</div>
<script>
Vue.component('box', {
 template: '<div id="box">box</div>',
});
new Vue({
 el: '#app1',
 mounted: function() {
  console.log(this.$refs);
 }
});
</script>

vue.js学习之UI组件开发教程 - 文章图片

只要为组件指定 ref 属性，实例中则会在 $refs 中访问到组件的对象；

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如有疑问大家可以留言交流，谢谢大家对脚本之家的支持。

内容总结

以上是互联网集市为您收集整理的vue.js学习之UI组件开发教程全部内容，希望文章能够帮你解决vue.js学习之UI组件开发教程所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/342630.html

来源：【匿名】

【上一篇】nodeJS（express4.x）+vue（vue-cli）构建前后端分离实例(带跨域)【下一篇】php怎么返回数据给vue

更多 ►

【vue.js学习之UI组件开发教程】教程文章相关的互联网学习教程文章

一、文件目录说明main.js：应用的入口文件App.vue：根组件，整个组件的入口加载文件不要后缀名： resolve:{extensions:[‘.js‘,‘.vue‘,‘.json‘],alias:{‘vue$‘:‘vue/dist/vue.esm.js‘,‘@‘:resolve(‘src‘) //@就代表了"src"这个目录} } import App from ‘./App‘; 就相当于 ‘./App.vue‘; import router from ‘./router‘ //加载某个目录下的index.js文件，可以简写，就相当于 ‘./router/index.js‘.gitignore...

npm——安装教程、安装vue脚手架【图】

npm：是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题。比如常用的有：　　1）允许用户从NPM服务器下载别人编写的第三方包到本地使用。　　2）允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。　　3）允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。首先：先从nodejs.org中下载nodejs 如图，下载8.9.3LTS（推荐给绝大部分用户使用的）双击安装一直Next 可以使用默认路径，本...

vue教程1-05 事件简写、事件对象、冒泡、默认行为、键盘事件【代码】

vue教程1-05 事件简写、事件对象、冒泡、默认行为、键盘事件v-on:click/mouseover......简写的:@click="" 推荐事件对象:@click="show($event)"事件冒泡:阻止冒泡: a). ev.cancelBubble=true;b). @click.stop 推荐默认行为(默认事件):阻止默认行为:a). ev.preventDefault();b). @contextmenu.prevent 推荐键盘:@keydown $event ev.keyCode@keyup常用键:回车a). @keyup.13b). @keyup.enter上、下、左、右@keyup...

vue-cli 安装教程（转）

vue-cli这个构建工具大大降低了webpack的使用难度，支持热更新，有webpack-dev-server的支持，相当于启动了一个请求服务器，给你搭建了一个测试环境，只关注开发就OK。1.安装vue-cli①使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -g或者（npm install -g webpack），安装完成之后输入webpack -v，如下图，如果出现相应的版本号，则说明安装成功。 ②全局安装vue-cli，在cmd中输入命令:...

向军2017年最新laravel开发宝典 laravel结合vue与接口开发webapp实战视频教程

课程介绍：Laravel是一套简洁、优雅的PHP Web开发框架(PHP Web Framework)。它不仅可以让我们从面条一样杂乱的代码中解脱出来，还可以帮我们构建一个完美的网络APP，而且每行代码都可以简洁、富于表达力。在Laravel中已经具有了一套高级的PHP ActiveRecord实现 -- Eloquent ORM。它能方便的将“约束（constraints）”应用到关系的双方，这样你就具有了对数据的完全控制，而且享受到ActiveRecord的所有便利。Eloquent原生支持Fluent...

Vue拼图验证组件使用教程【代码】【图】

找一个你需要的我这里选择的是控制误差的demo用。使用方法：npm i vue-puzzle-verification 在mian.js中引入import PuzzleVerification from ‘vue-puzzle-verification‘ Vue.use(PuzzleVerification )<div class="login-box"><div class="puzzle-box"><PuzzleVerificationv-model="isVerificationShow4":puzzleImgList="puzzleImgList"deviation="20"blockType="puzzle":onSuccess="handleSuccess"/></div></div> 登录页面使用后...

页面Vue简单的Sample 入门教程1【代码】【图】

我用的开发工具是Sublime Text3官网下载地址：http://www.sublimetext.com/3，我下载了Windows64位的版本学了一点皮毛：el：element 需要获取的元素，一定是html中的根容器元素data: 用于数据的存储methods : 用于存储各种方法data-binding：给属性绑定对应的值事件处理Eventbutton下用v-on：click表示单击button下用v-on：dblclick表示双击其中v-on也可以用@ html文件中的接收一定要在html中导入 <script src="https://unpkg.co...

基于VuePress构建高基于markdown语法的网站全教程【代码】【图】

介绍特性环境搭建全局安装创建项目目录始化项目，建立并编辑 package.json建立基本目录修改配置文件 - config.js修改README.md运行项目深度开发配置导航配置侧边栏总结模板主题设置其它插件一份完整的源码介绍VuePress是一个用来构建博客以及简易网站的项目，基于vuejs，由尤雨溪亲自主持的一个静态项目，静态打包。基于这样的系统，可以方便用于小型文章发布，如帮助中心、官方博客，支持解析md文件。VuePress由两部分组成：一部分...

后端.net core 3.1 前端vue-element-admin IIS部署教程【图】

系统环境：Windows service 2012 x64 Web服务器IIS 8.5软件环境：.net core 3.1，nodejs version 12.16.3，vue version 2.9.6说明：所有下载地址适用于windows service 2012 x64系统，在下载安装之前请确认你操作系统版本。1、首先你需要安装.net core 3.1 SDK。下载地址2、安装ISS的AspNetCoreHosting模块。下载地址3、安装nodejs并配置nodejs环境a) 安装nodejs。下载地址b) 配置nodejs环境，安装完成后将nodejs安装位置添加PATH系...

Vue学习第2天又看了个教程，加深理解【代码】

http://study.163.com/course/courseMain.htm?courseId=1003606075五点多就醒了，睡不着，干脆再看篇教程慕课网的有个好处，Html5播放可设置1.75甚至2倍速度，精力集中些，虽然加速了，但能听懂，省不少时间网易云课堂的只能按 -> 去快进，有时漏了关键点又得倒回来看，不方便Vue确实是个好框架，比想像中容易上手多了，看了3个教程后，再翻翻官网的文档，已经算入门了。虽然从新项目中完整弄一套出来还心里没底，但看别人项目的代...

Vue.js 实战教程（附demo）

在实战之前，你需要对vuejs的基础语法有一定的了解，可以通过以下几个途径进行学习：vue.js官方文档：https://cn.vuejs.org/v2/guide/index.htmlvue.js 教程：https://www.mingtern.com/course/vuejs/官方的文档内容比较多且杂，对于初学者来说可能没有系统性的引导，可以查看明灯小站的基础教程，对一些常用的基础语法都进行了整理，还可以在线进行调试。好了，如果你对基础语法有一定的了解了，那就可以开始我们的实战项目了，这...

使用淘宝镜像cnpm安装Vue.js的图文教程【图】

前言 Vue.js是前端一个比较火的MVVM框架，要使用它，我们必须提前配置，其中有一种安装方式是使用npm，比较适合比较大型的应用。今天就来看看这种方式如何操作，由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue. 步骤首先我们需要下载npm，因为我已经提前安装了node.js,安装包里面集成了npm，然后我们就可以利用npm命令从获取淘宝镜像的cnpm了。 1.打开命令行窗口，输入 npm install -g cnpm --registry=h...

bmobjs-sdk在vue中的使用教程实例分享

将bmob js-sdk放在static目录，然后在index.html页面中已 script 标签的形式引入，就可以在vue中全局使用bmob js-sdk。本文主要给大家分享bmob js-sdk 在vue中的使用教程，需要的朋友参考下吧，希望能帮助到大家。BmobSDK的引入将bmob js-sdk放在static目录，然后在index.html页面中已 script 标签的形式引入，就可以在vue中全局使用bmob js-sdk<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title><script src="st...

vue3.0 CLI - 1 - npm 安装与初始化的入门教程【图】

node 开发环境请先自行准备 npm install -g @vue/cli 安装完成之后命令行则存在 vue 命令 vue -V 查看本地 vue 版本 vue -h 输出帮助 vue create <project-name> 进入工程文件夹，创建项目。如：cd studyVue ( 进入工程文件夹 ) vue create config ( 创建 config 项目 )选择 default 配置项，下面没什么可介绍的，自行尝试。下面介绍选择 manually select features 的相关流程 ( 使用上下箭头按键切换选项 - enter 按键确定选择 ...

有关Vue组件中slot的用法有哪些（详细教程）【图】

这篇文章交详细的给大家介绍了vue组件中slot的用法，主要是让组件的可扩展性更强，具体内容详情大家参考下本文下面给大家介绍Vue组件中slot的用法主要是让组件的可扩展性更强。1. 使用匿名slot2. 给slot加个名字如果不在有slot的组件里加入任何标签，slot什么都不会显示的。上面是我整理给大家的，希望今后会对大家有帮助。相关文章：通过JS如何实现文字间歇循环滚动效果详细讲解React中的refs（详细教程）使用Node.js实现压缩和解...

首页 / VUE / vue.js学习之UI组件开发教程

vue.js学习之UI组件开发教程

内容导读

内容图文

内容总结

内容备注

内容手机端

【vue.js学习之UI组件开发教程】教程文章相关的互联网学习教程文章

vue-cli教程【代码】

npm——安装教程、安装vue脚手架【图】

vue教程1-05 事件简写、事件对象、冒泡、默认行为、键盘事件【代码】

vue-cli 安装教程（转）

向军2017年最新laravel开发宝典 laravel结合vue与接口开发webapp实战视频教程

Vue拼图验证组件使用教程【代码】【图】

页面Vue简单的Sample 入门教程1【代码】【图】

基于VuePress构建高基于markdown语法的网站全教程【代码】【图】

后端.net core 3.1 前端vue-element-admin IIS部署教程【图】

Vue学习第2天又看了个教程，加深理解【代码】

Vue.js 实战教程（附demo）

使用淘宝镜像cnpm安装Vue.js的图文教程【图】

bmobjs-sdk在vue中的使用教程实例分享

vue3.0 CLI - 1 - npm 安装与初始化的入门教程【图】

有关Vue组件中slot的用法有哪些（详细教程）【图】

开发 - 相关标签

组件 - 相关标签

VUE - 技术教程分类

VUE - 最新教程

VUE - 最热教程