Vue实例和内置组件
Vue实例
实例就是在vue构造器外部操作构造器内部的属性或者方法
实例的作用就是使得vue可以与其他框架融合(结合)
Vue与JQuery结合使用
例子：改变vue中messages在网页输出的值
1.引入JQuery.js文件
<script src="../assets/js/jquery-3.4.1.min.js" type="text/javascript"></script>
2.在DOM被挂载后，修改messages在网页输出的值
mounted:function(){
$("demo").html("凡是过往,皆为序章,愿2020年所有的美好如期而至")
}
1.修改完之后，在网页中输出messages的值将变成：凡是过往,皆为序章,愿2020年所有的美好如期而至
2.$(“挂载元素”).html(“改变的内容”)
Vue实例调用自定义方法
在vue构造器内部定义一个inputMessages方法，然后用实例的方法去调用它。
methods:{
inputMessages:function(){
console.log("这是inputMessages方法,是实例调用自定义方法的例子")
}
}
在构造器的外部，用实例的方法调用：
demo.inputMessages()
完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue与JQuery结合使用</title>
<script src="../assets/js/jquery-3.4.1.min.js" type="text/javascript"></script>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1>Vue与JQuery结合使用</h1>
<hr />
<div id="demo">
{{messages}}
</div>
<script type="text/javascript">
var demo=new Vue({
el:"#demo",
data:{
messages:'2020年，愿一切美好，如期而至'
},
methods:{
inputMessages:function(){
console.log("这是inputMessages方法,是实例调用自定义方法的例子")
}
},
mounted:function(){
$("#demo").html("凡是过往,皆为序章,愿2020年所有的美好如期而至")
}
})
demo.inputMessages()
</script>
</body>
</html>
运行结果：
