Vue.js——理解与创建使用

Vue.js

  概念:是一个轻巧、高性能、可组件化的MVVM库,同时拥有非常容易上手的API,作者是尤雨溪是中国人。

  优点:

  1)易用
   已经会了HTML,CSS,JavaScript?即刻阅读指南开始构建应用!
  2)灵活
   简单小巧的核心,渐进式技术栈,足以应付任何规模的应用。
  3)性能
   17kb min+gzip 运行大小
   超快虚拟 DOM 
   最省心的优化

创建与使用的步骤:

  1、 新建web项目

  2、新建一个jsp文件

  3、把vue.js放到Web的js目录下

  4、在jsp中引入vue.js

<script src="${pageContext.request.contextPath}/js/vue.js"></script>

  5、创建一个view对象(DOM组件)

  注意:此view对象,可以包含n个数据,数据使用{{xxx}}来描述

  6、定义一个javascript的model

    var myModel = {userName:'张三三',age:20};

  7、创建一个Vue对象(ViewModel对象)

    参数为一个json对象(包含2个参数el,data)

<div id="MyDiv1">
<p>{{userName}}</p>
<p>{{age}}</p>
</div>

 

<script type="text/javascript">
var myModel = {userName:'李四四',age:19};
var myViewModel = new Vue({
el:'#MyDiv1',//指的是:DOM
/*data:{//指的是:model
userName:'张三三' ,
age:20
}*/
data:myModel //调用前面声明的数据 });
console.log(myViewModel.age);//在控制台输出结果
</script>

总结: 

  1、抛开手动操作DOM的思维,Vue.js是数据驱动,你无需手动操作DOM。

  2、将DOM和数据绑定起来,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。

  3、MVVM模式(Model-View——ViewModel)

    ViewModel是如何和View以及Model进行交互的。

    model放在data(可能多项)

    View放在el(view里面的{{  }}可能多项,跟model对应)

  4、ViewModel是Vue.js的核心,它是一个Vue实例。

    Vue实例是作用域某一个HTML元素上的,

    这个元素可以是HTML的body元素,

    也可以是指定了id的某个元素。

  5、所有的元素都是响应式的。

 

上一篇:I2C 上拉电阻选择计算公式


下一篇:net 快速打印日志