この記事では vue について紹介します vue コンポーネント開発に関連する問題を主に紹介します。コンポーネント開発は抽象化を提供します。独立した再利用可能なコンポーネントを開発できます。アプリケーション コンポーネントを構築するために小さなコンポーネントを使用します。見てみましょう。皆さんのお役に立てれば幸いです。
[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]
関数型プログラミングとは、コンピューターの操作を関数の計算として扱うプログラミング手法です。関数型プログラミング言語の最も重要な基礎はラムダ計算であり、ラムダ計算関数は入力 (パラメーター) および出力 (戻り値) として関数を受け入れることができます。
命令型プログラミングと比較して、関数型プログラミングでは、命令の実行よりも関数の計算が重要であることが強調されています。
手続き型プログラミングと比較して、関数型プログラミングの関数計算はいつでも呼び出すことができます。
filter 関数は、オブジェクトのすべての要素を自動的にフィルターし、指定されたオブジェクトに格納される前に true を返します。
Reduce 関数は、配列内のすべての要素を要約します。
<!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>
や
<input type="text" v-model="message">
v-model 動的双方向バインディングの実装原理は、基本的に 2 つの操作で構成されます。
(1) v-bind は値属性をバインドします
(2) v-on 命令は入力イベントを現在の要素にバインドします
<!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>
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 の使用modifier
<!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>
コンポーネントは抽象化を提供し、独立したコンポーネントを開発できます。小さなコンポーネントを使用してアプリケーション コンポーネントを構築します。
コンポーネント ベースの思考を今後の開発で完全に実装する必要があります。使用してください
<!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>
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>
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前端】
以上がVue の基礎知識のまとめ: Vue コンポーネント開発の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。