vue中is的作用和用法小白知识_vue小白指南

vue中is的作用和用法小白知识

is的作用

 <ul>
  <li></li>
  <li></li>
  <li></li>
</ul>

总所周知,ul里面嵌套li的写法是html语法的固定写法(还有如table,select等)。

vue中is的作用和用法小白知识_vue小白指南

//code1
 <ul>
  <my-component></my-component>
  <my-component></my-component>
</ul>

my-component是我们自己写的组件,但是html在渲染dom的时候,my-component对ul来说并不是有效的dom,甚至会报错。

is的诞生

正是因为html模板的限制,于是就诞生了is。接下来我们就用is解决上面的问题~

 <ul>
  <li is='my-component'></li>
</ul>

首先你得注册my-component组件,全局或者局部都成。 <li is=’my-component’></li>其实就相当于<my-component></my-component>,语义上是一样一样的,就是解决了html模板的限制。


is的用法

<component> + is 的骚操作

<!-- 组件会在 `件名` 改变时改变 -->
<component :is="组件名变量"></component>

只要在data里弄个变量,给变量赋值就能动态的切换组件。这个其实在某些场景还是非常好用的安利一下。

不受html模板限制的情况

vue官网提醒以下来源使用模板的话,这条限制是不存在的:

字符串 (例如:template: ‘…’)
单文件组件 (.vue)
<script type=”text/x-template”>

也就是说只有在用cdn方式写vue的时候才会出现这种问题?开发基本用框架,好像没啥事的样子。

海计划公众号
(0)
上一篇 2019/12/18 23:52
下一篇 2020/03/19 06:52

