Vue组件基础
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue组件基础</title>
</head>
<body>
<div id="app">
<button-counter></button-counter>
<!-- 组件的复用 -->
<button-counter></button-counter>
<button-counter></button-counter>
</div>
<!-- 通过prop向子组件传递数据 -->
<div id="app1">
<blog-post title="组件"></blog-post>
<blog-post title="组件的"></blog-post>
<blog-post title="组件的复用"></blog-post>
</div>
<!-- prop的典型应用 -->
<div id="app2">
<blog-post v-for="item in list" v-bind:key="item.id" v-bind:title="item.name"></blog-post>
</div>
<script src="vue.js"></script>
<script>
Vue.component('button-counter', {
data: function() {
return {
count: 0
}
},
template: '<button v-on:click="count++">你好{{count}}</button>'
})
var app = new Vue({
el: "#app"
});
//通过prop向子组件传递数据
Vue.component('blog-post', {
props: ['title'],
template: '<h3>{{title}}</h3>'
})
var app1 = new Vue({
el: "#app1"
})
// prop的典型应用
var app2 = new Vue({
el: "#app2",
data: {
list: [{
id: 1,
name: "java"
},
{
id: 1,
name: "C#"
},
{
id: 1,
name: ".Net"
},
{
id: 1,
name: "Vue"
}
]
}
})
</script>
</body>
</html>
Vue组件基础的更多相关文章
- Vue组件基础用法
前面的话 组件(Component)是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己所需, ...
- vue组件基础之父子传值
可以看出数据从后端获取过来,最外层的父组件接收数据,子组件不能直接获取,必须由父组件传递,此时使用props,并且父组件的值更新后,子组件的值也会随之更新,但是反过来通过修改子组件props来影响父组 ...
- Vue 组件基础完整示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vue组件基础之创建与使用
一.创建组件 <script src="vue.js"></script> <!--引入vue.js文件--> <div id=" ...
- Vue.js 学习笔记之四:Vue 组件基础
到目前为止,这个系列的笔记所展示的都是一些极为简单的单页面 Web 应用程序,并且页面上通常只有几个简单的交互元素.但在实际生产环境中,Web 应用程序的用户界面往往是由多个复杂的页面共同组成的.这时 ...
- Vue组件基础知识总结
组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树. 那么什么是组件呢?组件可以扩展HTML元素,封装 ...
- Vue 组件基础完整示例2
简介此页面可以直接复制运行,包含以下应用: Vue slot插槽使用Vue v-model使用Vue props使用父子组件数据传递element-ui使用HTML方式注册子组件,可以将子组件数据写在 ...
- vue—组件基础了解
什么是组件? 组件是vue中的一个可复用实例,所以new Vue()是vue中最大的那个组件,根组件,有名字,使用的时候以单标签或双标签使用 vm = newVue() 是最大的组件,具有很多实用性的 ...
- Vue组件的基础用法(火柴)
前面的话 组件(component)是Vue最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码,根据项目需求,抽象出一些组件,每个组件里包含了展现.功能和样式.每个页面,根据自己的需要,使用 ...
随机推荐
- Android开发day-01
http://note.youdao.com/noteshare?id=b7f0d55c1e5eab20bb47e5c58e683611
- hash table (youtube 2)
https://www.youtube.com/watch?v=jEdaduyLLqY
- Linux 学习记录 四(Bash 和 Shell scirpt).
一.什么是 Shell? 狭义的shell指的是指令列方面的软件,包括基本的Linux操作窗口Bash等,广义的shell则包括 图形接口的软件,因为图形接口其实也可以操作各种驱动程序来呼叫核心进行工 ...
- MVC中Controller与View中间的数据传递的常用方法
这几天正在学习MVC,顺便就将自己每天的学习心得记录下来与大家分享一下吧! 在MVC中,Controller与View之间传递数据是很频繁的事情,所以在这里就总结一下我自己在学习中使用的几种常用的方法 ...
- ajax小知识
1.ajax发送get请求时,需要注意如下情况: var uri="http://127.0.0.1:8071/springmvcdemo/bigdataapi/publishdata&qu ...
- 搜狐eHR团队-曾经一起奋斗过的~
昨天所有搜狐eHR团队同事再相聚(在职+离职),大家聊的都很开心,共同回顾了eHR项目从无到有的过程. 非常感谢在搜狐的工作经历,自己成长很多,目前大家分布在各个公司为eHR做着贡献,大家都注意身体~ ...
- 腾讯云部署golang flow流程,vue.js+nginx+mysql+node.js
这次总算把js-ojus/flow的ui部署到腾讯云上,比较吐槽的就是,为啥这么复杂,vue.js前后端分离,比golang编写的部署方面复杂几万倍.真是浪费人生啊. golang+sqlite写的东 ...
- spring 引用Bean的属性值
引用Bean的属性值 从Spring3.0开始,可以通过#{beanName.beanProp}的方式方便地引用另一个bean的属性值1.不需要使用PropertyPlaceholderConfigu ...
- asp.net core中IHttpContextAccessor和HttpContextAccessor的妙用
分享一篇文章,关于asp.net core中httpcontext的拓展. 现在,试图围绕HttpContext.Current构建你的代码真的不是一个好主意,但是我想如果你正在迁移一个企业类型的应用 ...
- 1.Spring MVC详解
目录 1.SpringMVC 详细介绍 2.SpringMVC 处理请求流程 3.配置前端控制器 4.配置处理器适配器 5.编写 Handler 6.配置处理器映射器 7.配置视图解析器 8.Disp ...