17.组件页面应用和vue项目生成
基本示例
这里有一个 Vue 组件的示例：
// 定义一个名为 button-counter 的新组件
Vue.component('button-counter', {
data: function () {
return {
count: 0
}
},
template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。
我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
<div id="components-demo">
<button-counter></button-counter>
</div>
new Vue({ el: '#components-demo' })
因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等
。仅有的例外是像 el 这样根实例特有的选项。
own:
<!DOCTYPE html>
<html> <head>
<title>组件的创建</title>
</head> <body>
<div id="app">
<div class="header"></div>
<!-- 组件可复用性强 -->
<Vheader></Vheader>
<Vheader></Vheader>
</div> <script src="./js/vue.js" type="text/javascript"></script> <script type="text/javascript"> //组件的创建
Vue.component('Vheader', {
data: function () {
//必须要return,哪怕是空对象
return {
}
},
template: `
<div clss='header'>
<div clss ='w'>
<div class='w-1'>
<img src='./images/6.png'>
</div> <div class='w-r'>
<button>登录</button> <button>注册</button> </div> </div> </div> `
}) var app = new Vue({
el: '#app',
data: { },
methods: { },
computed: {
}
})
</script> </body> </html>
具体页面使用
1.引入子组件
2.在 components 中配置子组件不然不显示
3.放到页面上使用
<!--一个组件有三部分组成--> <!-- 页面的结构 -->
<template> <div class="app">
<h3>{{ msg }}</h3>
<div class="app"></div>
<p>哈啊哈哈</p> <Vheader></Vheader>
<Vcontent></Vcontent>
<Vfooter></Vfooter> </div> </template> <script>
// 1.引入子组件
import Vheader from './components/Vheader'
import Vcontent from './components/Vcontent'
import Vfooter from './components/Vfooter' //页面的业务逻辑
export default {
name:'App',
data(){
return{
msg:'Hello 组件' }
},
methods:{ },
computed:{ },
//配置子组件不然不显示
components:{
Vheader,
Vcontent,
Vfooter, }
}
</script>>
<style > </style>
子组件页面（头，内容，页脚）:
头：
<template>
<header class="wrap">
<h3>头标题</h3>
</header>
</template> <script>
export default {
name:'Vheader',
data(){
return{ }
} }
</script> <style>
h3{
color: red } </style>
内容：
<template>
<content class="wrap">
<h4>我是中心内容</h4> </content>
</template> <script>
export default {
name:'Vcontent',
data(){
return{ } } }
</script> <style>
h4{
color: blue } </style>
页脚：
<template>
<footer class="wrap">
<h5> 我是footer页脚</h5> </footer>
</template> <script>
export default {
name:'Vfooter',
data(){
return{ } }
}
</script> <style>
h5{
color: blueviolet
} </style>
组件的复用
你可以将组件进行任意次数的复用：
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
注意当点击按钮时，每个组件都会各自独立维护它的 count。
因为你每用一次组件，就会有一个它的新实例被创建。
data 必须是一个函数
当我们定义这个 <button-counter> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：
data: {
count: 0
}
取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
data: function () {
return {
count: 0
}
}
如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例：
组件的组织
通常一个应用会以一棵嵌套的组件树的形式来组织：
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。
这里有两种组件的注册类型：全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：
Vue.component('my-component-name', {
// ... options ...
})
全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，
也包括其组件树中的所有子组件的模板中。
到目前为止，关于组件注册你需要了解的就这些了，
17.组件页面应用和vue项目生成的更多相关文章
- Cordova打包vue项目生成Apk （解决cordova build android抛出的zip问题）
最近对vue前端框架情有独钟.但研究了一下怎么把vue项目打包成android apk来玩玩. 首先讲一下创建vue2.x项目.其实在之前的文章中都有写过,有兴趣的同学可以去看看.http://www ...
- Element中(Notification)通知组件字体修改（Vue项目中Element的Notification修改字体)
这个问题纠结很久,一样的写的为啥有的页面就可以,有的就不行: 后来才发现: 先说一下怎么设置: 先定义customClass一个属性,用来写class属性值: 之后还需要修改一下组件里style标签的 ...
- vue项目实战总结
马上过年了,最近工作不太忙,再加上本人最近比较懒,毫无斗志,不愿学习新东西,或许是要过年的缘故(感觉像是在找接口). 就把前一段时间做过的vue项目,进行一次完整的总结. 这次算是详细总结,会从项目的 ...
- 05 vue项目01-组件关系、bootstrap
1.django后端项目 1.项目预期 配置前端静态资源 页面展示 2.django项目代码 主url from django.contrib import admin from ...
- Vue项目用于Ios和Android端开发
起因 前公司商城App项目使用的是H5开发,有微信公众号.Ios和Android三个版本,H5版本是自己写的一套框架,已经用了有些年头了,承载不下不断涌现出的新需求.而Ios和Android端通过we ...
- 用HBuilderX 打包 vue 项目 为 App 的步骤
首先打包你的 vue 项目 生成 dist 文件夹,教程请移步 https://www.cnblogs.com/taohuaya/p/10256670.html 看完上面的教程,请确保 你是 将: ...
- vue项目遇到的坑
一.启动项目问题 1. 如何从git上拉下项目:点我 2. 启动项目失败: 点我 and 点我 二.搭建项目问题 1. 先改分辨率,否则可能影响布局 以我的项目为例,分辨率修改位置如下: 2. .v ...
- vue项目构建：vue-cli+webpack常用配置
1,Webpack-dev-server的proxy用法:https://www.jianshu.com/p/f489e7764cb8 2,vue-cli3搭建项目之webpack配置:https:/ ...
- vue项目引入FastClick组件解决IOS系统下h5页面中的按钮点击延迟，连续点击无反应的问题
异常描述: ios系统手机中访问h5页面,按钮点击有延迟,连续点击卡顿.无反应. 异常原因: 这要追溯至 2007 年初.苹果公司在发布首款 iPhone 前夕,遇到一个问题:当时的网站都是为大屏幕设 ...
随机推荐
- [转帖]Linux下逻辑地址、线性地址、物理地址详细总结
Linux下逻辑地址.线性地址.物理地址详细总结 https://www.cnblogs.com/alantu2018/p/9002441.html 总结的挺好的 现在应该是段页式管理 使用MMU和T ...
- 打jar包在linux上执行
1.jar包插件 <plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>ma ...
- python第三天---列表的魔法
# list 列表 # 中括号括起来,逗号分隔每个元素, # 列表中可以是数字字符串.列表等都可以放进去 list1 = [123, "book", "手动", ...
- WUSTOJ 1335: Similar Word（Java）
题目链接:1335: Similar Word Description It was a crummy day for Lur. He failed to pass to the CET-6 (Col ...
- littleFS在RT1052移植笔记
环境:rt1052单片机+16G tf卡 为什么使用littleFS? NXP官方SDK支持! 先进的损耗平衡功能(wear leveling)可提供最长的快闪及内存寿命及最大的使用量.因为FALSH ...
- 开始Jupyter Notebooks
开始Jupyter Notebooks 安装Anaconda 因为不能有空格,所以没有选C:\Program Files 认识Jupyter Notebooks 修改 jupyter notebook ...
- 【数论】小A进学校
小A进学校 题目描述 近日,清华大学挖出来一个明清古墓.小A决定冒充考古系科研人员去盗墓.他遇到的第一个难关是来自校门口保安的质疑,因为小没有清华学生证,所以保安决定通过问问题的方式验证小A的身份. ...
- h5开发微信公众号重定向到关注页面没有关注按钮 （微信你个坑）
搜索微信公众号是这样的 微信公众号重定向到关注页面没有关注按钮 如何微信公众号重定向到关注页面没有关注按钮,请看上篇笔记 无解,微信一直在封这种通过链接跳转到公众号关注页面的方法.只有放个二维码提示长 ...
- Web Scraper 翻页——控制链接批量抓取数据（Web Scraper 高级用法）| 简易数据分析 05
这是简易数据分析系列的第 5 篇文章. 上篇文章我们爬取了豆瓣电影 TOP250 前 25 个电影的数据,今天我们就要在原来的 Web Scraper 配置上做一些小改动,让爬虫把 250 条电影数据 ...
- PowerShell将运行结果保存为文件
1. Out-File 示例: get-process | Out-File -filepath a.txt 跟“>”是一样的效果 输出 为普通文本 2. Export-Clixml 示例: g ...