您的位置: 首页  >  IT文章  >  vue组件，vue补充和总结，JS循环遍历和加减运算、类型转换补充 一、vue中的组件 二、vue补充和总结 三、JS补充 四、css补充

vue组件，vue补充和总结，JS循环遍历和加减运算、类型转换补充 一、vue中的组件 二、vue补充和总结 三、JS补充 四、css补充

分类: IT文章 • 2024-07-06 10:31:31

目录

  • 组件是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 >
    	
        <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 {
             880px;
            margin: 0 auto;
        }

        .wrap:after {
            content: '';
            display: block;
            clear: both;
        }

        .box {
             200px;
            border-radius: 10px;
            overflow: hidden;
            background-color: #eee;
            float: left;
            margin: 10px;
        }

        .box img {
             100%;
        }

        .box h2 {
            text-align: center;
            font-weight: normal;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div >
    <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 {
             880px;
            margin: 0 auto;
        }

        .wrap:after {
            content: '';
            display: block;
            clear: both;
        }

        .box {
             200px;
            border-radius: 10px;
            overflow: hidden;
            background-color: #eee;
            float: left;
            margin: 10px;
        }

        .box img {
             200px;
            height: 240px;
        }

        .box h2 {
            text-align: center;
            font-weight: normal;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div >
    <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 >
      <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,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

相关推荐