vue入門及組件間傳值代碼
阿新 • • 發佈：2018-06-03
class lang 介紹 代碼量 func cdn title 通訊 關於
vue是一種mvvm的方式，比起jquery的mvp的方式，可以較少操作dom，代碼量也少很多。
vue有兩種方式，一種是工程化的方式，一種是像jquery那樣使用
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
嵌在前端代碼的方式。
前期學習和做一般項目時，可以用第二種方式。以後可以用第一種方式。
這裏提供一個示例代碼，即vue組件化和組件傳值的方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="root"> <div> <input type="text" v-model="todoValue"/> <button @click="handleBtnClick" >提交</button> </div> <ul> <todo-item v-bind:content="item" v-for="item in list" @delete="handleDelClick"> </todo-item> </ul></div> <script> Vue.component(‘todo-item‘, { props: [‘content‘], template:"<li @click=‘handleItemClick‘>{{content}}</li>", methods:{ handleItemClick:function(){ alert(‘aaa‘) } } }) var app = new Vue({ el: "#root", data: { todoValue:"", list:[] }, methods:{ handleBtnClick: function(){ this.list.push(this.todoValue) this.todoValue = "" }, handleDelClick:function(){ this.list = [] } } }) </script> </body> </html>
更多vue的方法，參考官網：
介紹 — Vue.js
https://cn.vuejs.org/v2/guide/index.html#%E8%B5%B7%E6%AD%A5
關於mvp與mvvm的本質區別
MVC，MVP 和 MVVM 的圖示 - 阮一峰的網絡日誌
http://www.ruanyifeng.com/blog/2015/02/mvcmvp_mvvm.html
GitHub - DMQ/mvvm: 剖析vue實現原理，自己動手實現mvvm
https://github.com/DMQ/mvvm
vue的組件通訊 - 一篇看懂極為表面樸實內在先進的vuejs組件技術-圖靈社區
http://www.ituring.com.cn/article/273489
vue入門及組件間傳值代碼