Html项目使用vue |
您所在的位置：网站首页 › vue怎么运行html › Html项目使用vue |
|
前言
近期维护一个项目，代码是纯html写的，对于一个习惯了vue开发的人来说，纯html太痛苦了，不能使用双向绑定，不能使用组件，每次开发新功能，都非常的恶心； 幸好，有一个非常棒的框架http-vue-loader，它可以完美的帮我们实现，在html里面使用vue； 一、引入http-vue-loader 下载http-vue-loader.js文件 在html中引入http-vue-loader.js 二、创建组件my-component.vuemy-component.vue最好与html文件在同一目录下，方便引入； 三、引入组件使用url的方式引入； (function() { // 这句必须，引入httpVueLoader的； Vue.use(httpVueLoader); var vue = new Vue({ el: '#app', data() { return { } }, // components里面，引入组件 // 组件必须与html文件在同一目录下，不然下边的写法，会引入失败； components: { 'my-component': 'url:my-component.vue?v=' + (new Date().getTime()) }, }); })();使用url的方式引入，后面可以加版本号（v），这样是为了处理，组件代码不能实时更新到html上的问题； 四、html中使用组件 ... .... 五、代码预览代码 1. test.html文件 我的客户 document.write('') 2. test.js文件 (function() { // 这句必须，引入httpVueLoader的； Vue.use(httpVueLoader); var vue = new Vue({ el: '#app', data() { return { } }, // components里面，引入组件 // 组件必须与html文件在同一目录下，不然下边的写法，会引入失败； components: { 'my-component': 'url:my-component.vue?v=' + (new Date().getTime()) }, }); })(); 3.组件my-component.vue Hello {{count}} module.exports = { data: function() { return { count: 0 } }, methods: { respondsToTap() { this.count = this.count + 1 } } } .hello { background-color: #ffe; line-height: 40px; } |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |