<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    {{msg}}

</div>

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

<script>

    //如果仅仅是实例化vue对象, 既有el又有template,如果template中定义模板内容

    //那么template模板的优先级大于el

    // 首先是有一个 APP根组件, 下面有三个子组件:header, aside, content

    //第一步:  声子 Vue中组件的首字母要大写, 跟标签区分

    //组件中的data必须是个函数,一定要有返回值

    let App = { //跟的是一个对象  这个对象里 就是除了下面的Vue中,el以外的所有属性

        data() {

            return {text: "我是子组件"}

        },

        //第四步:  给子组件里写内容.  当前模板里的标签,只用当前数据属性跟下面的根组件Vue没有关系

        //在<h2>{{text}}</h2>中的{{text}}部分可以放头部组件,内容组件和侧边栏组件 ************

        template: `

        <div id="a">

            <h2>{{text}}</h2>

        </div>

        `,

        //给子组件定义方法  比如说a标签的超链接

        methods:{

        },

    }

    new Vue({

        el: "#app",  //绑定的是上面的id="app"

        data() {

            return {msg: "alex"}

        },

        //与生命周期有关

        //用模板字符串

        //定义模板

        // 第三步:用子  把<App />写下面就是 用子 但是里面的内容需要写到上面子组件里App里

        // template可以不用写 但是要挂载到 el上去

        template: `

        <div class="app">

            <App><App/>

        </div>

        `,

        components: {

            // 第二步:   挂子 父组件Vue里不仅是可以挂载一个App,还可以挂载其他组件

            App   //如果key和value一样,可以只写App 替代App:App

        }

    })

</script>

</body>

</html>

局部组件的使用更改 以及全局组件的使用

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<div id="app">

    <App></App>

</div>

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

<script>

    //如果仅仅是实例化vue对象, 既有el又有template,如果template中定义模板内容

    //那么template模板的优先级大于el

    // 全局组件 ***  第一个参数是组件的名字,第二个参数是options

    // 全局组件声明之后,可以再任意的组件里使用, 放到别的组件之后,就成了别的组件的子组件了

    // 使用内置组件slot进行分发  让让别的组件中的Vbtn按钮显示不同的名称  ******

    Vue.component("Vbtn",{

        data(){ return {}},

        template:`<button><slot>按钮</slot></button> `,

    })

    // 首先是有一个 APP根组件, 下面有三个子组件:header, aside, content

    //子组件2

    //第一步:生子2  挂子往App里挂, 不需要挂Vue里

    let Vheader = {//对象

        data(){

            return {}

        },

        //template 是一个组件模板,一定要用一个根(父)元素包裹起来,所以一定要有一个div闭合****

        template:`

        <div>

        <h2>生子是在子组件中</h2>

        <h2 style="color:red">挂子和用子是在父组件中</h2>

        <Vbtn></Vbtn>

        </div>

        `,

    }

    //第一步:  声子   Vue中组件的首字母要大写, 跟标签区分

    //组件中的data必须是个函数,一定要有返回值

    let App = { //跟的是一个对象  这个对象里 就是除了下面的Vue中,el以外的所有属性

        data() {

            return {text: "我是子组件"}

        },

        //第四步:  给子组件里写内容.  当前模板里的标签,只用当前数据属性跟下面的根组件Vue没有关系

        //在<h2>{{text}}</h2>中的{{text}}部分可以放头部组件,内容组件和侧边栏组件 ************

        // 第三步:用子2   <Vheader></Vheader>,  下一步去对应模板Vheader的template里写内容

        template: `

        <div id="a">

            <h2>{{text}}</h2>

            <Vheader></Vheader>

            <Vbtn>登录</Vbtn>

            <Vbtn>注册</Vbtn>

            <Vbtn>提交</Vbtn>

        </div>

        `,

        //给子组件定义方法  比如说a标签的超链接

        methods:{

        },

        components:{

            // 第二步:挂子2

            Vheader

        },

    }

    new Vue({

        el: "#app",  //绑定根元素  是上面的id="app"

        data() {

            return {msg: "alex"}

        },

        //根组件中  可以把template删除 直接在id = "app"的div中使用

        // 子组件中的template 不能删除,因为子组件中的结构最终会渲染到id="app"的div里面<App></App>

        components: {

            // 第二步:   挂子 父组件Vue里不仅是可以挂载一个App,还可以挂载其他组件

            App   //如果key和value一样,可以只写App 替代App:App

        }

    })

</script>

</body>

</html>

