<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>组件之WEB开发中组件使用场景与定义组件的方式</title>

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

</head>

<body>

<!--

    组件：可互用、维护省力

-->

<div id="lantian">

    <!--全局组件的调用-->

    <slide></slide>

    <slide></slide>

    <!--局部组件的调用：使用组件的名时，如果是驼峰式的写法，需要用 - 分开-->

    <hd-News></hd-News>

</div>

<script>

    //定义全局组件： component:组件。它是在根组件中使用的。必须在根组件声明之前使用。

    Vue.component('slide',{  //子组件：

        //定义模板：

        template:"<h1>wo shi zujian de moban</h1>"

    });

    //把局部组件的数据提取出来：

    var news={

        template:"<h2>你好，我是局部组件</h2>"

    };

    var app = new Vue({

        el:"#lantian", //根组件，其他的就是子组件

        //定义局部组件：

        components:{hdNews:news} //如果定义的变量名与数据的变量名一致，可以简写成一个：news 。这是es6的写法

    });

</script>

</body>

</html>

　　

038——VUE中组件之WEB开发中组件使用场景与定义组件的方式的更多相关文章

  1. 依赖注入及AOP简述（十）——Web开发中常用Scope简介 .

    1.2.    Web开发中常用Scope简介 这里主要介绍基于Servlet的Web开发中常用的Scope. l        第一个比较常用的就是Application级Scope,通常我们会将一 ...

  2. [译]如何在Web开发中使用Python

    [译]如何在Web开发中使用Python 原文:HOWTO Use Python in the Web 摘要 这篇文档展示了Python如何融入到web中.它介绍了几种Python结合web服务器的方 ...

  3. Web开发中，页面渲染方案

    转载自:http://www.jianshu.com/p/d1d29e97f6b8 (在该文章中看到一段感兴趣的文字,转载过来) 在Web开发中,有两种主流的页面渲染方案: 服务器端渲染,通过页面渲染 ...

  4. 详细阐述Web开发中的图片上传问题

    Web开发中,图片上传是一种极其常见的功能.但是呢,每次做上传,都花费了不少时间. 一个"小功能"花费我这么多时间,真心不愉快. So,要得认真分析下原因. 1.在最初学习Java ...

  5. 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

    提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...

  6. Web 开发中很实用的10个效果【附源码下载】

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...

  7. WEB开发中的字符集和编码

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  8. Web 开发中很实用的10个效果

    在工作中,我们可能会用到各种交互效果.而这些效果在平常翻看文章的时候碰到很多,但是一时半会又想不起来在哪,所以养成知识整理的习惯是很有必要的.这篇文章给大家推荐10个在 Web 开发中很有用的效果,记 ...

  9. Web开发中管理ipad屏幕的方向变化

    Web开发中,我们会遇到在手机垂直或水平视角时展示不同状态的情况.下面我来总结一下检测移动设备方向变化的一些方法. 1 使用javascript 直接看代码: <script type=&quo ...

随机推荐

  1. Max Sum Plus Plus---hdu1024（动态规划求M段的最大和）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1024 题意就是有n个数分成m段,求最大的和: dp[i][j]表示把 j 个数分成 i 段,选择第 j ...

  2. django haystack

    # coding=utf-8 from haystack import indexes from yw_asset.models import * class AssetIndex(indexes.S ...

  3. SQL基础--查询之五--查询语句一般格式

    SQL基础--查询之五--查询语句一般格式

  4. Java-idea-FindBugs、PMD和CheckStyle对比

    一.对比 工具 目的 检查项 备注 FindBugs 检查.class 基于Bug Patterns概念,查找javabytecode (.class文件)中的潜在bug 主要检查bytecode中的 ...

  5. mysql创建和删除表

    创建表 简单的方式 CREATE TABLE person ( ), name ), birthday DATE ); 或者是 CREATE TABLE IF NOT EXISTS person ( ...

  6. Spark Core（二）Driver上的Task的生成、分配、调度（转载）

    1. 什么是Task? 在前面的章节里描述过几个角色,Driver(Client),Master,Worker(Executor),Driver会提交Application到Master进行Worke ...

  7. （转）帮你深入理解OAuth2.0协议

    1. 引言 如果你开车去酒店赴宴,你经常会苦于找不到停车位而耽误很多时间.是否有好办法可以避免这个问题呢?有的,听说有一些豪车的车主就不担心这个问题.豪车一般配备两种钥匙:主钥匙和泊车钥匙.当你到酒店 ...

  8. （20）Cocos2d-x中的引用计数（Reference Count）和自动释放池（AutoReleasePool）

    引用计数 引用计数是c/c++项目中一种古老的内存管理方式.当我8年前在研究一款名叫TCPMP的开源项目的时候,引用计数就已经有了. iOS SDK把这项计数封装到了NSAutoreleasePool ...

  9. （转）SSIS处理导入数据时, 存在的更新, 不存在的插入

    问题描述: 当你把数据从其他数据库, 或者是文本文件之类的其他数据源导入到目的数据库时, 有时希望在导入的处理中, 能够实现"数据存在时更新, 不存在时导入" 在之前, 一般是通过 ...

  10. js中 a : function(){}这是什么格式? 代表什么含义？怎样学习这样的格式？

    js中的json. 一种轻量级数据格式.json中的值是map形式的就是key->value. 具体看下边的示例; var person = { // 用 大括号括声明一个json. " ...