首先,什么是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的基本操作和代码