正文
(day67)组件、组件化、组件传参、JS补充(命名转换、for in 、数据转换)、css取消选中和模拟小手
小程序:扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序
【扫一扫了解最新限行尾号】
复制小程序
目录
- 一、初识组件
- (一)概念
- (二)特点
- 二、组件的分类
- (一)根组件
- (二)局部组件
- (三)全局组件
- 二、数据组件化
- 三、组件的传参
- (一)父传子
- (二)子传父
- 四、JS补充
- (一)与html命名转换
- (一) JS中的循环遍历
- (1)
for in
- (2)
for of
- (3)
each
- (1)
- (二) 加减运算和数据类型转换
- (三) 可变长参数和
- 四、css补充
一、初识组件(一)概念- 组件就是html、css和js的集合体,通过组件可以再次复用该集合体
- 组件分为根组件、局部组件、全局组件
(二)特点- 每一个组件都是一个Vue实例
- 根组件作为最顶层父组件,局部和全局组件作为子组件,也可以成为其他局部和全局组件的父组件
- 每个组件都有自身的模板template,根组件的模板就是挂载点,template中有且只有一个根标签
- 组件中的出现的所有变量,都有组件自身提供
- 局部组件必须注册后才能使用,全局组件不需要注册,推荐使用局部组件
- 子组件的数据需要隔离(通过函数让每一个组件拥有自己的独立作用域,数据组件化)
二、组件的分类(一)根组件- 根组件:
new Vue()
生成的组件 - 根组件可以不明确template,template默认采用挂载点页面结构
- 如果设置了template,则挂载点内部内容会被替换
- 因此,html和body标签不能作为挂载点
- 组件就是html、css和js的集合体,通过组件可以再次复用该集合体
- 组件分为根组件、局部组件、全局组件
(二)特点- 每一个组件都是一个Vue实例
- 根组件作为最顶层父组件,局部和全局组件作为子组件,也可以成为其他局部和全局组件的父组件
- 每个组件都有自身的模板template,根组件的模板就是挂载点,template中有且只有一个根标签
- 组件中的出现的所有变量,都有组件自身提供
- 局部组件必须注册后才能使用,全局组件不需要注册,推荐使用局部组件
- 子组件的数据需要隔离(通过函数让每一个组件拥有自己的独立作用域,数据组件化)
二、组件的分类(一)根组件- 根组件:
new Vue()
生成的组件 - 根组件可以不明确template,template默认采用挂载点页面结构
- 如果设置了template,则挂载点内部内容会被替换
- 因此,html和body标签不能作为挂载点
(一)根组件- 根组件:
new Vue()
生成的组件 - 根组件可以不明确template,template默认采用挂载点页面结构
- 如果设置了template,则挂载点内部内容会被替换
- 因此,html和body标签不能作为挂载点
new Vue()
生成的组件<div id="app"> {{ msg }}</div><script> new Vue({ el: '#app', // 被组件 template 模块进行替换的占位符 data: { msg: '组件信息' }, template: '<p>{{ msg }}</p>'})</script>
(二)局部组件- 局部组件:
let 组件名={}
,{}内部采用的是Vue语法 - 局部组件要在其父组件中注册才能使用
let 组件名={}
,{}内部采用的是Vue语法<div id="app"> <div class="wrap"> <!--3. 渲染组件--> <local-tag></local-tag> <local-tag></local-tag> <local-tag></local-tag> <local-tag></local-tag> </div></div><script src="js/vue.js"></script><script> // 1. 声明组件 let localTag = { template: ` <div class="box" @click="fn"> <img src="img/001.jpg" alt=""> <h2>美女</h2> </div>`, methods: { fn() { console.log(this) } } }; // 2. 注册组件 new Vue({ el: '#app', data: {}, components: { // 注册组件 localTag, } })</script>
(三)全局组件- 全局组件:
Vue.component('组件名',{})
,{}内部采用的是Vue语法 - 全局组件不需要注册
Vue.component('组件名',{})
,{}内部采用的是Vue语法<div id="app"> <div class="wrap"> <global-tag></global-tag> <global-tag></global-tag> <global-tag></global-tag> <global-tag></global-tag> </div></div><script src="js/vue.js"></script><script> // 全局组件 Vue.component('global-tag', { template: ` <div class="box" @click="fn"> <img src="img/002.jpg" alt=""> <h2>大长腿</h2> </div>`, methods: { fn() { console.log(this) } } }); // Vue实例 new Vue({ el: '#app', data: {}, })</script>
二、数据组件化- 局部或全局取件,一个组件可能会被复用多次,每个组件都应该有自己独立的变量名称空间
- 可以作为方法的返回值(方法执行后会产生一个局部作用域),从而实现数据组件化
<div id="app"> <div class="wrap"> <local-tag></local-tag> <local-tag></local-tag> <local-tag></local-tag> <local-tag></local-tag> </div></div><script> let localTag = { template: ` <div class="box" @click="fn"> <img src="img/001.jpg" alt=""> <h2>捶了美女{{ count }}下</h2> </div> `, data() { //局部或全局取件,一个组件可能会被复用多次,每个组件都应该有自己独立的变量名称空间 return { count: 0, } }, // 数据需要组件化,作为方法的返回值(方法执行后会产生一个局部作用域) methods: { fn() { console.log(this); this.count++; } } }; new Vue({ el: '#app', data: {}, components: { localTag, } });</script>
三、组件的传参(一)父传子- 子组件可以通过props自定义组件属性(采用反射机制,填写字符串,但是可以直接作为变量)
- 子组件会在父组件中渲染,渲染时,将父组件的变量绑定给子组件的自定义属性,从而将变量值传递给子组件
- 子组件可以通过props自定义组件属性(采用反射机制,填写字符串,但是可以直接作为变量)
- 子组件会在父组件中渲染,渲染时,将父组件的变量绑定给子组件的自定义属性,从而将变量值传递给子组件
<div id="app"> <localTag :sup_data1='sup_data1' :supData2='sup_data2'></localTag></div><script type="text/javascript"> let localTag = { props: ['dog', 'def', 'xyz'], props:['sup_data1', 'supdata2'], template: '<div>{{ sup_data1 }} {{ supdata2 }}</div>' }; new Vue({ el: '#app', data: { sup_data1: '数据1', sup_data2: '数据2' }, components: { localTag, } })</script>
(二)子传父- 通过发送事件请求的方式进行数据传递
- 自定义事件是属于子组件的,子组件在父组件中渲染并绑定事件方法,事件方法由父组件实现
- 子组件通过
this.@emit('自定义事件名',触发事件回调的参数)
触发自定义事件,将参数回调给父组件的事件方法 - 父组件触发事件方法获得传递的参数
this.@emit('自定义事件名',触发事件回调的参数)
触发自定义事件,将参数回调给父组件的事件方法<div id="app"> <global-tag @send_action='receiveAction'></global-tag></div><script type="text/javascript"> let localTag={ data () { return { sub_data1: "数据1", sub_data2: '数据2' } }, template: '<div @click="clickAction">发生</div>', methods: { clickAction () { this.$emit('send_action', this.sub_data1, this.sub_data2) } } } new Vue({ el: '#app', methods: { receiveAction (v1, v2) { console.log(v1, v2) } } })</script>
四、JS补充(一)与html命名转换- 在vue对象的指令语法中,如需要给标签添加style属性中的background-color 参数,那么在指令语法中要写成backgroundColor
- 在自定义组件时,组件名是驼峰体,则,在html页面的标签则是 -小写
- 在vue对象的指令语法中,如需要给标签添加style属性中的background-color 参数,那么在指令语法中要写成backgroundColor
- 在自定义组件时,组件名是驼峰体,则,在html页面的标签则是 -小写
# 1. 在vue对象的指令语法中,如需要给标签添加style属性中的background-color 参数,那么在指令语法中要写成backgroundColor<p :style="{backgroundColor:bgc,width:w}"></p># 2. 在自定义组件时,组件名是驼峰体,则,在html页面的标签则是 -小写# 在html页面的组件标签<my-tag></my-tag># script中的组件名let myTag{}
(一) JS中的循环遍历(1) for in
for in
遍历的是取值关键,意识是,遍历的是数组的索引或者对象的key
for in
for in
遍历的是取值关键,意识是,遍历的是数组的索引或者对象的key
// 例子let scores = [ { name: 'Bob', math: 97, chinese: 89, english: 67 }, { name: 'Tom', math: 67, chinese: 52, english: 98 }, { name: 'Jerry', math: 72, chinese: 87, english: 89 }, { name: 'Ben', math: 92, chinese: 87, english: 59 }, { name: 'Chan', math: 47, chinese: 85, english: 92 }, ];for (score in scores) { console.log(score) }// 打印结果:0 1 2 3 4
(2)for of
for of
遍历的是值,遍历的是数组的值,或对象的value
// 例子let scores = { name: 'Bob', math: 97, chinese: 89, english: 67 } ;for (score in scores) { console.log(score) }// 打印结果:name math chinese englishfor (score of scores) { console.log(score) }// 打印结果:Bob 97 89 67
(3) each
- 下面是jQuery中,each的用法
- 遍历数组时,需要注意
// 遍历数组let scores = ['a','b',['c','d'],'e'];each(scores,function(ind,val){ consol.log(ind,val)})// 打印结果:0,['a'] 1,['b'] 2,[['c','d']] 3,['e']// 遍历对象let scores = { name: 'Bob', math: 97, chinese: 89, english: 67 }each(scores,function(key,val){ consol.log(key,val)})// 打印结果:name,Bob math,97 chinese,89 english,67
(二) 加减运算和数据类型转换
js是一种弱语言,1. 相加:对于两数(一个字符串一个数字)相加,会先把两个数当成字符串相加,不行的话再都转成数字类型相加,都不行就是NaN2. 相减:对于两数(一个字符串一个数字)相减,因为字符串没有减法,所以会直接转成数字类型相减,不行的话就是NaN3. 字符串转成数字:如 '2' ——》 +'2' 或 Number('2')
(三) 可变长参数和- JS中没有关键字参数,所以只有类似python中的
*
号。只不过在JS中用...
来表示*
四、css补充
*
号。只不过在JS中用...
来表示*
1. 取消选中 user-select: none2. 鼠标变成小手 cursor:pointer