本节知识点
概述
- 实例就是在构造器外部的操作构造器内部的属性选项或者方法，实例的作用就是给原生的或者其他类库框架比如jquery一个融合的接口。让Vue和其他框架一起用
使用: mounted
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0">
<title>Vue第四季实例化</title>
<script src="js/vue.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>
<div id="app">
<hello :here="message"></hello>
<p>{{message}}</p>
</div>
</body>
<script>
Vue.component("hello",{
template:`<p style="color:red;">测试效果{{here}}</p>`,
props:["here"]
})
var app = new Vue({
el:"#app",
data:{
message:"新年快乐"
},
mounted:function(){
$("#app").find("p").html("2018年加油")
}
})
</script>
</html>
- 这样的结果就是data里面的message不会起作用了。而显示的是2018年加油
外部调用方法
<button onclick="app.add()">点击我弹出来</button>
网友评论