Vue.js 实例和内置组件 入门

时间:2022-01-18 10:30:20

首先来看看实例的概述:

  • 实例就是在构造器外部操作操作构造器内部的属性和方法。
  • 实例的作用就是给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更深层次的认识。