Vue.js是什么及入门

Vue.js是一套构建用户界面(view)的MVVM框架。Vue.js的核心库只关注视图层,并且非常容易学习,非常容易与其他库或已有的项目整合。

1.1 Vue.js的目的

Vue.js的产生核心是为了解决如下三个问题:

  1. 解决数据绑定的问题;
  2. Vue.js框架生产的主要目的是为了开发大兴单页面应用(SPA:Single Page Application)

Angular.js中对PC端支持的比较良好,但是对移动端支持就一般。而Vue.js主要支持移动端,也支持PC端。

3. 它还支持组件化。也就是可以将页面封装成若干个组件,采用积木式编程 ,这样是页面的复用度达到最高(支持组件化)。

1.2 Vue.js特性

  1. MVVM模式

M: model  业务模型,用处:处理数据,提供数据

V: view    用户界面、用户视图

业务模型model中的数据发生改变的时候,用户视图view也随之变化。用户视图view改变的时候,业务模型model中的数据也可以发生改变。

  1. 组件化
  2. 指令系统
  3. Vue.js 2.0开始支持虚拟DOM(Vue.js 1.0 是操作的真是DOM,而不是虚拟DOM)

虚拟DOM可以提升页面的刷新速度。

第二章 Vue.js入门

使用Vue.js的步骤:

第一步:在html页面中引入vue.js

 

第二步:Vue.js提供了一个Vue,我们需要创建一个对象。

new Vue({});

 

第三步:在用户界面view中,通过{{}}形式将data中的数据显示在页面中。

在用户界面中,{{}}代码中绑定的data的key,而在页面中显示的是该key的value。

Vue.js对获取的data与页面上显示的{{}}会产生一种映射关系。

 

app这个变量会代理vue中data数据。所以我们访问data中数据的时候,直接用app.name就可以了

 

这样,如果我们要实现前后台交互,只要将从后台得到的数据,放在data中,页面就会自动绑定,这样就实现了从model->view的数据流向。

猜你喜欢

转载自www.cnblogs.com/wjr2018/p/10370220.html