做電子傳單的網站如何建網站教程
| 1. 應用動態(tài)props傳遞數(shù)據(jù)，輸出影片的圖片、名稱和描述等信息【要求使用props】，效果圖如下：
2.在頁面中定義一個按鈕和一行文本，通過單擊按鈕實現(xiàn)放大文本的功能?！疽笫褂?emit()】
?? 代碼可以截圖或者復制黏貼放置在“實驗步驟及實驗結果”中 |
<script type="text/javascript"> //注冊全局組件 Vue.component('my-movie', { ? ? //補充完整，傳遞動態(tài)Prop ? ? props:['img','name','description'], ? ? template : '<div> \ ? ? ? ? <img :src="img"> \ ? ? ? ? <div class="movie_name">{{name}}</div> \ ? ? ? ? <div class="movie_des">{{description}}</div> \ ? ? ? </div>' }) //創(chuàng)建根實例 var vm = new Vue({ ? ? el:'#example', ? ? data: { ? ? ? ? ? ? ? ? ? ? img1: '1.jpg', ? ? ? ? ? ? ? ? ? name: '我是傳奇', ? ? ? ? ? ? ? ? ? description: '末世科幻動作電影' ? ? ? ? ? ? } })
<script> ? ? var vm = new Vue({ ? ? ? ? el: '#app', ? ? ? ? data:{ ? ? ? ? ? ? postFontSize1:10 ? ? ? ? }, ? ? ? ? methods: { ? ? ? ? ? ? showMsg(data) { ? ? ? ? ? ? ? ? this.postFontSize1 = data ? ? ? ? ? ? } ? ? ? ? }, ? ? ? ? components: { ? ? ? ? ? ? 'childNode': { ? ? ? ? ? ? ? ? template: '#child', ? ? ? ? ? ? ? ? data() { ? ? ? ? ? ? ? ? ? ? return { ? ? ? ? ? ? ? ? ? ? ? ? postFontSize: 10 ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? methods: { ? ? ? ? ? ? ? ? ? ? add() { ? ? ? ? ? ? ? ? ? ? ? ? this.postFontSize++; ? ? ? ? ? ? ? ? ? ? ? ? this.$emit('show', this.postFontSize) ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? } ? ? ? ? } ? ? }) </script> |
| 1. 應用動態(tài)props傳遞數(shù)據(jù)，輸出影片的圖片、名稱和描述等信息
圖1 2. 在頁面中定義一個按鈕和一行文本，通過單擊按鈕實現(xiàn)放大文本的功能。
圖2 |
| 1. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>輸出影片信息</title> <style> body{ font-family:微軟雅黑} img{ width:240px; height:172px;} .movie_name{padding-left:10px; font-size:18px; color: #333333; margin-top:8px;} .movie_des{padding-left:10px; font-size:14px; color: #7a7a7a; margin-top:5px;} </style> <script src="vue.js"></script> </head> <body> <div id="example"> ? ? <!-- 補充完整 --> ? ? <my-movie v-bind:img="img1" :name="name" :description="description"></my-movie> </div> <script type="text/javascript"> //注冊全局組件 Vue.component('my-movie', { ? ? //補充完整，傳遞動態(tài)Prop ? ? props:['img','name','description'], ? ? template : '<div> \ ? ? ? ? <img :src="img"> \ ? ? ? ? <div class="movie_name">{{name}}</div> \ ? ? ? ? <div class="movie_des">{{description}}</div> \ ? ? ? </div>' }) //創(chuàng)建根實例 var vm = new Vue({ ? ? el:'#example', ? ? data: { ? ? ? ? ? ? ? ? ? ? img1: '1.jpg', ? ? ? ? ? ? ? ? ? name: '我是傳奇', ? ? ? ? ? ? ? ? ? description: '末世科幻動作電影' ? ? ? ? ? ? } }) </script> </body> </html>
2. <!DOCTYPE html> <html lang="en"> <head> ? ? <meta charset="UTF-8"> ? ? <title>子向父通信</title> ? ? <script src="vue.js"></script> </head> <body> <div id="app"> ? ? <child-node v-on:show="showMsg"></child-node> ? ? <div :style="{ fontSize: postFontSize1 + 'px' }"> ? ? ? ? 我是內容<br> ? ? ? ? ? ? </div> ? ? </div> <template id="child"> ? ? <div> ? ? ? ? <button @click="add">增加</button><br> ? ? ? ? ? ? </div> </template> <script> ? ? var vm = new Vue({ ? ? ? ? el: '#app', ? ? ? ? data:{ ? ? ? ? ? ? postFontSize1:10 ? ? ? ? }, ? ? ? ? methods: { ? ? ? ? ? ? showMsg(data) { ? ? ? ? ? ? ? ? this.postFontSize1 = data ? ? ? ? ? ? } ? ? ? ? }, ? ? ? ? components: { ? ? ? ? ? ? 'childNode': { ? ? ? ? ? ? ? ? template: '#child', ? ? ? ? ? ? ? ? data() { ? ? ? ? ? ? ? ? ? ? return { ? ? ? ? ? ? ? ? ? ? ? ? postFontSize: 10 ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? ? ? methods: { ? ? ? ? ? ? ? ? ? ? add() { ? ? ? ? ? ? ? ? ? ? ? ? this.postFontSize++; ? ? ? ? ? ? ? ? ? ? ? ? this.$emit('show', this.postFontSize) ? ? ? ? ? ? ? ? ? ? ? } ? ? ? ? ? ? ? ? }, ? ? ? ? ? ? } ? ? ? ? } ? ? }) </script> </body> </html> |
