首先来看看实例的概述：
- 实例就是在构造器外部操作操作构造器内部的属性和方法。
- 实例的作用就是给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更深层次的认识。
时间： 2024-08-26 06:05:12