Vue.js 實例和內置組件 入門
阿新 • • 發佈：2017-07-22
接收 bootstra red jquery 技術 屬性和方法 ots col amp
首先來看看實例的概述：
- 實例就是在構造器外部操作操作構造器內部的屬性和方法。
- 實例的作用就是給Vue提供與其它js及其框架結合使用的接口。
進入實例階段：
首先來看 Vue.js 搭配 jQuery 使用：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Early Examples Demo</title> </head> <body> <h4>Early Examples Demo</h4> <hr> <div id="app"> {{message}} </div> <script src="https://unpkg.com/vue"></script> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> var app=new Vue({ el:‘#app‘, data:{ message:‘hello Vue!‘ }, //在Vue中使用jQuery mounted:function(){ $(‘#app‘).html(‘jQuery操作DOM!‘); } }) </script> </body> </html>
頁面輸出：jQuery操作DOM!，改變了 message 的輸出。
$mount方法是用來掛載我們的擴展的。將擴展掛載到DOM上。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" /> <title>Early Examples Demo</title> </head> <body> <div class="container"> <h4>Early Examples Demo</h4> <hr> <div id="app"> {{message}} </div> </div> <script src="https://unpkg.com/vue"></script> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> var momei = Vue.extend({ template: `<p>{{message}}</p>`, data: function() { return { message: ‘Hello Vue.extend!‘ } } }); var vm = new momei().$mount(‘#app‘); </script> </body> </html>
實例在構造器外部的方法調用構造器內部的數據。
$on 構造器外部添加事件。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" /> <title>Examples Demo3</title> </head> <body> <div class="container"> <h4>Examples Demo3</h4> <hr> <div id="app"> {{num}} <p><button @click=‘add‘>Add</button></p> </div> <p><button onclick=‘reduce()‘>Reduce</button></p> <p><button onclick=‘reduceOnce()‘>reduceOnce</button></p> <p><button onclick=‘off()‘>Off</button></p> </div> <script src="https://unpkg.com/vue"></script> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> var app = new Vue({ el: ‘#app‘, data: { num: 1 }, methods: { add: function() { this.num ++; } } }); // $on 實例事件 寫入 app.$on("reduce",function() { console.log(‘執行了reduce 多次執行方法！‘); this.num --; }) // $once 實例事件 寫入 app.$once("reduceOnce",function() { console.log(‘執行了reduceOnce 執行一次方法！‘); this.num --; }) //$emit() 調用 function reduce() { app.$emit(‘reduce‘); } //$emit() 調用 function reduceOnce() { app.$emit(‘reduceOnce‘); } //$off關閉事件 function off() { app.$off(‘reduce‘); } </script> </body> </html>
slot功能讓組件接收傳遞過來的值，並在模板中接收顯示。通過代碼實例認識一下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.6/css/bootstrap-grid.css" /> <title>Examples Demo4</title> </head> <body> <div class="container"> <h4>Examples Demo4</h4> <hr> <div id="app"> <!-- slot 傳遞參數 --> <momei> <span slot="bolgUrl">{{momeiData.bolgUrl}}</span> <span slot="netName">{{momeiData.netName}}</span> <span slot="skill">{{momeiData.skill}}</span> </momei> </div> <!-- slot 接收參數 --> <template id="tmp"> <div> <p>博客地址：<slot name="bolgUrl"></slot></p> <p>網名：<slot name="netName"></slot></p> <p>技術類型：<slot name="skill"></slot></p> </div> </template> </div> <script src="https://unpkg.com/vue"></script> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script type="text/javascript"> var momei={ //定義組件 template:‘#tmp‘ } var app=new Vue({ el:‘#app‘, data:{ momeiData:{ bolgUrl:‘http://www.cnblogs.com/momei/‘, netName:‘墨眉‘, skill:‘Web前端‘ } }, components:{ //掛載組件 "momei":momei } }) </script> </body> </html>
頁面代碼如何呈現，對頁面及功能實現都很重要，這裏更多的是體現沒一個方法的使用。
在實踐和學習中總結，完善自己對Vue.js更深層次的認識。
Vue.js 實例和內置組件 入門