vue组件，vue补充和总结，JS循环遍历和加减运算、类型转换补充
目录
一、vue中的组件
- 组件是vue最核心的东西
- 组件在
html文件中，只相当于一个占位符，真正渲染到浏览器上的是script标签中书写的组件中template成员定义的标签模板
1. 组件的概念
- 组件就是html、css与js的集合体，为该集合体命名，用该名字复用html、css与js组成的集合体 => 复用性
- 说白了，组件就是就是Vue对象，直接通
new Vue()产生的Vue对象是根组件，在根组件挂载的父标签内部的标签所对应的组件就是该根组件的子组件。
2. 组件分类
- 根组件
- 子组件（子组件必须放在根组件之前定义）
- 局部组件（局部组件需要导根组件中注册）
- 全局组件
3. 组件的特点
1）组件都有管理组件html页面结果的 template 实例成员，template中有且只有一个根标签
2）根组件都是作为最顶层父组件，局部与全局组件作为子组件，也可以成为其他局部与全局组件的父组件
3）子组件的数据需要隔离(数据组件化，每一个组件拥有自己数据的独立名称空间)，组件与组件之间数据是隔离的
4）局部组件必须注册后才能使用，全局组件不需要注册，提倡使用局部组件
5）组件中出现的所有变量（即模板中的、逻辑中的变量），由该组件自己提供管理
6) 局部、全局和根组件都是一个个Vue实例，一个实例对应一套html、css、js结构，所以实例就是组件，组件与组件之间数据是隔离的
1. 根组件，可以不明确template，template默认采用挂载点页面结构；如果设置的template，挂载点内部的内容无效，因为会被替换 2. html，body标签不能被替换，所以不能作为挂载点
4. 组件的定义
子组件必须放在根组件之前定义
# 在自定义组件时，组件名是驼峰体，则，在html页面的标签则是 -小写 # 在html页面的组件标签
<my-tag></my-tag> # script中的组件名
let myTag{}// 根组件定义
new Vue ({ 组件代码 }) // 局部组件定义
let 组件名 { 组件代码 } // 全局组件定义
Vue.components('组件名',{ 组件代码 })实例
<body>
<div id="app">
<div class="wrap">
// 可以多次渲染
<local-tag></local-tag>
<local-tag></local-tag>
// 可以多次渲染
<global-tag></global-tag>
<global-tag></global-tag>
</div>
</div>
</body>
// 局部组件**********************
let localTag = {
// template 中只能有一个根标签**********
template: `
<div class="box" @click="fn">
<img src="img/001.jpg" alt="">
<h2>美女</h2>
</div>
`,
methods: {
fn() {
console.log(this)
}
}
};
// 全局组件**********************
Vue.component('global-tag', {
template: `
<div class="box" @click="fn">
<img src="img/002.jpg" alt="">
<h2>大长腿</h2>
</div>
`,
methods: {
fn() {
console.log(this)
}
}
});
// 根组件**********************
new Vue({
el: '#app',
data: {},
components: { // 注册组件
localTag,
}
})
根组件和子组件的
{}内的写法基本相同，就是当做Vue对象来书写，只是子组件的data当做方法来写，并且有return返回值（为的就是让每一个子组件对象拥有独立的名称空间）。而根组件的data是当做属性来写。如下：// 根组件data
data:{} // 子组件data
data(){ return {} // 在return的大括号内写变量 }
5. 组件化
（1）用法和注意
- 数据需要组件化（即数据的渲染），需要用方法来修改更新（方法执行后会产生一个局部作用域，这样每个被复用的组件中的变量就可以区别开，展示不同的效果了）
（2）数据组件化实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>组件化</title>
<style>
body, h2 {
margin: 0;
}
.wrap {
width: 880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
}
.box img {
width: 100%;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap">
<!--数据组件化后，就可以让，每个自定义标签的数据独立-->
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
<local-tag></local-tag>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<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>
</html>
6. 组件传参——父传子
（1）用法和注意
1）子组件可以通过props自定义组件属性（采用反射机制，需要填写字符串，但是使用时可以直接作为变量） 2）子组件会在父组件中渲染，渲染时，将父组件的变量绑定给子组件的自定义属性，将可以将变量值传递给子组件
简单来说，就是通过给自定义组件在组件标签中添加属性变量，将属性变量作为媒介，子组件管理变量，父组件管理变量值。如：
<mytag :attr="value"></mytag>，子组件管理attr，父组件管理value这种方式只有父组件管理的变量值，在父组件中可以修改，而子组件管理的变量名只能进行读取操作，不能修改。所以不能向双向绑定一样，互相影响，所以只能是父传子，不能子传父。
（2）父传子实例
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>父传子</title>
<style>
body, h2 {
margin: 0;
}
.wrap {
width: 880px;
margin: 0 auto;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.box {
width: 200px;
border-radius: 10px;
overflow: hidden;
background-color: #eee;
float: left;
margin: 10px;
}
.box img {
width: 200px;
height: 240px;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap">
<local-tag v-for="dog in dogs" :dog="dog" def="12345" :xyz="dog.name"></local-tag>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let dogs = [
{
name: '二哈1号',
img: 'img/100.jpg',
},
{
name: '二哈2号',
img: 'img/200.jpg',
},
{
name: '二哈3号',
img: 'img/300.jpg',
},
{
name: '二哈4号',
img: 'img/400.jpg',
},
{
name: '二哈1号',
img: 'img/100.jpg',
},
{
name: '二哈2号',
img: 'img/200.jpg',
},
{
name: '二哈3号',
img: 'img/300.jpg',
},
{
name: '二哈4号',
img: 'img/400.jpg',
}
];
// 1）子组件可以通过props自定义组件属性（采用反射机制，需要填写字符串，但是使用时可以直接作为变量）
// 2）子组件会在父组件中渲染，渲染时，将父组件的变量绑定给子组件的自定义属性，将可以将变量值传递给子组件
let localTag = {
props: ['dog', 'def', 'xyz'],
template: `
<div class="box" @click="fn">
<img :src="dog.img" alt="">
<h2>捶{{ dog.name }}{{ count}}下</h2>
<!--<h3>{{ abc }}</h3>-->
<!--<h3>{{ def }}</h3>-->
<!--<h3>{{ xyz }}</h3>-->
</div>
`,
data() {
return {
count: 0,
}
},
methods: {
fn() {
console.log(this.dog);
this.count++;
}
}
};
new Vue({
el: '#app',
data: {
dogs,
},
components: {
localTag,
}
});
</script>
</html>
7. 组件传参——子传父
（1）用法和注意
- 简单说，子传父就是通过子组件自定义事件，再给这个事件传参，然后子组件管理事件名，父组件管理事件值，中间通过子组件传参和父组件接收参数进行子传父。如`<tag @action="actionFn"></tag>`，子组件管理`action`，在`action`事件中传参，父组件管理`actionFn`，并接收参数。
- 关键语法`this.$emit('action', this.t1, this.t2);`，`$emit`作用是让事件`action`触发。
### （2）子传父实例
```html
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>子传父</title>
</head>
<body>
<div id="app">
<h1>{{ h1 }}</h1>
<h3>{{ h3 }}</h3>
<!--自定义组件标签的事件
自定义事件是属于子组件的，子组件在父组件中渲染并绑定事件方法，所以事件方法由父组件来实现
子组件如何触发自定义事件：this.$emit('自定义事件名', 触发事件回调的参数们)
子组件触发自定义事件，携带出子组件的内容，在父组件中实现自定义事件的方法，拿到子组件传递给父组件的消息
-->
<tag @action="actionFn"></tag>
<hr>
<tag2 @h1a="aFn1" @h3a="aFn3"></tag2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let tag = {
template: `
<div>
<input type="text" v-model="t1">
<input type="text" v-model="t2">
<button @click="changeTitle">修改标题</button>
</div>
`,
data() {
return {
t1: '',
t2: '',
}
},
methods: {
changeTitle() {
if (this.t1 && this.t2) {
// console.log(this.t1, this.t2);
this.$emit('action', this.t1, this.t2);
this.t1 = '';
this.t2 = '';
}
}
}
};
let tag2 = {
template: `
<div>
主标题内容：<input type="text" v-model="t1" @input="t1Fn">
子标题内容：<input type="text" v-model="t2">
</div>
`,
data() {
return {
t1: '',
t2: '',
}
},
methods: {
t1Fn() {
this.$emit('h1a', this.t1);
}
},
watch: {
t2 () {
this.$emit('h3a', this.t2);
}
}
};
new Vue({
el: '#app',
data: {
h1: '主标题',
h3: '子标题'
},
components: {
tag,
tag2,
},
methods: {
actionFn(a, b, c) {
// console.log('触发了', a, b, c);
this.h1 = a;
this.h3 = b;
},
aFn1(a) {
if (!a) {
this.h1 = '主标题';
return;
}
this.h1 = a;
},
aFn3(a) {
if (!a) {
this.h3 = '子标题';
return;
}
this.h3 = a;
},
}
})
</script>
</html>
二、vue补充和总结
1. 补充
# 1. 在vue对象的指令语法中，如需要给标签添加style属性中的background-color 参数，那么在指令语法中要写成backgroundColor <p :style="{backgroundColor:bgc,width:w}"></p> # 2. 在自定义组件时，组件名是驼峰体，则，在html页面的标签则是 -小写 # 在html页面的组件标签
<my-tag></my-tag> # script中的组件名
let myTag{}
2. 总结
'''
实例成员：
el 挂载
data 声明变量，给变量赋值
methods 事件成员
computed 计算成员
watch 监听成员
filters 过滤成员
delimiters 分隔符，修改插值表达式的语法
props 子组件的组件标签添加属性时，用来反射属性值
template 模板成员
components 注册局部组件
指令：
{{}} 插值表达式
v-text 普通文本指令
v-html 能解析html代码的文本指令
v-once 让变量只解析一次的文本指令
v-on 事件指令
v-model 表单指令（用来双向绑定，是否选中）
v-bind 属性指令
v-if 条件指令（为false时，直接不在浏览器上显示代码）
v-show 条件指令（为false时，display:none来因此标签）
v-else-if 条件指令
v-else 条件指令
v-for 循环指令
v-cloak 斗篷指令（避免页面闪烁，原理：当加载到让含有 v-cloak 的标签时，先进行隐藏，等其中的vue相关执行完后，再进行展示）
'''
三、JS补充
1. JS中的循环遍历
（1） 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 english
for (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
2. 加减运算和数据类型转换
js是一种弱语言，
1. 相加：
对于两数（一个字符串一个数字）相加，会先把两个数当成字符串相加，不行的话再都转成数字类型相加，都不行就是NaN
2. 相减：
对于两数（一个字符串一个数字）相减，因为字符串没有减法，所以会直接转成数字类型相减，不行的话就是NaN
3. 字符串转成数字：
如 '2' ——》 +'2' 或 Number('2')
3. 可变长参数
- JS中没有关键字参数，所以只有类似python中的
*号。只不过在JS中用...来表示*
四、css补充
1. 取消选中
user-select: none
2. 鼠标变成小手
cursor：pointer
vue组件，vue补充和总结，JS循环遍历和加减运算、类型转换补充的更多相关文章
- JS 循环遍历JSON数据 分类： JS技术 JS JQuery 2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如：{"options":"[{
JS 循环遍历JSON数据 分类: JS技术 JS JQuery2010-12-01 13:56 43646人阅读 评论(5) 收藏 举报 jsonc JSON数据如:{"options&q ...
- webpack的单vue组件(.vue)加载sass配置
在通过vue-cli安装了webpack-simple 后,就自动安装好vue-loader了,但此时若写了含有sass的.vue组件,运行npm run dev时会报错.此时,需要我们在webpac ...
- 千锋教育Vue组件--vue基础的方法
课程地址: https://ke.qq.com/course/251029#term_id=100295989 <!DOCTYPE html> <html> <head& ...
- js循环遍历数组
一维数组的遍历 <script> //循环遍历数组 var animals = ["cat",'dog','human','whale','seal']; var an ...
- JS 循环遍历 总结
一.循环遍历语句 for...in... (ES5) 语法:javascript for(keys in obj){} 适用:遍历对象 说明: 1.keys表示obj对象的每一个键值对的键(键名),所 ...
- vue 组件内引入外部在线js、css
参考:https://blog.csdn.net/u010881899/article/details/80895661 例:引入element-ui js: mounted() { const oS ...
- Vue组件间通信：一个例子学会Vue组件-Vue.js学习总结）（转载）
详情请点击 http://www.jianshu.com/p/9ad1ba89a04b
- 三、深入Vue组件——Vue插槽slot、动态组件
一.插槽slot() 1.1简单插槽slot [功能]用于从父组件中,通过子组件写成双标签,向子组件中放入自定的内容 parent.vue [1]首先把child写成双标签样式,把要插入的内容放双标签 ...
- vue动态请求到的多重数组循环遍历，取值问题，如果某个值存在则显示，不存在则不显示。
数据结构: 需求:我在vue页面需要拿到url值并显示图片 代码写法: 注意:一定要判断否则拿到的large对象一直是空值, 那么img.large.url将会取不到值,会报 url 'undefi ...
随机推荐
- octave
1. octave, 如何求一元二次方程的解: 例如:· -3x-9y=18 · 4x+3y=12 命令: >>> A=[-3 -9; 4 3]; B=[18;12]; &g ...
- SqlException 服务器主体无法在当前安全上下文下访问数据库
遇到一个错误如下 System.Data.SqlClient.SqlException HResult=0x80131904 Message=服务器主体 "用户名" 无法在当前 ...
- Linux系列之ftp
ftp的详细用法,请访问https://www.cnblogs.com/juandx/p/3998418.html 1.Windows搭建IIS类型的ftp服务器 步骤 1.打开控制面板,接着打开程序 ...
- Ruby Rails学习中：调试信息和 Rails 的三种环境，Users 资源，调试器，Gravatar 头像和侧边栏
注册 一.调试信息和 Rails 环境 现在咱们要实现的用户资料页面是我们这个应用中第一个真正意义上的动态页面.虽然视图的代码不会动态改变, 不过每个用户资料页面显示的内容却是从数据库中读取的.添加动 ...
- 使用Iview时候 报：no-parsing-error Parsing error: x-invalid-end-tag 解决办法
解决办法有两种解决办法: 1.MenuItem修改为:menu-item 2.在根目录下 .eslintrc.js 文件 rules 下添加: "vue/no-parsing-error&q ...
- Jmeter安装及配置（含JDK安装）
(一)java环境配置1.官网下载64位的jdkhttp://www.oracle.com/technetwork/java/javase/downloads/index.html 2.环境变量设置变 ...
- 交替方向乘子法（ADMM）的原理和流程的白话总结
交替方向乘子法(ADMM)的原理和流程的白话总结 2018年08月27日 14:26:42 qauchangqingwei 阅读数 19925更多 分类专栏: 图像处理 作者:大大大的v链接:ht ...
- Asp.net core Enum as string + ef core value convertor
更新 : 2019-06-08 build in convertor https://docs.microsoft.com/en-us/ef/core/modeling/value-conversio ...
- vs 2013 设置website项目端口
vs 2015/2013 设置website项目端口 在web项目创建之后,当我想重新debug时,出现the port xxx is in use 错误. 经过netstat分析,发现占用此项目端口 ...
- jvm 中内存的栈和数据结构中的栈的区别
1.常见的数据结构:栈.队列.数组.链表和红黑树,java内存划分 2.JYM中的栈是先进先出,先入栈的先执行: 2.数据结构中的栈是先进后出,类似手枪的弹夹,先进入的子弹最后才发射: 3.数据结构中 ...