Examples of internal components and Vue
Vue examples
Examples of the property or method that is inside the outer structure vue operation constructor
action instance that is to be fused with other vue frame (binding)
Vue used in conjunction with JQuery
Examples: vue change in the output value for the page messages in the
incorporated document 1. JQuery.js
<script src="../assets/js/jquery-3.4.1.min.js" type="text/javascript"></script>
2. After the DOM is mounted, modify the value of the output page messages
mounted:function(){
$("demo").html("凡是过往,皆为序章,愿2020年所有的美好如期而至")
}
1. After completion of modification, the output value of the messages in the page becomes:Where in the past, are all prologue, I would like all the good Ruqierzhi 2020
2 $ ( "mount element") .html ( "change of contents")
Vue instance calls a custom method
InputMessages define a constructor method vue inside, and then to call it an example of the method.
methods:{
inputMessages:function(){
console.log("这是inputMessages方法,是实例调用自定义方法的例子")
}
}
In the external configuration of the device, an example of a method invocation:
demo.inputMessages()
Complete code:
<!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>
operation result:
