คำนำ
ในบทก่อนหน้าเราประสบความสำเร็จในการแสดงหน้ารายการผ่านการก่อสร้างขั้นพื้นฐาน อย่างไรก็ตามมีปัญหามากมาย ในบทนี้เราจะแก้ปัญหาเหล่านี้
ใช้ V-bind เพื่อผูกข้อมูล
ในบทก่อนหน้าเราแสดงหน้า อย่างไรก็ตามหากเปิดคอนโซลคุณจะพบข้อผิดพลาด ดังที่แสดงในรูปด้านล่าง:
นี่เป็นเพราะเมื่อหน้าเข้ามารหัส HTML ของเราจะถูกเรียกใช้ก่อนและในเวลานี้ Vue ของเราไม่ได้เริ่มทำงาน รหัสของเรามีดังนี้:
<li v-for = "ข้อมูลในข้อมูล"> <i> <img src = "{{info.author.avatar_url}}"> <span> {info.author.loginname}} </span> }} "> {{info.title}} </a> </li>ดังที่ได้กล่าวไว้ข้างต้นเมื่อหน้าวิเคราะห์ src = "{{info.author.avatar_url}}" แน่นอนว่าไม่พบเส้นทางภาพนี้ ดังนั้นข้อผิดพลาดจะเกิดขึ้นตามธรรมชาติ ดังนั้นเราต้องประมวลผลรหัสนี้ เราปรับเปลี่ยนเป็น
<img v-bind: src = "info.author.avatar_url" v-bind: alt = "info.author.loginname">
ตกลงเรามารีเฟรชหน้าคราวนี้ไม่มีข้อผิดพลาด
คะแนนความรู้ Vue
แอตทริบิวต์การเชื่อมโยง v-bind http://vuejs.org.cn/api/#v-bind
เติมเต็ม:
ในความเป็นจริงเมื่อเราเปิดหน้าเรายังสามารถเห็นเนื้อหา {{... }} เหล่านี้ในทันที แม้ว่าสิ่งนี้จะไม่รายงานข้อผิดพลาด แต่ก็ยังคงส่งผลกระทบต่อประสบการณ์ผู้ใช้เล็กน้อย ในเวลานี้เราสามารถใช้ข้อความ V เพื่อส่งออกเนื้อหาเหล่านี้ ดังกล่าวข้างต้นเราแก้ไขรหัสเป็นสิ่งต่อไปนี้:
<li v-for = "ข้อมูลในข้อมูล"> <i> <img v-bind: src = "info.author.avatar_url" v-bind: alt = "info.author.loginname"> <span v-text = "info.author.loginName"> </ href = "content.html? {{info.id}}" v-text = "info.title"> </a> </li>เมื่อเราปรับเปลี่ยนรหัสไปยังสิ่งนี้ปัญหาทั้งหมดจะได้รับการแก้ไข
คะแนนความรู้ Vue
ข้อความเอาท์พุท V- ข้อความ http://vuejs.org.cn/api/#v-text
สวยงามเวลา
รูปแบบเวลาที่เราได้รับจากอินเทอร์เฟซเป็นเช่นนี้ 2016-06-12T06: 17: 35.453Z เห็นได้ชัดว่านี่ไม่ใช่ผลกระทบที่เราต้องการ เอฟเฟกต์ที่เราต้องการควรเป็นเช่นนี้เมื่อเผยแพร่เมื่อ 2 ชั่วโมงที่ผ่านมา ทำอย่างไร?
เราต้องการฟังก์ชั่นซึ่งใช้เพื่อให้สตริงดั้งเดิมแล้วส่งคืนสตริงที่เราต้องการ
หลักการของฟังก์ชั่นนี้ไม่ใช่จุดสนใจของเรา ฉันจะไม่อธิบายที่นี่ ฉันแค่ดูรหัสดังนี้:
ฟังก์ชั่น goodtime (str) {var now = new date (). getTime (), oldtime = วันใหม่ (str) .gettime (), ความแตกต่าง = ตอนนี้ - เก่า, ผลลัพธ์ = '', นาที = 1,000 * 60, ชั่วโมง = นาที * 60, วัน = ชั่วโมง * 24, halfmonth = วัน * 15 วัน = วัน * 30 ปี = เดือน * 12, _day = ความแตกต่าง/วัน, _hour = ความแตกต่าง/ชั่วโมง, _min = ความแตกต่าง/นาที; ถ้า (_year> = 1) {result = "โพสต์ใน" + ~~ (_year) + "ปีที่แล้ว"} ถ้า (_month> = 1) {result = "โพสต์ใน" + ~~ (_month) + "เดือนที่แล้ว" "โพสต์ใน" + ~~ (_day) + "วันที่ผ่านมา"} อื่นถ้า (_hour> = 1) {result = "โพสต์ใน" + ~~ (_hour) + "ชั่วโมงที่ผ่านมา"} อื่นถ้า (_min> = 1) {result = "โพสต์ใน" + ~~ (_min) + "นาทีที่ผ่านมา ผลตอบแทนผลลัพธ์;}รหัสมีส่วนหนึ่งของการกู้ยืมจากรหัสของคนอื่น
ตกลงตอนนี้เราสามารถใช้ฟังก์ชั่นวิธีการ GoodTime (STR) เพื่อแก้ไขรูปแบบเวลาที่เรามอบให้โดยอินเทอร์เฟซกับสิ่งที่เราต้องการ คำถามตอนนี้เราจะใช้ฟังก์ชั่นนี้ได้อย่างไร
วิธีโง่ ๆ แก้ไขข้อมูลต้นฉบับโดยตรง
ก่อนอื่นเราได้รับข้อมูลผ่าน AJAX จากนั้นส่งข้อมูลไปยัง Vue สำหรับการแสดงผล จากนั้นเราสามารถทำการดำเนินการตรงกลางประมวลผลข้อมูลทั้งหมดจากนั้นส่งข้อมูลที่ประมวลผลไปยัง Vue สำหรับการแสดงผล ปัญหานี้สามารถแก้ไขได้
แค่ทำมันมาดูรหัส:
ฟังก์ชั่น pushdom (data) {// traversal ครั้งแรกและแก้ไขตลอดเวลาในข้อมูลสำหรับ (var i = 0; i <data.data.length; i ++) {data.data [i] .create_at = goodtime (data.data [i] .create_at); - // จากนั้นปล่อยให้มันเป็น vue สำหรับการแสดงผล var vm = new vue ({el: '.List', ข้อมูล: data});}ตกลงผ่านการประมวลผลข้างต้นลองดูที่เอฟเฟกต์หน้าสุดท้าย ดังนี้:
ความสำเร็จ.
วิธีการกรองแบบกำหนดเอง Vue
แม้ว่าเราจะประสบความสำเร็จข้างต้น แต่ก็ไม่ได้มีความสง่างามที่จะสร้างการวนรอบโดยตรงก่อน Vue ยิ่งกว่านั้นเราต้องการเรียนรู้ Vue นี่เป็นวิธีเดียวที่จะเรียนรู้ ...
ตกลงมาใช้ฟังก์ชั่นตัวกรองที่กำหนดเองของ Vue กันเพื่อประมวลผล
การสอนอย่างเป็นทางการตัวกรองที่กำหนดเอง http://vuejs.org.cn/guide/custom-filter.html
ฟังก์ชั่น pushdom (data) {// ใช้ตัวกรองที่กำหนดเอง Vue เพื่อปั้นเวลาที่ส่งผ่านในอินเตอร์เฟส vue.filter ('เวลา', ฟังก์ชั่น (ค่า) {ส่งคืน goodtime (value);}) var vm = new vue ({el: '.List', ข้อมูล: data: data});};};และเราจำเป็นต้องปรับเปลี่ยนส่วน HTML ของเราดังนี้:
<time v-text = "info.create_at | เวลา"> </time>
ตกลงเอฟเฟกต์การใช้งานจะเหมือนกันทุกประการ แต่รหัสดูสง่างามมากขึ้น กุญแจสำคัญคือในกระบวนการนี้เราได้เรียนรู้และเชี่ยวชาญการใช้ตัวกรองที่กำหนดเอง ในความเป็นจริงในหลายกรณีข้อมูลที่เรามอบให้โดยอินเทอร์เฟซมักไม่เหมาะสำหรับการแสดงผลโดยตรงบนหน้าดังนั้นฟังก์ชั่นนี้มีความสำคัญมากและใช้กันมาก
สรุป
1. เมธอดแอตทริบิวต์องค์ประกอบการผูกมัด -VIND
2. วิธีข้อความเอาต์พุตข้อความ
3. การใช้ตัวกรอง VUE ที่กำหนดเอง
ภาคผนวก
เว็บไซต์อย่างเป็นทางการของ Vue
รายละเอียด cnodejs API
ดาวน์โหลดซอร์สโค้ดของชุดบทเรียนนี้
บทที่ 1 ของการสอนเชิงปฏิบัติ Vuejs สร้างพื้นฐานและการแสดงผลรายการ
Vuejs การสอนการปฏิบัติบทที่ 2 แก้ไขข้อผิดพลาดและความสวยงาม
การสอนการปฏิบัติ Vuejs บทที่ 3 โดยใช้ปลั๊กอินเลย์เอาต์เพื่อรับรู้การปนเปื้อน
บทความนี้เขียนโดย Fungleo เดิม
ที่อยู่รุ่นแรก: http://blog.csdn.net/fungleo/article/details/51649074
บทความนี้ได้รวบรวมไว้ใน "Vue.js front-end การสอนการเรียนรู้การเรียนรู้" และทุกคนยินดีที่จะเรียนรู้และอ่าน
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น