内部コンポーネントとのVueの例
Vueの例
外部構造VUE動作コンストラクタ内にあるプロパティまたはメソッドの例として
、他のVUEフレーム（結合）と融合されるアクション・インスタンス
VueがjQueryを使って一緒に使用しました
例：内のページメッセージの出力値の変化をVUE
組み込まれる文献1 JQuery.js
<script src="../assets/js/jquery-3.4.1.min.js" type="text/javascript"></script>
DOMがマウントされた後2、出力ページメッセージの値を変更
mounted:function(){
$("demo").html("凡是过往,皆为序章,愿2020年所有的美好如期而至")
}
1.修正が完了した後、ページ内のメッセージの出力値は次のようになります。過去には、すべてのプロローグどこにいる、私はRuqierzhi 2020すべての良いをしたいと思います
2 $（ "要素をマウント"）の.html（ "内容の変更"）
Vueのインスタンスは、カスタムメソッドを呼び出します
InputMessagesコンストラクタメソッドVUEの内部を定義し、方法の一例をコールします。
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>
結果：
