<!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. vue - 计算属性、表单输入绑定

    计算属性 computed:{} <!DOCTYPE html> <html> <head> <title></title> </he ...

  2. Supermarket---poj456（贪心并查集优化）

    题目链接:http://poj.org/problem?id=1456 题意是现有n个物品,每个物品有一个保质期和一个利润,现在每天只能卖一个商品,问最大的利润是多少,商品如果过期了就不能卖了: 暴力 ...

  3. 使用JAVA实现语音朗读一段文本

    需要做的工作: 1.下载  jacob-1.17-M2 或 jacob-1.18 2.解压jacob-1.17-M2 或 jacob-1.18 3.向工程里导入jacob.jar 4.将 jacob- ...

  4. C#知识点备忘

    1.结构体不能用判断符号==判断是否为null,结构体是值类型,不论采用new与否,结构体中的值类型都已经赋了初值. 2.整数相除: a=; b=: c=a/b; 结果c= 如果想得到double型需 ...

  5. django基础之FBV与CBV，ajax序列化补充，Form表单

    目录: FBV与CBV ajax序列化补充 Form表单(一) 一.FBV与CBV 1.什么是FBV.CBV? django书写view时,支持两种格式写法,FBV(function bases vi ...

  6. 使WebDev.WebServer.exe 当web服务器

    Vs自带的Visual Studio Development_server非常好用.比XP的IIS强多了. XP的IIS经常报访问数过多. 但是, WebDev.WebServer.exe 有个限制就 ...

  7. kindle 应用程序出错，无法启动选定的应用程序，请重试。问题排查过程及处理方案。

    最近一段时间在使用Kindle商城时总是会出现“应用程序出错,无法启动选定的应用程序,请重试.” 对此我花了大约一小时的时间进行测试验证并与客服人员沟通,将过程记录如下,供出现同样问题的朋友们参考. ...

  8. python使用zipfile解压中文乱码问题

    在zipfile.ZipFile中获得的filename有中日文则很大可能是乱码,这是因为 在zip标准中,对文件名的 encoding 用的不是 unicode,而可能是各种软件根据系统的默认字符集 ...

  9. 20155201 实验五《Java面向对象程序设计》实验报告

    20155201 实验五<Java面向对象程序设计>实验报告 一.实验内容 1. 数据结构应用 2. 结对编程:利用IDEA完成网络编程任务,1人负责客户端,1人负责服务器 3. 密码结对 ...

  10. Java构造函数和this关键字

    一.  构造函数 /* 一个函数中定义的变量必须要初始化,否则编译会报错 一个类中的数据成员 1. 如果在定义的时候不初始化,则它的值是系统自动分配好的默认值! 如int型为零 boolean型是fa ...