标签：message 扩展 com 进入 charset contain demo 4.0 http
首先来看看实例的概述：
进入实例阶段：
首先来看 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更深层次的认识。
标签：message 扩展 com 进入 charset contain demo 4.0 http
原文地址：http://www.cnblogs.com/momei/p/7221762.html
