<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="app">
            <ol>
                <todo-item v-for="item in groceryList" :todo="item"></todo-item>
            </ol>
        </div>
        <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/vue.component.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            var vm = new Vue({
                el: '#app',
                data: {
                    groceryList: [
                        {text: 'xudongyang'},
                        {text: 'lengpengfei'}
                    ]
                }
            });
        </script>
    </body>
</html>
Vue.component('todo-item',{
    props: ['todo'],
    template: '<li>{{todo.text}}</li>'
});

vue.js组件的更多相关文章

  1. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  2. 如何理解vue.js组件的作用域是独立的

    vue.js组件的作用域是独立,可以从以下三个方面理解: 1.父组件模板在父组件作用域内编译,父组件模板的数据用父组件内data数据:2.子组件模板在子组件作用域内编译,子组件模板的数据用子组件内da ...

  3. VUE.JS组件化

    VUE.JS组件化 前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎 ...

  4. 浅尝Vue.js组件(一)

    本篇目录: 组件名 组件注册 全局注册 基础组件的自动化全局注册 局部注册 在模块系统中局部注册 Prop 单向数据流 Prop验证 类型检查 非Prop特性 替换/合并已有的特性 禁用特性继承 自定 ...

  5. Vue.js 组件编码规范

    本规范提供了一种统一的编码规范来编写 Vue.js 代码.这使得代码具有如下的特性: 其它开发者或是团队成员更容易阅读和理解. IDEs 更容易理解代码,从而提供高亮.格式化等辅助功能 更容易使用现有 ...

  6. Vue.js 组件的三个 API：prop、event、slot

    组件的构成 一个再复杂的组件,都是由三部分组成的:prop.event.slot,它们构成了 Vue.js 组件的 API.如果你开发的是一个通用组件,那一定要事先设计好这三部分,因为组件一旦发布,后 ...

  7. Vue.js组件的重要选项

    Vue.js组件的重要选项 实例化Vue对象一些很重要的选项,Vue的所有数据都是放在data里面的,Vue的参数是个对象,对象里面的字段叫做data,data里面也是对象,data也可以写作是thi ...

  8. Vue.js组件学习

    组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) &l ...

  9. Vue.js组件示例

    一 外部引入文件:(全局注册) //建模版 var mycomponent=Vue.extend( {template:"<div><a href='#'>我爱Jav ...

  10. 关于vue.js 组件的调用

    包子初学vue.js,有很多不明白的地方还请大家多多指教,在组件的调用的时候,包子有点懵,因为感觉调用组件的方式非常的麻烦,每一个都要实例化,不过,通过不断询问大牛们,我找到了,动态加载组件的方法~~ ...

随机推荐

  1. 设置ubuntu 下git 的用户名和邮箱

    设置ubuntu 下git 的用户名和邮箱 摘自  慢慢修远路,上下求索心http://yanshaozhi.iteye.com/blog/386752 虽然我没看怎么明白 但我用第一总方法就设置好了 ...

  2. web设计中那些因素可能影响网站后期优化

    web设计中那些因素可能影响网站后期优化. 1.网站代码的简洁实用性.网站源文件html代码.js代码.css代码等应尽可能的压缩处理.能用jquery-min.js的最好不要用jquery.js:c ...

  3. Voreen (一) GPU Raycast主流程

    最近看了下Voreen这个开源体绘制快速原型开发包.Voreen里面集合了不少体绘制的基本算法,还是值得研究和试验图像显示效果的.今天第一篇以它自带工程为例,介绍下DICOM数据读取和GPU Rayc ...

  4. hibernate.hbm2ddl.auto配置详解

    hibernate.cfg.xml 中hibernate.hbm2ddl.auto配置节点如下:<properties><property name="hibernate. ...

  5. JAVA Web day02--- Android小白的第二天学习笔记

    CSS(美工部分知识,了解) 1. CSS概述 1.1.CSS是什么? * CSS 指层叠样式表 样式表:存储样式的地方 层叠:一层一层叠加 高大富有帅气人 1.2.CSS有什么作用? *CSS就是用 ...

  6. 一次完整的自动化登录测试-基于python+selenium进行cnblog的自动化登录测试

    Web登录测试是很常见的测试!手动测试大家再熟悉不过了,那如何进行自动化登录测试呢!本文作者就用python+selenium结合unittest单元测试框架来进行一次简单但比较完整的cnblog自动 ...

  7. drozer安装之夜深模拟器

    首先下载drozer的安装包    可以直接到官网下载:https://labs.mwrinfosecurity.com/tools/drozer/ 安装 解压压缩包其中 setup.exe 为Win ...

  8. C#数据类型分类

    C#是强类型语言,所以在定义每一个变量.常量和对象的时候都必须声明该类型. C#数据类型分为值类型.引用类型和指针类型(指针类型很少用): C#数据类型还可以分为内置类型.匿名类型和自定义类型.

  9. CSS3+JS切割轮播图

    以下说明数据,是指有4张图片的轮播图,分别切割成4张. 首先,做成单张切换的立体效果,即通过旋转,确定四张图片的位置,分别是一个立方体的上下前后的图片翻转移动角度. .box ul li:nth-ch ...

  10. 《C与指针》读后感

    到目前为止,我已经读到了<C与指针>第十六章,总共十八章,接下来的章节内容分别是标准函数库.数据结构.以及C语言的运行环境,还没有完全做完练习就写这篇读后感原因有二,第一个当然是最主要的, ...