Summary of Vue basic knowledge: Vue component development

This article brings you about vue It mainly introduces issues related to vue component development. Component development provides an abstraction. We can develop an independent and reusable We use small components to construct our application components. Let’s take a look at them. I hope it will be helpful to everyone.

[Related recommendations: javascript video tutorial, web front-end】

1. Functional programming

1. Introduction to functional programming

Functional programming is a programming method that treats computer operations as calculations of functions. The most important foundation of functional programming language is lambda calculus, and lambda calculus functions can accept functions as input (parameters) and output (return values).

Compared with imperative programming, functional programming emphasizes that the calculation of functions is more important than the execution of instructions.

Compared with procedural programming, function calculations in functional programming can be called at any time.

The filter function automatically filters all elements of the object, and returns true before it is stored in the specified object;

The Reduce function summarizes all elements inside the array;

2. Code examples

nbsp;html>


  <meta>
  <title>Title</title>


<div>
  {{totalPrice()}}
</div>
 
<script></script>
<script>
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好&#39;
    },
    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>

2. v-model

Form elements such as <input> and are often used in vue. Vue has data for these elements. Binding is somewhat different from the jQuery we often used before. Vue uses v-model to implement two-way binding of these tag data. It will automatically select the correct method to update elements based on the control type.

1. v-model two-way binding

<input>

The implementation principle of v-model dynamic two-way binding essentially consists of two operations:

(1) v-bind binds a value attribute

(2) The v-on instruction binds the input event to the current element

nbsp;html>


  
  



  
  <input>
  {{message}}

 
<script></script>
<script>
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;哪吒&#39;
    },
    methods: {
      valueChange(event){
        this.message = event.target.value;
      }
    }
  })
</script>

2, v-model and radio are used together

nbsp;html>


  
  



  
    
    <input>男
    <input>女
  
  
您选择的是：{{sex}}

 
<script></script>
<script>
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好&#39;,
      sex: &#39;女&#39;
    }
  })
</script>

3, v-model and CheckBox radio button are used together

nbsp;html>


  
  



  
  
    <input>同意协议
  
  
您选择的是：{{isAgree}}
  下一步

 
<script></script>
<script>
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好&#39;,
      isAgree: false
    }
  })
</script>

4. Use v-model in combination with CheckBox multi-select box

nbsp;html>


  
  



  
  <input>比比东
  <input>千仞雪
  <input>美杜莎
  <input>云韵
  <input>雅妃
  
您选择的是：{{girls}}

 
<script></script>
<script>
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好&#39;,
      girls: []
    }
  })
</script>

##5. Use v-model in combination with select

nbsp;html>


  <meta>
  <title>Title</title>


<div>
  <!-- 选择一个 -->
  <select>
    <option>云韵</option>
    <option>比比东</option>
    <option>雅妃</option>
    <option>千仞雪</option>
    <option>美杜莎</option>
  </select>
  <h3 id="您的选择是-girl">您的选择是：{{girl}}</h3>
</div>
 
<script></script>
<script>
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好&#39;,
      girl: &#39;云韵&#39;
    }
  })
</script>

6. v-for value binding

nbsp;html>


  
  



  
    <input>{{item}}
  
  
您的选择是：{{girls}}

 
<script></script>
<script>
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好&#39;,
      girls: [],//多选框
      beautyGirls: ["云韵","比比东","雅妃","纳兰嫣然","美杜莎"]
    }
  })
</script>

##7. Use of v-model modifier

nbsp;html>


  
  



  
  <input>
  
{{message}}
 
  
  <input>
  
{{age}} --> {{typeof age}}
 
  
  <input>
  
{{name}}

 
<script></script>
<script>
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;哪吒&#39;,
      age: 0,
      name: &#39;哪吒&#39;
    }
  })
</script>

3. Component development

Components are an important idea in Vue.js

It provides an abstraction, and we can develop an independent and repeatable Use small components to construct our application components

• Can extend HTML elements and encapsulate reusable code
• The component system allows us to use independent reusable small components to build large applications. The interface of almost any type of application can be abstracted into a component tree
• Component-based thinking application

With the component-based thinking, we must fully implement it in our future development Use it

• Split the page into small, reusable components as much as possible
• This makes our code more convenient to organize and manage, and has strong scalability

1. Global component

