Vue学习笔记六

旧城等待， 2022-06-09 11:24 226阅读 0赞

### 组件 ###

#### 注册 ####

全局注册

<div id="app">
            <list></list>
        </div>
        <script type="text/javascript"> Vue.component('list',{ template:"<div><h2>xiaoD</h2><p>welcome</p></div>" }) var app = new Vue({ el: "#app", }) </script>

局部注册

<div id="app">
            <list></list>
        </div>
        <script type="text/javascript"> var child = { template:"<div><h2>xiaoD</h2><p>welcome</p></div>" } var app = new Vue({ el: "#app", components: { 'list': child } }) </script>

#### 模板解析的is属性 ####

在ul,ol,table,select等控件限制了被包括的元素，所以这时候我们直接将我们注册的组件放入会出现一些问题，因此，这时候我们需要使用is属性

<div id="app">
            <table>
                <tr is="myRow"></tr>
            </table>
        </div>
        <script type="text/javascript"> var child = { template:"<div><h2>12</h2><span>1234</span></div>" } var app = new Vue({ el: "#app", components: { 'myRow': child } }) </script>

#### data必须是函数 ####

<div id="app">
            <my-component></my-component>
            <my-component></my-component>
            <my-component></my-component>
        </div>
        <script type="text/javascript"> Vue.component('my-component',{ template:"<button @click='count++'>{ {count}}</button>", data: function(){ return { count: 0 } } }) var app = new Vue({ el: "#app" }) </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，226人围观）

还没有评论，来说两句吧...

相关阅读

相关 Java学习笔记（六）

目录一：多态二：抽象类三：接口 -------------------- 一：多态 1.1 多态的概述在同一个对象中，在不同时刻表现出来的不同形态。

偏执的太偏执、/ 2023年10月01日 19:33/ 0 赞/ 30 阅读

相关 vue学习笔记(六)表单输入绑定

> 前言在上一章[vue学习笔记(四)事件处理器][vue]这一篇博客的内容中，我们已经了解vue是如何绑定事件的，而本篇博客主要讲解的是vue中表单输入的绑定，通常我们自

我不是女神ヾ/ 2023年06月30日 13:55/ 0 赞/ 25 阅读

相关 Opencv学习笔记（六）SURF学习笔记

转载请注明出处：http://blog.csdn.net/crzy\_sparrow/article/details/7392345 看了harri

叁歲伎倆/ 2022年08月07日 12:49/ 0 赞/ 324 阅读

相关 Vue学习笔记六

组件注册全局注册 <div id="app"> <list></list> </div> <s

旧城等待，/ 2022年06月09日 11:24/ 0 赞/ 227 阅读

相关 PySpark 学习笔记六

6 Structured Streaming 6.1 What is Spark Streaming? Spark Streaming的核心是一个可扩展的容错流系统，它采

柔情只为你懂/ 2022年06月01日 05:44/ 0 赞/ 297 阅读

相关 Vue学习笔记（六）——解析v-model（PART1）

参考文档一：[https://cn.vuejs.org/v2/guide/][https_cn.vuejs.org_v2_guide] 参考文档二：[https://seg

淩亂°似流年/ 2022年02月26日 06:40/ 0 赞/ 212 阅读

相关 vue官网学习笔记（六）列表渲染

用v-for把一个数组对应为一组元素我们用v-for指令根据一组数据的选项列表进行渲染。v-for指令需要使用item in items形式的特殊语法，items是源数

素颜马尾好姑娘i/ 2022年02月20日 10:22/ 0 赞/ 261 阅读

相关学习笔记六： NFS

一 NFS介绍属于网络文件系统，它是unix,linux标准协议，开源的标准扩展协议，支持nfsv4。NFS传输使用的是远程过程调用RPC机制二

淩亂°似流年/ 2022年02月09日 12:25/ 0 赞/ 397 阅读

相关 Vue学习笔记(六) 表单输入绑定

`v-model` 指令在表单元素上创建双向数据绑定，它负责用于监听用户输入事件以更新数据注意，`v-model` 会忽略所有表单元素特性的初始值，而总是将 Vue 实例的

痛定思痛。/ 2021年11月05日 10:26/ 0 赞/ 380 阅读

相关【Vue】学习笔记六：watch和computed

文章目录 @\[TOC\] \`watch\`属性的使用 \`computed\`计算属性 \`watch\`、\`computed\`和\`methods\`之间的

亦凉/ 2021年09月21日 02:42/ 0 赞/ 392 阅读