vuejs23简单组件使用

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<title></title>

</head>

<body>

<div id="app">

<ol>

<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>

</ol>

</div>

<script src="http://static.runoob.com/assets/vue/1.0.11/vue.min.js"></script>

<script>

Vue.component("todo-item",{

props:[‘todo‘],

template:‘<li>{{todo.text}}</li>‘

});

new Vue({

el:‘#app‘,

data:{

groceryList:[

{ text: ‘Vegetables‘ },

{ text: ‘Cheese‘ },

{ text: ‘Whatever else humans are supposed to eat‘ }

]

}

});

</script>

</body>

</html>

时间: 2024-12-28 16:15:12

vuejs23简单组件使用的相关文章

pure css简单组件,借鉴bootstrap

<!doctype html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <!--缩放比例以及允许缩放--> <meta name="viewport" content="width=device-width, initial-scale=1.0, m

client高性能组件化框架React简单介绍、特点、环境搭建及经常使用语法

[本文源址:http://blog.csdn.net/q1056843325/article/details/54729657 转载请加入该地址] 明天就是除夕了 预祝大家新春快乐 [ ]~( ̄▽ ̄)~* 天天饭局搞得我是身心疲惫= = 所以更新比較慢 今天想跟大家分享的就是这个大名鼎鼎的React框架 简单介绍 React是近两年非常流行的框架 流行到什么程度呢? 我看了一下Github上的数据 React达到了5w8+的star 在JavaScript中star排名第4 受欢迎程度可见一斑

java分页组件简单设计(贼简单)

代码很简单,关键是思想. 每个业务模块基本都会涉及到分页的应用,不管是普通的分页浏览还是瀑布流形式的浏览.分页可以减轻服务器的压力,可以节俭页面布局.在我们的分页简单组件设计中,主要是需要返回给客户端四个数据:列表对象.当前页码.每页记录最大条数.记录总数. 列表对象:顾名思义,就是展示给用户看的当前页面记录: 当前页码:主要是需要js来高亮: 每页记录最大条数:一般是服务器设定 记录总数:js用来计算总页数使用 设计思想: 1.由于分页是一种可以公共使用的功能,所以可以开发成一个组件,这样可以

组件化设计与开发

http://colachan.com/post/3545 终于迎来一期特刊.最近打算在公司内部做一个分享,讲的是组件化的设计与开发的思维方式.准备完演讲资料,发现这完全可以改成一篇文章.藏着掖着不合适,发出来分享给有需求的朋友吧,就当是个试讲了,希望大家帮忙指出错误. 下载地址:https://www.jianguoyun.com/p/DY1Z3bEQwKOaBhimoyg 由于本文首先是以keynote的形式诞生的,其中还有动画和视频,所以我比较推荐大家直接下载keynote文件(也存了PP

客户端高性能组件化框架React简介、特点、环境搭建及常用语法

明天就是春节了 预祝大家新春快乐 [ ]~( ̄▽ ̄)~* 天天饭局搞得我是身心疲惫= = 所以更新比较慢 今天想跟大家分享的就是这个大名鼎鼎的React框架 简介 React是这两年非常流行的框架 并不难,还是挺容易上手的 起源于Facebook内部项目(一个广告系统) 传统页面从服务器获取数据,显示到浏览器上,用户输入数据传入服务器 但随着数据量增大,越来越难以维护了 Facebook觉得MVC不能满足他们的扩展需求了(巨大的代码库和庞大的组织) 每当需要添加一项新的功能或特性时,系统复杂度就

原生js实现简洁的返回顶部组件

本文内容相当简单,所以没有发布到博客园首页,如果你不幸看到,那只能是我这篇文章的荣幸,谢谢你的大驾光临~ 返回顶部组件是一种极其常见的网页功能,需求简单:页面滚动一定距离后,显示返回顶部的按钮,点击该按钮可以将滚动条滚回至页面开始的位置.实现思路也很容易,只要改变document.documentElement.scrollTop或document.body.scrollTop的值即可.本文抛弃所有加速减速的酷炫效果,回归软件的本质,提供一个最简洁的实现,只追求实用性,不追求所谓的用户体验,效果

Vue.js组件学习

组件可以扩展HTML元素,封装可重用的HTML代码,我们可以将组件看作自定义的HTML元素.组件系统提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用. 一个简单组件例子(全局注册) <!DOCTYPE html> <html> <body> <div id="app"> <!-- 3. #app是Vue实例挂载的元素,应该在挂载元素范围内使用组件--> <the-component></the-

React组件间的通信

1.子组件调用父组件,采用props的方式进行调用和赋值,在父组件中设置相关属性值或者方法,子组件通过props的方式进行属性赋值或者方法调用: 2.父组件调用子组件,采用refs的方式进行调用,需要父组件在调用子组件的时候,添加ref属性,并进行唯一命名,在父组件中即可调用: 子组件调用父组件 创建一个简单组件ButtonComment,调用此组件是需传递参数buttonName,并创建初始化方法getInitialState及点击事件sendSword : var ButtonComment

tomcat简单整理笔记!

一.tomcat各目录了解. [[email protected] ~]# cd /usr/local/tomcat6.0.45/ [[email protected] tomcat6.0.45]# ll 总用量 116 drwxr-xr-x 2 root root  4096 7月  22 13:03 bin drwxr-xr-x 3 root root  4096 6月  30 17:55 conf drwxr-xr-x 2 root root  4096 6月  30 17:53 lib