为什么Vue.js可以嵌入到Jquery项目!
vuejs和vue的区别是什么
Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue采用自底向上增量开发的设计。Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合。另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。
Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习,非常容易与其它库或已有项目整合。另一方面,在与相关工具和支持库一起使用时 ,Vue.js 也能驱动复杂的单页应用。
Jquery嵌入Vue.js方法 首先我们只需要在html文件中引入vue.js文件;
然后我们在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里面的东西;
var app = new Vue({ el:'#app', data:{ text:'这是一个vue实例', }, methods:{ conText(){ console.log(this.text) } } });
app.conText(); // Jquery调用Vuejs中的方法。 console.log(app); console.log(app.text);