直接下载好jQuery,然后引入jQuery就可以了
<script type="text/javascript" src="../assets/js/jquery-3.3.1.min.js"></script>
然后我们在DOM被挂载后修改里边的内容。
mounted:function(){ //mounted和updated后才能使用jQuery $("#app").html("我是jQuery!"); },
我们在构造器内部添加一个方法,然后在外部调用就可以了
methods:{ add:function(){ console.log("构造器内部调用方法"); } }
调用这个方法
app.add();
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实例入门-实例属性</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
</head>
<body>
<h1><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>实例入门-实例属性</title>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script type="text/javascript" src="../assets/js/jquery-3.3.1.min.js"></script>
</head>
<body>
<h1>实例入门-实例属性</h1>
<hr>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app = new Vue({
el: "#app",
data:{
message:"hello world!"
},
mounted:function(){ //mounted和updated后才能使用jQuery
$("#app").html("我是jQuery!");
},
methods:{
add:function(){
console.log("调用了构造器内部的ADD方法!");
}
}
});
app.add();
</script>
</body>
</html>
</body>
</html>
原文:https://www.cnblogs.com/xiaofandegeng/p/9005024.html