如何理解vue组件化开发，实例是怎样的
导读：今天这篇给大家分享的知识是“如何理解vue组件化开发，实例是怎样的”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，因此分享发大家做个参考，下文的讲解详细，步骤过程清晰，希望这篇“如何理解vue组件化开发，实例是怎样的”文章能帮助大家...
今天这篇给大家分享的知识是“如何理解vue组件化开发，实例是怎样的”,小编觉得挺不错的，对大家学习或是工作可能会有所帮助，因此分享发大家做个参考，下文的讲解详细，步骤过程清晰，希望这篇“如何理解vue组件化开发，实例是怎样的”文章能帮助大家解决问题。
一、函数式编程
1、函数式编程简介
函数式编程是种编程方式，它将电脑运算视为函数的计算。函数编程语言最重要的基础是λ演算（lambda calculus），而且λ演算的函数可以接受函数当作输入（参数）和输出（返回值）。
和指令式编程相比，函数式编程强调函数的计算比指令的执行重要。
和过程化编程相比，函数式编程里函数的计算可随时调用。
filter函数自动过滤对象的所有元素，返回true才会存入指定对象；
Reduce函数对数组内部的所有元素进行汇总；
2、代码实例
!DOCTYPE html>
html>
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 =>
x10).map(x =>
x*2).reduce((pre,n)=>
pre+n);
console.log(total)
return total
}
}
}
)
/script>
/body>
/html>
登录后复制 二、v-model
vue中经常使用到input> 和textarea> 这类表单元素，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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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官方提到：
通过props向子组件传递数据
通过事件向父组件发送消息
在组件中，使用选项props来声明需要从父级接收到的数据。
props的值有两种方式：
方式一：字符串数组，数组中的字符串就是传递时的名称。
方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。
2、父传子代码实例
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>
Title/title>
/head>
body>
div id="app">
!--cpn v-bind:cgirls="girls">
/cpn>
-->
!--cpn cgirls="girls" cmessage="message">
/cpn>
-->
cpn :cmessage="message" :cgirls="girls">
/cpn>
/div>
template id="cpn">
div>
ul>
li v-for="item in cgirls">
{
{
item}
}
/li>
/ul>
h2>
{
{
cmessage}
}
/h2>
/div>
/template>
script src="../js/vue.js">
/script>
script>
// 父传子: props
const cpn = {
template: '#cpn',
// props: ['cgirls', 'cmessage'],
props: {
// 1.类型限制
// cgirls: Array,
// cmessage: String,
// 2.提供一些默认值, 以及必传值
cmessage: {
type: String,
default: 'aaaaaaaa',
required: true
}
,
// 类型是对象或者数组时, 默认值必须是一个函数
cgirls: {
type: Array,
default() {
return []
}
}
}
,
data() {
return {
}
}
,
methods: {
}
}
const app = new Vue({
el: '#app',
data: {
message: 'CSDN哪吒',
girls: ['云韵', '比比东', '雅妃']
}
,
components: {
cpn
}
}
)
/script>
/body>
/html>
登录后复制 3、父传子效果展示
4、props中的驼峰标识
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>
Title/title>
/head>
body>
div id="app">
cpn :c-info="info" :child-my-message="message" v-bind:class>
/cpn>
/div>
template id="cpn">
div>
h2>
{
{
cInfo}
}
/h2>
h2>
{
{
childMyMessage}
}
/h2>
/div>
/template>
script src="../js/vue.js">
/script>
script>
const cpn = {
template: '#cpn',
props: {
cInfo: {
type: Object,
default() {
return {
}
}
}
,
childMyMessage: {
type: String,
default: ''
}
}
}
const app = new Vue({
el: '#app',
data: {
info: {
name: '哪吒',
age: 18,
height: 1.88
}
,
message: 'csdn博客专家'
}
,
components: {
cpn
}
}
)
/script>
/body>
/html>
登录后复制 效果展示
5、子传父（自定义事件方式）
自定义事件方式完成子传父。
什么时候需要自定义事件呢？
当子组件需要向父组件传递数据时，就要用到自定义事件了。
我们之前学习的v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件。
自定义事件的流程：
在子组件中，通过$emit()来触发事件。
在父组件中，通过v-on来监听子组件事件。
6、子传父代码实例
!DOCTYPE html>
html>
head>
meta charset="UTF-8">
title>
Title/title>
/head>
body>
!--父组件模板-->
div id="app">
cpn @item-click="cpnClick">
/cpn>
/div>
!--子组件模板-->
template id="cpn">
div>
button v-for="item in categories"
@click="btnClick(item)">
{
{
item.name}
}
/button>
/div>
/template>
script src="../js/vue.js">
/script>
script>
// 1.子组件
const cpn = {
template: '#cpn',
data() {
return {
categories: [
{
id: '1', name: '云韵'}
,
{
id: '2', name: '比比东'}
,
{
id: '3', name: '雅妃'}
,
{
id: '4', name: '纳兰嫣然'}
,
]
}
}
,
methods: {
btnClick(item) {
// 发射事件: 自定义事件
this.$emit('item-click', item)
}
}
}
// 2.父组件
const app = new Vue({
el: '#app',
data: {
message: 'csdn哪吒'
}
,
components: {
cpn
}
,
methods: {
cpnClick(item) {
console.log('cpnClick', item);
}
}
}
)
/script>
/body>
/html>
登录后复制 7、子传父效果展示
感谢各位的阅读，以上就是“如何理解vue组件化开发，实例是怎样的”的内容了，通过以上内容的阐述，相信大家对如何理解vue组件化开发，实例是怎样的已经有了进一步的了解，如果想要了解更多相关的内容，欢迎关注网络，网络将为大家推送更多相关知识点的文章。
声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！
若转载请注明出处： 如何理解vue组件化开发，实例是怎样的
本文地址： https://pptw.com/jishu/652444.html