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