您可能感兴趣的内容

  • 如何判断一个对象的某个属性是可写的?入门知识_属性使用指南

    这是一个咋一听好像很简单,但是实际上却没那么简单,而且是很有趣的问题。我们先来看一下什么情况下一个对象的属性是可写的。“属性可写”这个概念并没有严谨的定义,我们这里先来规定一下。属性可写,是指满足如下条件:对于任意对象object,该对象的a属性可写,是指如下代码成立:const value = Symbol();
    object.a = value;
    con

    2020/03/24
  • JS变量存储与深拷贝和浅拷贝入门基础教程_拷贝零基础入门

    变量类型与存储空间栈内存和堆内存基本数据类型string、number、null、undefined、boolean、symbol(ES6新增) 变量值存放在栈内存中,可直接访问和修改变量的值基本数据类型不存在拷贝,好比如说你无法修改数值1的值引用类型Object Function RegExp Math Date 值为对象,存放在堆内存中在栈内存中变量保存

    2020/03/20
  • node中的全局变量是什么?教程视频_变量入门基础

    JavaScript 中有一个特殊的对象,称为全局对象(Global Object),它及其所有属性都可以在程序的任何地方访问,即全局变量。在浏览器 JavaScript中,通常 window 是全局对象。那么在node中全局变量是什么?在Node.js中全局对象是global,所有全局变量(除了 global 本身以外)都是 global对象的属性。全局变

    2020/03/20
  • 程序员如何赚钱使用说明_程序员使用攻略

    作为一个程序员,时常都会想以后自己干不动的时候该怎样办?1. 努力工作每天上班都认认真真,这样就会有好的绩效,年终奖就会多一点。可能公司坑一点的话,年底是没有年终奖的。你不满工资,向上面提出要涨工资。老板看重你的能力,给你涨,一次给你调个1000。可能你这一年就只能调个1000,想要多要点,老板说这是公司制度,每次涨幅是有规定的,给你调1000已经很重视你了

    2020/04/03
  • JavaScript 进制转换&位运算小白基础_进制小白入门

    JavaScript 进制转换&位运算小白基础 前言 在一般的代码中很少会接触到进制和位运算,但这不代表我们可以不去学习它。作为一位编程人员,这些都是基础知识。如果你没有学…

    2020/03/20
  • 把 WebAssembly 用于提升速度和代码重用使用帮助_WebAssembly零基础入门

    有这样一种技术,可以把用高级语言编写的非 Web 程序转换成为 Web 准备的二进制模块,而无需对 Web 程序的源代码进行任何更改即可完成这种转换。浏览器可以有效地下载新翻译的模块并在沙箱中执行。执行的 Web 模块可以与其他 Web 技术无缝地交互 – 特别是 JavaScript(JS)。欢迎来到WebAssembly。对于名称中带有 assembly

    2020/03/26
  • Angular菜鸟知识JenkinsNginx前端自动化部署小白基础_部署

    Jenkins1.git拉取代码2.执行shell构建npm cache clean -f
    npm install –registry=https://registry.npm.taobao.org
    ./node_modules/.bin/ng build –prod –aot3.通过ssh上传代码到远程云服务器Nginx1.下载Nginx$ su

    2020/03/31
  • js校验密码复杂度的正则表达式使用攻略_密码菜鸟攻略

    1、密码中必须包含大小字母、数字、特称字符,至少8个字符,最多30个字符var regex = new RegExp(‘(?=.*[0-9])(?=.*[A-Z])(?=.*[a-z])(?=.*[^a-zA-Z0-9]).{8,30}‘);if (!regex.test(‘88888aaa‘)) {alert(“密码强度不够。密码中必须包含字母、数字、特殊

    2020/03/24
  • H5中data-*容易忽略的问题基础入门_属性新手入门

    H5添加了data-*属性,非常方便。但经常忽略小写的问题, H5要求属性名全部小写,驼峰式命名的习惯掉坑了测试代码如下:

    $(document

    2020/03/26
  • bootlint.js使用指南_Bootstrap项目的HTML linter

    bootlint.js使用指南 GitHub:https://github.com/twbs/bootlint 简介描述:Bootstrap项目的HTML linter Bootl…

    2020/03/06
  • 使用Promise封装小程序wx.request小白攻略_封装教程视频

    因为业务需要,每个http请求都要加上一个请求头,所以每次都要写很多重复的代码。现在尝试把wx.request简单的封装了一下,调用一个request方法,每次请求自动携带header头信息,这样就省事多了,包含了常见的get post put delete 四种请求方法,支持Promise方式调用。封装代码class request {constructo

    2020/03/23
  • monaco-editor菜鸟攻略_一个基于浏览器的代码编辑器

    monaco-editor菜鸟攻略 官方网址:https://microsoft.github.io/monaco-editor/ GitHub:https://github.co…

    2020/03/06
  • 区块链产品必学的15个基础概念菜鸟攻略_产品入门基础知识

    掌握这15个概念,相信可以帮助你了解区块链是什么、它的运作原理以及相关特征等信息。世界上唯一不变的就是变化的存在。时代的发展变化在互联网革命后变得更加迅猛——人工智能刚刚热了几年,虚拟现实、大数据和金融科技等一波波新技术概念不断涌现,让我们眼花缭乱。在不断鼓噪的创新颠覆中,莫名的焦虑感笼罩着所有人,我们都害怕被时代抛下。尤其是作为产品经理的我们,时刻保持对新

    2020/03/23
  • 微信小程序:禁止弹框底部内容滑动入门指南_弹框指南教程

    我们需要解决的问题:当弹框显示的时候,弹框下面的内容不能滚动小程序的弹框特别多,弹框的底部是一个可以下拉的页面,但是当弹框出现的时候,需要禁止底部的滚动,那么怎么做呢?一:给view加上catchtouchmove=’true’ 比如下面这种:至于加到哪个view上边,自然是最外边包含整

    2020/03/26
  • Web 堆栈选择指南:JAMStack vs MEAN vs LAMP小白知识_指南小白知识

    开发人员需要做的决策有很多。当 Web 应用程序的需求确定下来之后,就该选择效率最高的 Web 技术栈了。Web 技术栈是用于创建 Web 应用程序的技术工具集。一套 Web 技术栈由 OS(操作系统)、Web 服务器、数据库软件以及编程语言(通常前端和后端都需要自己的语言)组成。一些常见的编程语言 / 框架包括 PHP、JavaScript、Node.js

    2020/03/23
  • psd2css小白指南_Photoshop投影转换为CSS3工具

    psd2css小白指南 官方网址:https://psd2css.mezw.com GitHub:# 简介描述:Photoshop投影转换为CSS3工具 将Photoshop中的投…

    2020/03/06