<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Vue组件基础</title>
    </head>
    <body>
        <div id="app">
            <button-counter></button-counter>

<!-- 组件的复用 -->
            <button-counter></button-counter>
            <button-counter></button-counter>
        </div>

<!-- 通过prop向子组件传递数据 -->
        <div id="app1">
            <blog-post title="组件"></blog-post>
            <blog-post title="组件的"></blog-post>
            <blog-post title="组件的复用"></blog-post>
        </div>

<!-- prop的典型应用 -->
        <div id="app2">
            <blog-post v-for="item in list" v-bind:key="item.id" v-bind:title="item.name"></blog-post>
        </div>
        <script src="vue.js"></script>
        <script>
            Vue.component('button-counter', {
                data: function() {
                    return {
                        count: 0
                    }
                },
                template: '<button v-on:click="count++">你好{{count}}</button>'
            })

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

//通过prop向子组件传递数据
            Vue.component('blog-post', {
                props: ['title'],
                template: '<h3>{{title}}</h3>'
            })

var app1 = new Vue({
                el: "#app1"
            })

// prop的典型应用
            var app2 = new Vue({
                el: "#app2",
                data: {
                    list: [{
                            id: 1,
                            name: "java"
                        },
                        {
                            id: 1,
                            name: "C#"
                        },
                        {
                            id: 1,
                            name: ".Net"
                        },
                        {
                            id: 1,
                            name: "Vue"
                        }
                    ]
                }
            })
        </script>
    </body>
</html>

Vue组件基础的更多相关文章

  1. Vue组件基础用法

    前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...

  2. vue组件基础之父子传值

    可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组 ...

  3. Vue 组件基础完整示例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. vue组件基础之创建与使用

    一.创建组件 <script src="vue.js"></script> <!--引入vue.js文件--> <div id=" ...

  5. Vue.js 学习笔记之四：Vue 组件基础

    到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...

  6. Vue组件基础知识总结

    组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树. 那么什么是组件呢?组件可以扩展HTML元素,封装 ...

  7. Vue 组件基础完整示例2

    简介此页面可以直接复制运行,包含以下应用: Vue slot插槽使用Vue v-model使用Vue props使用父子组件数据传递element-ui使用HTML方式注册子组件,可以将子组件数据写在 ...

  8. vue—组件基础了解

    什么是组件? 组件是vue中的一个可复用实例,所以new Vue()是vue中最大的那个组件,根组件,有名字,使用的时候以单标签或双标签使用 vm = newVue() 是最大的组件,具有很多实用性的 ...

  9. Vue组件的基础用法（火柴）

    前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...

随机推荐

  1. DataGridView 多列排序功能

    System.Data.DataTable dt = new System.Data.DataTable(); private void FillDataGridView() { dt.Columns ...

  2. git命令详解（ 三 ）

    此篇为git命令的第三篇 目录 git Pull 模拟团队合作 Git Pull 在上一篇的结尾我们已经知道了如何用 git fetch 获取远程的数据, 现在我们学习如何将这些变化更新到我们的工作当 ...

  3. springboot 配置文件说明

    你可以在自己创建的组件上使用@ConfigurationProperties注解,而Spring Boot自动配置的很多组件也添加了@ConfigurationProperties注解,可以通过Spr ...

  4. ionic 开发解决ios上qq客服链接不跳转或者跳转到appstore

    不能跳转的情况需要 在ionic项目根目录下,打开config.xml文件,在<access origin="*" />后添加<allow-navigation ...

  5. vue.js及项目实战[笔记]— 02 vue.js基础

    一. 基础 1. 注册全局组件 应用场景:多出使用的公共性能组件,就可以注册成全局组件,减少冗余代码 全局APIVue.component('组件名','组件对象') 2.附加功能:过滤器&监 ...

  6. Microsoft Dynamics CRM 9.0 OP 版本 移动端

    本次OP 版本做了架调整,新的移动端基本可以满足客户需求,其内容自己可配置选择,满足了一般企业的应用处理. 具体操作如下: 1.登录APP选择应用(我使用手机浏览器) 2.打开默认应用,现在就一个木得 ...

  7. selenium win7+selenium2.0+python环境搭建

    win7+selenium2.0+python环境搭建 by:授客 QQ:1033553122 步骤1:下载python 担心最新版的支持不太好,这里我下载的是python 2.7(selenium之 ...

  8. CSS3创建圆圈进度条

    最近在工作中需要做一个圆圈倒计时,刚开始的想法是做个纯数字的倒计时即可,可是需求觉得这个不太好看,想加个倒计时进度条.于是就有了接下来的分析过程... 我们知道CSS3可以很方便的画圆,圆环,然后在加 ...

  9. Red5视频流服务器安装

    一.安装jre JAVA运行时下载地址: https://www.java.com/zh_CN/download/manual.jsp 安装后设置环境变量,变量值是jre的安装路径 二.安装 red5 ...

  10. 深度理解select、poll和epoll

    在linux 没有实现epoll事件驱动机制之前,我们一般选择用select或者poll等IO多路复用的方法来实现并发服务程序.在大数据.高并发.集群等一些名词唱得火热之年代,select和poll的 ...