Vue基础知识总结 4：vue组件化开发(2)

于 2024-04-29 13:40:48 发布
阅读量280 收藏 8
点赞数 5
分类专栏： 程序员 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84434954/article/details/138310374
版权
2、代码实例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  {{totalPrice()}}
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    },
    methods :{
      totalPrice(){
        const nums = [10,9,21,16,7]
        let total = nums.filter(x => x<10).map(x => x*2).reduce((pre,n)=>pre+n);
        console.log(total)
        return total
      }
    }
  })
</script>
</body>
</html>

二、v-model

vue中经常使用到和这类表单元素，vue对于这些元素的数据绑定和我们以前经常用的jQuery有些区别。vue使用v-model实现这些标签数据的双向绑定，它会根据控件类型自动选取正确的方法来更新元素。

1、v-model双向绑定
<input type="text" v-model="message">

v-model动态双向绑定实现原理，本质上包含两个操作：

（1）v-bind绑定一个value属性

（2）v-on指令给当前元素绑定input事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- <input type="text" :value="message" v-on:input="valueChange"> 
  <input type="text" :value="message" @input="valueChange"> -->
  <input type="text" :value="message" @input="message = $event.target.value">
  {{message}}
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '哪吒'
    },
    methods: {
      valueChange(event){
        this.message = event.target.value;
      }
    }
  })
</script>
</body>
</html>
2、v-model和radio结合使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <label for="male">
    <!-- <input type="radio"id="male" name="sex" value="男"
           v-model="sex">男
    <input type="radio"id="female" name="sex" value="女"
           v-model="sex">女 -->
    <input type="radio"id="male" value="男" v-model="sex">男
    <input type="radio"id="female" value="女" v-model="sex">女
  </label>
  <h3>您选择的是：{{sex}}</h3>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      sex: '女'
    }
  })
</script>
</body>
</html>

3、v-model和CheckBox单选框结合使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- checkbox单选框 -->
  <label for="license">
    <input type="checkbox"id="license" v-model="isAgree">同意协议
  </label>
  <h3>您选择的是：{{isAgree}}</h3>
  <button :disabled="!isAgree">下一步</button>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      isAgree: false
    }
  })
</script>
</body>
</html>

4、v-model和CheckBox多选框结合使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- checkbox多选框 -->
  <input type="checkbox" value="比比东" v-model="girls">比比东
  <input type="checkbox" value="千仞雪" v-model="girls">千仞雪
  <input type="checkbox" value="美杜莎" v-model="girls">美杜莎
  <input type="checkbox" value="云韵" v-model="girls">云韵
  <input type="checkbox" value="雅妃" v-model="girls">雅妃
  <h3>您选择的是：{{girls}}</h3>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      girls: []
    }
  })
</script>
</body>
</html>

5、v-model结合select使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- 选择一个 -->
  <select name="abc" v-model="girl">
    <option value="云韵">云韵</option>
    <option value="比比东">比比东</option>
    <option value="雅妃">雅妃</option>
    <option value="千仞雪">千仞雪</option>
    <option value="美杜莎">美杜莎</option>
  </select>
  <h3>您的选择是：{{girl}}</h3>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      girl: '云韵'
    }
  })
</script>
</body>
</html>

6、v-for值绑定
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <label v-for="item in beautyGirls" :for="item">
    <input type="checkbox" :value="item"
           :id="item" v-model="girls">{{item}}
  </label>
  <h3>您的选择是：{{girls}}</h3>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      girls: [],//多选框
      beautyGirls: ["云韵","比比东","雅妃","纳兰嫣然","美杜莎"]
    }
  })
</script>
</body>
</html>

7、v-model修饰符的使用
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <!-- lazy懒加载，失去焦点时触发 -->
  <input type="text" v-model.lazy="message">
  <h2>{{message}}</h2>
 
  <!-- number:表示数字类型 -->
  <input type="number" v-model.number="age">
  <h2>{{age}} --> {{typeof age}}</h2>
 
  <!-- 去掉左右两边的控股 -->
  <input type="text" v-model.trim="name">
  <h2>{{name}}</h2>
</div>
 
<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: '哪吒',
      age: 0,
      name: '哪吒'
    }
  })
</script>
</body>
</html>

三、组件化开发

组件是Vue.js​中重要思想

  • 它提供了一种抽象, 我们可以开发出一个独立可复用的小组件来构造我们的应用组件
  • 可以扩展 HTML 元素，封装可重用的代码
  • 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树

