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、所有的元素都是响应式的。