Maison > Article > interface Web > Résumé des connaissances de base de Vue : développement de composants Vue
Cet article vous présente vueIl présente principalement les problèmes liés au développement de composants vue. Le développement de composants fournit une abstraction. Nous pouvons développer un petit composant indépendant et réutilisable pour construire notre Jetons un coup d'œil aux composants d'application ci-dessous. sera utile à tout le monde.
【Recommandations associées : Tutoriel vidéo javascript, front-end web】
La programmation fonctionnelle est une méthode de programmation qui intègre les opérations informatiques. sont traités comme des calculs de fonctions. Le fondement le plus important du langage de programmation fonctionnel est le calcul lambda, et les fonctions de calcul lambda peuvent accepter des fonctions en entrée (paramètres) et en sortie (valeurs de retour).
Par rapport à la programmation impérative, la programmation fonctionnelle souligne que le calcul des fonctions est plus important que l'exécution des instructions.
Par rapport à la programmation procédurale, le calcul des fonctions en programmation fonctionnelle peut être appelé à tout moment.
La fonction de filtre filtre automatiquement tous les éléments de l'objet et renvoie vrai avant qu'il ne soit stocké dans l'objet spécifié ;
La fonction Réduire résume tous les éléments à l'intérieur du tableau
<!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 => x<10).map(x => x*2).reduce((pre,n)=>pre+n); console.log(total) return total } } }) </script> </body> </html>
Vue utilise souvent des éléments de formulaire tels que et
<input type="text" v-model="message">
Le principe de mise en œuvre de la liaison bidirectionnelle dynamique v-model consiste essentiellement en deux opérations :
(1) v-bind lie un attribut de valeur
(2 ) L'instruction v-on lie l'événement d'entrée à l'élément actuel
<!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>
<!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>
<!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>
.
<!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>
<!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>
<!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>
<!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>
Les composants sont une idée importante dans Vue.js
Application d'idées basées sur des composants
<!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>
<!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>
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>
<!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实例数据,而且即便可以访问,如果将所有的数据都放在Vue实例中,Vue实例就会变得非常臃肿。
Vue组件应该有自己保存数据的地方。
组件自己的数据存放在哪里?
<!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>
在开发中,往往一些数据确实需要从上层传递到下层:
比如在一个页面中,我们从服务器请求到了很多的数据。
其中一部分数据,并非是我们整个页面的大组件来展示的,而是需要下面的子组件进行展示。
这个时候,并不会让子组件再次发送一个网络请求,而是直接让大组件(父组件)将数据传递给小组件(子组件)。
如何进行父子组件间的通信呢?Vue官方提到:
通过props向子组件传递数据
通过事件向父组件发送消息
在组件中,使用选项props来声明需要从父级接收到的数据。
props的值有两种方式:
方式一:字符串数组,数组中的字符串就是传递时的名称。
方式二:对象,对象可以设置传递时的类型,也可以设置默认值等。
<!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>
<!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>
效果展示
自定义事件方式完成子传父。
什么时候需要自定义事件呢?
当子组件需要向父组件传递数据时,就要用到自定义事件了。
我们之前学习的v-on不仅仅可以用于监听DOM事件,也可以用于组件间的自定义事件。
自定义事件的流程:
在子组件中,通过$emit()来触发事件。
在父组件中,通过v-on来监听子组件事件。
<!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>
【相关推荐:javascript视频教程、web前端】
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!