vue中局部组件的使用的更多相关文章

  1. Vue 中的组件

    VUE中的组件 一个自定义的标签,vue就会把他看成一个组件,vue可以给这些标签赋予一定意义:一个页面就是一个组件 好处: 1.提高开发效率 2.方便重复使用 3.便于协同开发 4.更容易被管理和维 ...

  2. 简述vue中父子组件是怎样相互传递值的（基础向）

    前言 首先,你需要知道vue中父组件和子组件分别指的是什么?   父组件:vue的根实例——用new Vue()构造函数创建的vue实例(实例会有一个挂载点,挂载点里的所有内容可理解为父组件的内容) ...

  3. Vue中keep-alive组件的理解

    对keep-alive组件的理解 当在组件之间切换的时候,有时会想保持这些组件的状态,以避免反复重渲染导致的性能等问题,使用<keep-alive>包裹动态组件时,会缓存不活动的组件实例, ...

  4. vue中自定义组件（插件）

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  5. Vue中父子组件执行的先后顺序

    Vera   Vue中父子组件执行的先后顺序探讨(转载) 前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看 ...

  6. Vue中父子组件执行的先后顺序探讨

    前几天,朋友向我提出了一个关于Vue中父子组件执行的先后顺序问题,相信很多朋友在学习的过程中也会遇到这个问题,所以我就在此提出我自己的一些小看法. 问题如下:请问下图中父子组件执行的先后顺序? 首先, ...

  7. Vue中父组件向子组件传值

    Vue中父组件向子组件传值 相关Html: <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  8. Vue 中数据流组件

    好久不见呀,这两年写了很多很多东西,也学到很多很多东西,没有时常分享是因为大多都是我独自思考.明年我想出去与更多的大神交流,再修筑自己构建的内容. 有时候我会想:我们遇到的问题,碰到的界限,是别人给的 ...

  9. vue中局部封装axios

    Vue中局部配置axios 'use strict' import axios from 'axios'; import { Loading } from 'element-ui'; export c ...

随机推荐

  1. Angular自定义表单验证

    前端表单验证 为年龄输入框添加了两个验证,并分情况填写了提示语 <form nz-form [formGroup]="validateForm"> <nz-for ...

  2. postgresql 自带函数

    替换函数 SELECT replace('abcdefabcdef', 'cd', 'XX') 得到 abXXefabXXef ------------------------------------ ...

  3. WPF学习笔记：（一）数据绑定与DataContext

    前一段半心半意地学习了一下WPF,是从控件入手的,发现巨容易,甚至有些无趣.昨天面试,被问到了很多WPF的特性的东西,直接就傻了.于是乎,还是要去深刻的学习一下WPF.刚刚试了一下数据绑定,几次都没有 ...

  4. Boost总结汇总

    从开始接触Boost已经有好几年了,而对它的掌握却难言熟悉,有对它部分的源代码的剖析也是蜻蜓点水.有时间一点点梳理一下吧. 1. 概述 [Boost]C++ Boost库简介[Boost]C++ Bo ...

  5. 常用的shell（备份数据库、备份网站、切割访问日志）

    备份网站程序 #!/bin/bash /bin/tar czf /mnt/backup_website/web_$(date +%Y%m%d_%H%M%S).gz.tar /mnt/wwwroot/w ...

  6. 在WPF中实现图片一边下载一边显示

    原文 在WPF中实现图片一边下载一边显示 当我们上网查看一个较大的图片时,浏览器能一边下载一边显示,这样用户体验是比较好的,但在WPF程序中,当我们通过如下方式显示一幅图片时: img.Source ...

  7. Win10如何关闭自动更新服务

    原文:Win10如何关闭自动更新服务 第一步: 小娜搜索"gpedit.msc",进入本地计算机策略设置. 第二步: 找到策略位置:本地计算机策略-计算机配置-管理模板-Windo ...

  8. 笔记：认识.NET平台

    认识.NET平台先了解一堆技术术语和缩写 http://www.cnblogs.com/dbycl/p/6419456.html 天生不跨平台的.NET Framework 2.大家都来开发新语言 3 ...

  9. ML:吴恩达 机器学习 课程笔记(Week3~4)

    Logistic Regression Regularization Neural Networks: Representation

  10. QSocket 总体设计框架说明（观赏）

    QSocket 是 QDAC 开源组件的一个重要的组成部分,终于要开始开工了,为了方便大家了解 QSocket,对 QSocket 的总体设计的一些想法,我在这里给大家简要的描述一下. 首先,QSoc ...