Vue学习之路---No.7(分享心得,欢迎批评指正)
老规矩,先回顾一下上回的重点:
1.对于input框,若为单选框,如果没有对其设置value,那么其checked的值将在true Or false之间切换;如果设置了value,那么将会切换value值
2.而多选框和单选框有相同的原理,只是多选框是以数组的方式返回值
3.option如果没有设置value,那么渲染的值就为option中的内容
4.各类修饰器,详情见上回分解
回顾完上期的重点,我们来看一下今天的内容,之前几期我们对vue的基础进行了详细的学习;现在我们来看一看组件的知识:
组件其实就是把交互功能模块独立出来,方便重复使用,形象一点说就好比是HTML中的公共样式;js中的方法。
进入正题,那么我们该如何写一个组件呢,上代码:
Vue.component ( ‘ my-component ’ ,{
template: ' <div> c总,不要翻水水a </div> '
})
new Vue({
el:' #nubiya ',
})
// 这就是一个最基本的组件;my-component是组件名;template后面跟的是组件需要渲染的内容
<div id=" nubiya ">
<template></template>
</div>
// =>
<div id=" nubiya ">
<div>c总,不要翻水水a</div>
</div>
需要注意的是:
vue组件要写在前面,vue实例化要写在后面,不然就会报错;同时,组件只在vue作用域内有效,也就是在id为 nubiya 的结构下。
上面我们所认识的是 全局组件,也就是说,不管有多少个vm,全局组件都会在这些vm中生效;比如说这样:
<div id=" nokia ">
<o-template></o-template>
</div>
<div id=" nokia2 ">
<o-template></o-template>
</div>
Vue.component( 'o-complate' ,{
template:' <div>c总,翻个香蕉船啊</div> '
} )
vm1=new Vue({
el:' nokia '
})
vm2=new Vue({
el:' nokia2 '
})
//那么将会输出两条一样的 " c总,翻个香蕉船啊 "
现在我们来讲一讲局部组件:
var huawei ={
template: ' <div>c总正在翻水水</div> '
}
vm = new Vue({
el:' oppo ',
components:{
' o-complate ':huawei
}
})
//可以看到这个地方,我们把o-complate放在了vm对象里面,那么o-complate只能在vm作用域内,也就是id为oppo的结构内;
//同时需要注意的是: 这个地方huawei其实就是一个参数对象。
这里需要插播一个小细节:
dom在组件中放的位置其实是有规定的;就像ul和li之间不能加其他标签一样,如果在组件中这样写:
<table>
<xiaomi></xiaomi>
</table>
//这样是会报错的;
不过vue也提供了一种方法:
<table>
<tr is=' xiaomi '></tr>
</table>
//is属性可以保留html原有标签和原本的属性。
现在来看一下,我们早有接触的data属性:
Vue.component(' meizu ',{
template: ' <div> abc </div> '
data:{
message:' hello world '
}
})
//这种写法,显然是错误的~~~
那么正确的应该怎样呢? 如下:
Vue.component( ' meizu ',{
template:' <div>abc</div> '
data:function(){
return {message:' hello '}
}
} )
//这里需要注意的是组件中的data必须要用回调函数
var data = { counter: 0 }
Vue.component('simple-counter', {
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
data: function () {
return data
}
})
new Vue({
el: '#example-2'
})
<div id="example-2">
<simple-counter></simple-counter>
<simple-counter></simple-counter>
<simple-counter></simple-counter>
</div>
//注意:这个地方 3个button的点击事件是共享的,但是在某些时候,我们需要3个按钮独立,所以我们可以这样写:
data:function(){
return:{
counter:0
}
}
组件里的el属性也要用闭包+return的写法。它定义组件的有效作用域。
Vue.component('simple-counter', {
el:function(){
return '#example'
},
template: '<button v-on:click="counter += 1">{{ counter }}</button>',
data: function () {
return data
}
})
OKOK~~~ JINTIANJIUDAOZHELILE~~~ goodnight~~~~~~~~
转载于:https://www.cnblogs.com/fangmc/p/6597621.html
Vue学习之路---No.7(分享心得,欢迎批评指正)相关推荐
- 前端Vue学习之路(二)-Vue-router路由
Vue学习之路 (二) Vue-router(基础版) 一.增加静态路由 二.动态路由+路由嵌套+404页面 三. 编程式导航 四.命名路由 五.命名视图 六.重定向和起别名 1.重定向 2.起别名 ...
- 前端Vue学习之路(一)-初识Vue
Vue学习之路 (一) 1.引言 2.更换npm国内镜像源 3.用npm下载Vue 4.Vue全家桶 5.使用命令创建项目 5.推荐插件 6.推荐网站 7.学习扩展 1.引言 先安装node.js环境 ...
- Vue学习之路(基础篇)
Vue学习之路(基础篇)
- Vue学习之路1 小白起步
习背景: 之前一直写As3.0,从开始的flash小游戏,到网页播放器,到最近结束的桌面应用,东西越写越多,路却越走越窄T_T 言归正传,转到前端算是小白了,就从html.js.css这些开始学,好 ...
- Vue学习之路第八篇:事件修饰符
学习准备: ①.顾名思义,"事件修饰符"那么肯定是用来修饰事件,既然和事件有关系,那么肯定和"v-on"指令(也可简写为:@)有关系了. ②.事件修饰符有以下几 ...
- Vue学习之路(8)------快餐店收银系统
转载:http://jspang.com 第1节:Mockplus把我们的想法画出来 第2节:Vue-cli搭建开发环境 第3节:搞定项目图标Iconfont 第4节:编写独立的侧边栏导航组件 第5节 ...
- 前端Vue学习之路(五)插件的使用
vant插件使用 这里我们是用的语法是vue2.0 所以是 npm i vant -S 用法 1.按需引入的话 找到package.json文件 添加以下内容 plugins:[['import', ...
- 前端Vue学习之路(四)axios请求数据
axios 1.增加新知识 2.旧方案 3.新方案(一) 4.为什么要用拦截器 (新方案二) 1.增加新知识 假如每个组件都引用axios,后期如果axios库不再维护了,那每个组件都要改动 所以封装 ...
- mqtt js 中乱码_Vue.js 中的 v-cloak 指令——Vue学习之路
今天看一篇文档中见到了了v-cloak指令,感觉很新鲜.由于使用的频率不高.但还是想了解下是做什么的. 众所周知,程序的指令一般都是语义化的,然后,我企图从cloak这个单词能找到点线索. 然后发现, ...
最新文章
- cmd输入pip报错_安装pip报错:WARNING: Retrying (Retry(total=4,...
- java获取mysql表结构
- 在文本每一行的行首和行尾都插入特定的相同字符或文本
- Android Studio - HPROF文件查看和分析工具
- .Net 实用技术收藏!!!
- 九个console命令调试JS
- mysql数据库错误1317_请问为什么我的mysql数据库一直连接不上?两天了还没找到错误,请帮我看一下呀急急急...
- 使用JNA的透明JFrame
- matlab宏参赛,MATLAB杯无人机大赛 | 决赛通知!
- 服务器开放特定端口的方法
- 一部分 数据 迁移_从虚机到容器,知名架构师告诉你如何平滑进行业务迁移
- Centos的SSH连接方式
- Windows7之SSH,安装OpenSSH实现SSH客户端及服务
- 计算机一级题库ps视频,计算机一级Photoshop题库及答案
- Beta版是什么意思
- python描述对象静态特性的数据为_外国法律中,对婚生子女的否认请求均规定有时效限制,日本法律规定的时效期限是 ( )_学小易找答案...
- 查看linux负载的情况
- mysql并列查询_MYSQL实现排名及查询指定用户排名功能(并列排名功能)实例代码...
- ThreeJS FBXLoader 加载3D文件,材质消失,已解决
- linux 安装opanwrt虚拟机,Openwrt使用-虚拟机使用IMG镜像安装系统
热门文章
- Xposed源码剖析——app_process作用详解
- angular cli 切换 css_漫谈 Angular 定制主题的四种方式
- JZOJ 5286. 【NOIP2017提高A组模拟8.16】花花的森林
- JZOJ 3871. 【NOIP2014八校联考第4场第1试10.19】无聊的游戏(game)
- 软设考试笔记--数据库系统
- aba会导致问题_护发素会导致掉发?这个纠结多年的问题,真相原来是这回事
- 小学用计算机画画 说课,小学教师说课稿:《画画美丽的自然景色》
- 数学之美系列六 -- 图论和网络爬虫 (Web Crawlers)
- sudu在linux的命令,Linux的sudo命令
- 函数的递推matlab,关于递推最小二乘法辨识参数的matlab编程(含注释)