nbsp;html>


  <meta>
  <title>Title</title>


<div>
  <my-cpn></my-cpn>
</div>
 
<script></script>
<script>
 
  //1.创建组件化构造器对象
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题
        <p>我是CSDN哪吒
      
      `
  })
 
  //2.注册组件
  Vue.component(&#39;my-cpn&#39;,cpnC)
 
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好&#39;
    }
  })
</script>

2. Local component

nbsp;html>


  <meta>
  <title>Title</title>


<div>
  <cpn></cpn>
</div>
 
<script></script>
<script>
 
  //1.创建组件化构造器对象
  const cpnC = Vue.extend({
    template: `
      <div>
        <h2>我是标题
        <p>我是CSDN哪吒
      
      `
  })
 
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好&#39;
    },
    components: {
      cpn: cpnC
    }
  })
</script>

3. Parent-child component

nbsp;html>


  <meta>
  <title>Title</title>


<div>
  <cpn2></cpn2>
</div>
 
<script></script>
<script>
 
  //1.创建组件化构造器对象
  const cpnC1 = Vue.extend({
    template: `
      <div>
        <h2>我是标题1
        <p>我是CSDN哪吒
      
      `
  })
 
  const cpnC2 = Vue.extend({
    template: `
      <div>
        <h2>我是标题2
        <p>我是博客专家
        <cpn1>
      
      `,
    components: {
      cpn1: cpnC1
    }
  })
 
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好&#39;
    },
    components: {
      cpn2: cpnC2
    }
  })
</script>

4、组件化语法糖写法

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

nbsp;html>


  <meta>
  <title>Title</title>


<div>
  <my-cpn></my-cpn>
</div>
 
<script></script>
<script>
  //注册组件语法糖写法
  Vue.component(&#39;my-cpn&#39;,{
    template: `
      <div>
        <h2>我是标题
        <p>我是CSDN哪吒
      
      `
  })
 
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好&#39;
    }
  })
</script>

5、组件模板抽离写法

nbsp;html>


  <meta>
  <title>Title</title>


 
<div>
  <cpn></cpn>
  <cpn></cpn>
  <cpn></cpn>
</div>
 
<!--1.script标签, 注意:类型必须是text/x-template-->
<!--<script type="text/x-template" id="cpn">-->
<!--<div>-->
<!--<h2 id="我是标题">我是标题</h2>-->
<!--<p>我是CSDN哪吒</p>-->
<!--</div>-->
<!--</script>-->
 
<!--2.template标签-->
<template>
  <div>
    <h2 id="我是标题">我是标题</h2>
    <p>我是CSDN哪吒</p>
  </div>
</template>
 
<script></script>
<script>
 
  // 1.注册一个全局组件
  Vue.component(&#39;cpn&#39;, {
    template: &#39;#cpn&#39;
  })
 
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好啊&#39;
    }
  })
</script>
 

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

1、简介

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

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

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

• 组件对象也有一个data属性（也有method等属性）；
• 只是这个data属性必须是一个函数；
• 而且这个函数返回一个对象，对象内部保存着数据；

2、代码实例

nbsp;html>


  <meta>
  <title>Title</title>


 
<div>
  <cpn></cpn>
</div>
<template>
  <div>
    <h2 id="title">{{title}}</h2>
    <p>我是热门</p>
  </div>
</template>
 
<script></script>
<script>
 
  // 1.注册一个全局组件
  Vue.component(&#39;cpn&#39;, {
    template: &#39;#cpn&#39;,
    data() {
      return {
        title: &#39;哪吒必胜&#39;
      }
    }
  })
 
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;你好&#39;,
      // title: &#39;我是标题&#39;
    }
  })
</script>
 

3、效果展示 

五、父子组件通信

1、父子组件通信简介

在开发中，往往一些数据确实需要从上层传递到下层：

比如在一个页面中，我们从服务器请求到了很多的数据。

其中一部分数据，并非是我们整个页面的大组件来展示的，而是需要下面的子组件进行展示。

这个时候，并不会让子组件再次发送一个网络请求，而是直接让大组件(父组件)将数据传递给小组件(子组件)。

如何进行父子组件间的通信呢？Vue官方提到：

通过props向子组件传递数据

通过事件向父组件发送消息

在组件中，使用选项props来声明需要从父级接收到的数据。

props的值有两种方式：

方式一：字符串数组，数组中的字符串就是传递时的名称。

方式二：对象，对象可以设置传递时的类型，也可以设置默认值等。

2、父传子代码实例

nbsp;html>


  <meta>
  <title>Title</title>


 
<div>
  <!--<cpn v-bind:cgirls="girls"></cpn>-->
  <!--<cpn cgirls="girls" cmessage="message"></cpn>-->
 
  <cpn></cpn>
</div>
 
<template>
  <div>
    <ul>
      <li>{{item}}</li>
    </ul>
    <h2 id="cmessage">{{cmessage}}</h2>
  </div>
</template>
 
<script></script>
<script>
  // 父传子: props
  const cpn = {
    template: &#39;#cpn&#39;,
    // props: [&#39;cgirls&#39;, &#39;cmessage&#39;],
    props: {
      // 1.类型限制
      // cgirls: Array,
      // cmessage: String,
 
      // 2.提供一些默认值, 以及必传值
      cmessage: {
        type: String,
        default: &#39;aaaaaaaa&#39;,
        required: true
      },
      // 类型是对象或者数组时, 默认值必须是一个函数
      cgirls: {
        type: Array,
        default() {
          return []
        }
      }
    },
    data() {
      return {}
    },
    methods: {
 
    }
  }
 
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;CSDN哪吒&#39;,
      girls: [&#39;云韵&#39;, &#39;比比东&#39;, &#39;雅妃&#39;]
    },
    components: {
      cpn
    }
  })
</script>

3、父传子效果展示 

4、props中的驼峰标识

nbsp;html>


  <meta>
  <title>Title</title>


 
<div>
  <cpn></cpn>
</div>
 
<template>
  <div>
    <h2 id="cInfo">{{cInfo}}</h2>
    <h2 id="childMyMessage">{{childMyMessage}}</h2>
  </div>
</template>
 
<script></script>
<script>
  const cpn = {
    template: &#39;#cpn&#39;,
    props: {
      cInfo: {
        type: Object,
        default() {
          return {}
        }
      },
      childMyMessage: {
        type: String,
        default: &#39;&#39;
      }
    }
  }
 
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      info: {
        name: &#39;哪吒&#39;,
        age: 18,
        height: 1.88
      },
      message: &#39;csdn博客专家&#39;
    },
    components: {
      cpn
    }
  })
</script>
 

效果展示 

5、子传父（自定义事件方式）

自定义事件方式完成子传父。

什么时候需要自定义事件呢？

当子组件需要向父组件传递数据时，就要用到自定义事件了。

我们之前学习的v-on不仅仅可以用于监听DOM事件，也可以用于组件间的自定义事件。

自定义事件的流程：

• 在子组件中，通过$emit()来触发事件。

• 在父组件中，通过v-on来监听子组件事件。

6、子传父代码实例

nbsp;html>


  <meta>
  <title>Title</title>


 
<!--父组件模板-->
<div>
  <cpn></cpn>
</div>
 
<!--子组件模板-->
<template>
  <div>
    <button>
      {{item.name}}
    </button>
  </div>
</template>
 
<script></script>
<script>
 
  // 1.子组件
  const cpn = {
    template: &#39;#cpn&#39;,
    data() {
      return {
        categories: [
          {id: &#39;1&#39;, name: &#39;云韵&#39;},
          {id: &#39;2&#39;, name: &#39;比比东&#39;},
          {id: &#39;3&#39;, name: &#39;雅妃&#39;},
          {id: &#39;4&#39;, name: &#39;纳兰嫣然&#39;},
        ]
      }
    },
    methods: {
      btnClick(item) {
        // 发射事件: 自定义事件
        this.$emit(&#39;item-click&#39;, item)
      }
    }
  }
 
  // 2.父组件
  const app = new Vue({
    el: &#39;#app&#39;,
    data: {
      message: &#39;csdn哪吒&#39;
    },
    components: {
      cpn
    },
    methods: {
      cpnClick(item) {
        console.log(&#39;cpnClick&#39;, item);
      }
    }
  })
</script>
 

7、子传父效果展示

【相关推荐：javascript视频教程、web前端】

The above is the detailed content of Summary of Vue basic knowledge: Vue component development. For more information, please follow other related articles on the PHP Chinese website!