组件化思想应用

  • 有了组件化的思想, 我们之后开发中就要充分的利用它
  • 尽可能将页面拆分成一个个小的, 可复用的组件
  • 这样让我们代码更方便组织和管理, 并且扩展性也强
1、全局组件
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <my-cpn></my-cpn>
</div>
 
<script src="../js/vue.js"></script>
<script>
 
  //1.创建组件化构造器对象
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是CSDN哪吒</p>
      </div>
      `
  })
 
  //2.注册组件
  Vue.component('my-cpn',cpnC)
 
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    }
  })
</script>
</body>
</html>
2、局部组件
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn></cpn>
</div>
 
<script src="../js/vue.js"></script>
<script>
 
  //1.创建组件化构造器对象
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是CSDN哪吒</p>
      </div>
      `
  })
 
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    },
    components: {
      cpn: cpnC
    }
  })
</script>
</body>
</html>

3、父子组件
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <cpn2></cpn2>
</div>
 
<script src="../js/vue.js"></script>
<script>
 
  //1.创建组件化构造器对象
  const cpnC1 = Vue.extend({
    template: `
      <div>
        <h2>我是标题1</h2>
        <p>我是CSDN哪吒</p>
      </div>
      `
  })
 
  const cpnC2 = Vue.extend({
    template: `
      <div>
        <h2>我是标题2</h2>
        <p>我是博客专家</p>
        <cpn1></cpn1>
      </div>
      `,
    components: {
      cpn1: cpnC1
    }
  })
 
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    },
    components: {
      cpn2: cpnC2
    }
  })
</script>
</body>
</html>

4、组件化语法糖写法

vue为了简化注册组件的过程，提供了语法糖的写法，主要是省去了调用Vue.extend()的步骤，直接使用一个对象替代。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <my-cpn></my-cpn>
</div>
 
<script src="../js/vue.js"></script>
<script>
  //注册组件语法糖写法
  Vue.component('my-cpn',{
    template: `
      <div>
        <h2>我是标题</h2>
        <p>我是CSDN哪吒</p>
      </div>
      `
  })
 
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好'
    }
  })
</script>
</body>
</html>
5、组件模板抽离写法
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 
<div id="app">
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
 
<!--1.script标签, 注意:类型必须是text/x-template-->
<!--<script type="text/x-template" id="cpn">-->
<!--<div>-->
<!--<h2>我是标题</h2>-->
<!--<p>我是CSDN哪吒</p>-->
<!--</div>-->
<!--</script>-->
 
<!--2.template标签-->
<template id="cpn">
  <div>
    <h2>我是标题</h2>
    <p>我是CSDN哪吒</p>
  </div>
</template>
 
<script src="../js/vue.js"></script>
<script>
 
  // 1.注册一个全局组件
  Vue.component('cpn', {
    template: '#cpn'
  })
 
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好啊'
    }
  })
</script>
 
</body>
</html>

四、组件可以访问Vue实例数据吗？

1、简介

实验发现，组件不能访问Vue实例数据，而且即便可以访问，如果将所有的数据都放在Vue实例中，Vue实例就会变得非常臃肿。

Vue组件应该有自己保存数据的地方。

组件自己的数据存放在哪里？

  • 组件对象也有一个data属性（也有method等属性）；
  • 只是这个data属性必须是一个函数；
  • 而且这个函数返回一个对象，对象内部保存着数据；
2、代码实例
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
 
<div id="app">
  <cpn></cpn>
</div>
<template id="cpn">
  <div>
    <h2>{{title}}</h2>
    <p>我是热门</p>
  </div>
</template>
 
<script src="../js/vue.js"></script>
<script>
 
  // 1.注册一个全局组件
  Vue.component('cpn', {
    template: '#cpn',
    data() {
      return {
        title: '哪吒必胜'
      }
    }
  })
 
  const app = new Vue({
    el: '#app',
    data: {
      message: '你好',
      // title: '我是标题'
    }
  })
</script>
 
</body>
</html>
3、效果展示

五、父子组件通信

1、父子组件通信简介

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

// title: ‘我是标题’
}
})

