5.组件化应用构建---(vue入门文档学习记录)

矫情吗；* 2022-01-17 00:59 196阅读 0赞

**组件化应用构建**

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>组件化构建应用</title>
    		<script type="text/javascript" src="../img/vue.js" ></script>
    	</head>
    	<body>
    		<div id="app-7">
    			<ol>
    				
    			<todo-item 
    				v-for="item in groceryList"
    				v-bind:todo="item"
                    v-bind:key="item.id"
    				></todo-item>
    			</ol>
    		</div>
    		
    		<script>
    			/*
    			 * 通过Vue.component()函数指定组件的id todo-item,
    			 *  todo-item 组件现在接受一个"prop"，类似于一个自定义特性。这个 prop 名为 todo。
    			 *  template 是prop的value值,相当于提供展示的模板
    			 * TODO props是数组,如果是多个,怎样使用
    			 */
    			Vue.component('todo-item',{
    				props:['todo'],
    				template: '<li>{
       { todo.text }}</li>'
    			})
    			
    			var app7 = new Vue({
    				el: '#app-7',
    				data: {
    					groceryList:[
    					{id:0,text:'蔬菜'},
    					{id:1,text:'奶酪'},
    					{id:2,text:'随便其他什么人吃的东西'}
    					]
    				}
    			})		
    		</script>	
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，196人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue学习：组件化

人处理问题的方式: > 任何一个人处理信息的逻辑能力都是有限的 > 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。 > 但是，我们人

柔光的暖阳◎/ 2023年10月04日 19:48/ 0 赞/ 38 阅读

相关 21.组件-动态数组---(vue入门文档学习记录)

动态数组 1.动态数组顾名思义是指动态的绑定数组.具体使用如下:  <div id="app-9"> <!--遍

谁借莪１个温暖的怀抱￠/ 2023年08月17日 16:48/ 0 赞/ 100 阅读

相关 20.组件-插槽---(vue入门文档学习记录)

插槽有的时候我们需要向模板里面插入文字,活着其他的东西,我们如何做呢?这时候,就需要插槽来实现了.就相当于,组件给你留了一块自己动手去填的地方,下面先上代码:

Bertha 。/ 2023年08月17日 16:46/ 0 赞/ 112 阅读

相关 3.条件与循环---(vue入门文档学习记录)

条件 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title

水深无声/ 2022年10月01日 07:54/ 0 赞/ 156 阅读

相关 1.第一个vue.js---(vue入门文档学习记录)

声明式渲染 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统： <!DOCTYPE html> <html>

小灰灰/ 2022年10月01日 07:54/ 0 赞/ 165 阅读

相关 5.组件化应用构建---(vue入门文档学习记录)

组件化应用构建 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

矫情吗；*/ 2022年01月17日 00:59/ 0 赞/ 197 阅读

相关 8.插值---(vue入门文档学习记录)

文本数据绑定最经常用的就是"Mustache"语法(两个大括号)的文本插值,注意这里特别标明只是文本插值,如果是html格式也会只显示文本. <span>Mess

爱被打了一巴掌/ 2022年01月12日 12:29/ 0 赞/ 267 阅读

相关 6.数据与方法---(vue入门文档学习记录)

数据与方法当一个 Vue 实例被创建时，它将 data 对象中的所有的属性加入到 Vue 的响应式系统中。当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新

桃扇骨/ 2022年01月11日 06:09/ 0 赞/ 207 阅读

相关 10.指令---(vue入门文档学习记录)

指令指令 (Directives) 是带有 v- 前缀的特殊特性。指令特性的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。指令的职

谁借莪１个温暖的怀抱￠/ 2022年01月06日 09:29/ 0 赞/ 200 阅读

相关 13.侦听属性 ---(vue入门文档学习记录)

侦听属性先看下面的例子: <div id="computed_props"> 千米 : <input type="text" v-model="ki

╰+攻爆jí腚メ/ 2021年12月16日 09:43/ 0 赞/ 263 阅读