首先,什么是Vue?
渐进式 JavaScript 框架 Vue.js Vue.js V3
先从上面地址找到并下载 vue.js 文件
v2 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> v3 <script src="https://unpkg.com/vue@next"></script>
在HTML中所需要用到VUE的页面引入该js文件即可
使用方法:
html:
<body> <div id="vueApp"> <mavon-editor :autofocus="false" ref="content" v-model="content"> </mavon-editor> </div> </body>
注意:1.不支持直接使用body节点作为VueApp;
2.上述示例中 mavon-editor需要自行从官网下载js引入使用。下面会有使用第三方包的方法
js:
<script> Vue.use(window["MavonEditor"]) //此处使用此方法引入第三方vue依赖包 var myHtmlVueApp=new Vue({//下面的使用方法请参照Vue.js的写法即可,完全一致 el: '#vueApp', data: function () { return { content:"", } }, methods:{ init(){ }, } }) </script> //普通js调用vue方法,或者获取vue的值 <script> $(function(){ console.log("content=="+myHtmlVueApp.content) //调用init方法 myHtmlVueApp.init(); }) </script>
以上就是在HTML中使用VUE的基本操作和代码