Jquery项目中使用vue.js

Jquery项目中使用vue.js

最近接触到了一个原始jq的项目,代码可维护性很差,一个页面几千行jq,可维护性很差,所以想再迭代时使用vue;

在这种情况下插入vue也不是一件很麻烦的事,毕竟是渐进式框架;

首先我们只需要在html文件中引入vue.js文件;

	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

然后我们在js中先创建出一个vue实例,打印一下

	    var app = new Vue();
	    console.log(app);

然后打开文件,就可以在控制台看到vue所包含的东西;
然后我们将一个Dom对象挂载到vue上;

    var app = new Vue({
        el:'#app',
        data:{
            text:'这是一个vue实例',
        }
    });
    console.log(app);

• 这里我们可以看到vue实例上的$el属性对应到的是我们所挂载的Dom对象;

• 而我们所写入data里的数据是直接在vue属性上的,可以看到vue实例上直接有text属性对应我们所写入的东西;

• 这样我们就可以在jq的环境中很简便得拿到vue里面的东西;

• 方法也是一样的;

• 我们在vue里面写一个方法,然后在实例外调用一下;

    var app = new Vue({
        el:'#app',
        data:{
            text:'这是一个vue实例',
        },
        methods:{
            conText(){
                console.log(this.text)
            }
        }
    });
    
    app.conText()
    console.log(app);
    console.log(app.text);

• 我们可以看到这个方法是可以成功调用并执行的,这样我们既拿到了方法也拿到了数据,就可以很大程度上提高代码的可维护性;

注意:

• 这里的data是对象,不是函数;
• 在同一个页面使用多个vue实例的时候方法和数据互相调用要注意创建时间;