```
3、效果展示

五、父子组件通信

1、父子组件通信简介

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？
[外链图片转存中…(img-80Kzy80b-1714369237625)]

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

2401_84434954
关注
专栏目录
Vue——组件化开发
鹿蹊zz的博客
08-09 2357
我们在复用组件的时候肯定希望，各自组件用各自的变量，如果确实需要都用一样的，可以全局组件注册，也可以是用vuex来进行状态管理。注意：组件就是一个vue实例，vue实例的属性，组件也可以有，例如data、methods、computed等。的count是各自用各自的，像局部变量一样有块级作用域，这个块级就是vue组件的作用域。​ 父组件访问子组件，有时候需要直接操作子组件的方法，或是属性，此时需要用到。​ 组件的思想是复用，定义组件当然是把通用的公共的东西抽出来复用。并不保证顺序，也不是响应式的。...
前端组件开发入门
08-31
前端组件开发入门
前端组件化开发
chenchun的博客
11-28 2万+
Component，中文称为组件，或者构件。使用非常比较广泛，它的核心意义在于复用，相对模块，对于依赖性有更高的要求。 Module, 中文为模块或模组。它的核心意义是分离职责，属于代码级模块化的产出。它本身是提供服务的功能逻辑，是一组具有一定内聚性代码的组合，职责明确。 组件(Component)和模块(Module)又是一对容易混淆的名词，也常常被用来相互替换。个人总结，从设计上来看，组件强
前端 开发组件
xieyaofeng的博客
12-22 193
1https://element.eleme.cn/#/zh-CN/component/time-picker#methods 2https://avuejs.com/component/radio.html
前端 开发 组件库
zzh990822的博客
03-08 1171
方便vue 开发的组件库
Vue的组件化编程
热门推荐
暗武逢天的博客
07-11 2万+
Vue组件化
2024年Vue基础知识总结 4：vue组件化开发，ui前端开发学习课程-vue 全局组件
07-06
前端组件学习 2024年Vue基础知识总结 4：vue组件化开发，ui前端开发学习课程_vue 全局组件
Vue.js组件开发示例：创建TodoList应用
最新发布
10-01
使用场景及目标：适合于希望了解并掌握前端应用架构及开发技巧的人士，特别是希望通过实战项目熟悉Vue.js及其特性如组件化思想、数据驱动视图、自定义事件的应用。 阅读建议：读者应当依照步骤实施，重点关注代码...
知识领域: 前端开发 技术关键词: Vue.js、React、Angular 内容关键词: 单页面应用、组件化开发、状态管理
04-18
知识领域: 前端开发 ...内容关键词: 单页面应用、组件化开发、状态管理 用途: 构建现代的交互式Web界面，提升用户体验 资源描述: "Vue Mastery"提供了高质量的Vue.js教程，从入门到高级，涵盖了各种方面的前端开发。
Vue组件开发技巧总结
08-27
Vue 组件开发技巧总结 本篇文章将对 Vue 组件开发的相关技巧进行总结...本篇文章对 Vue 组件开发的相关技巧进行了总结，通过代码示例详细分析了 Vue 组件开发的相关知识点，为读者提供了一个系统的 Vue 组件开发指南。
Vue（组件化编程：非单文件组件、单文件组件）
weixin_57920269的博客
04-29 1926
组件理解，非单文件组件和单文件组件
Vue组件化编程
weixin_55743273的博客
04-01 1013
文章目录前言一、使用组件的步骤二、单文件组件三、VueComponent 前言 Vue组件化编程能更好的复用编码，简化项目编码，提高运行效率。 一、使用组件的步骤 1.定义（创建）组件 使用Vue.extend（option）创建 2.注册组件 （1）局部注册：靠new Vue的时候传入components选项 （2）全局注册：靠Vue.component(‘组件名’,组件) 3.使用组件(写组件标签) 二、单文件组件 1.为每个功能部分创建一个Vue文件 vue文件里面包括了： （1） （2）三、VueC
Vue 组件化编程
程序三两行
07-20 347
vue组件化编程
vue组件化编程
yfy的博客
12-09 580
组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 1. 使用vue-cli创建模板项目 1.1 简介 1) vue-cli 是 vue 官方提供的脚手架工具 2) github: https://github.com/vuejs/vue-cli 3) 作用: 从 https://github.com/vuejs-tem.
【Vue】组件化编程
m0_48982503的博客
03-21 1151
组件的基本认识(非单文件组件): 使用组件的三大步骤： 一、定义组件(创建组件) 二、注册组件 1.局部注册： 2.全局注册： 三、使用组件(写组件标签) 关于组件名: 组件的嵌套： VueComponent构造函数 关于this指向： Vue与VueComponent的内置关系 ​ 单文件组件： 基本结构：
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值