zoukankan      html  css  js  c++  java
  • MVVM框架

    1.什么是Vue.js?

    它是一套构建用户界面的渐进式框架

    2.Vue.js怎么引用?

      2.1)步骤

        1)创建一个web项目

        2)创建一个jsp页面

        3)把vue.js放到web文件夹下

        4)在jsp中引入vue.js

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

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

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

        6)定义一个javascript的model

          var myModel1 = {userName:'张三丰',age:19};

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

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

    *********************************************************************************************

    例子1:

      <div id="myDiv1">  {{userName}}  </div>
    
      <script src="${pageContext.request.contextPath}/ja/vue.js/"></script>
    
      <script>
        var myModel = {userName:'大明',age:13};
        var myViewModel = new vue({
          el:'#myDiv1',
          data:myModel
        });
        console.log(myViewModel.age);
      </script>

    3.DOM的思维

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

    4.JSON数据格式

      1)单变量的格式

        {key1 : value1,key2 : value2}

      2)多条数据

        [ { },{ },{ } ]

  • 相关阅读:
    未处理的异常 stack overflow
    Largest Rectangle in a Histogram [POJ2559] [单调栈]
    Blocks [POJ3734] [矩阵快速幂]
    Rectangular Covering [POJ2836] [状压DP]
    Arrange the Bulls [POJ2441] [状压DP]
    The Water Bowls [POJ3185] [开关问题]
    Bound Found [POJ2566] [尺取法]
    4 Values whose Sum is 0 [POJ2785] [折半搜索]
    Physics Experiment 弹性碰撞 [POJ3684]
    Fliptile [POJ3279] [开关问题]
  • 原文地址:https://www.cnblogs.com/mrfhome/p/7902860.html
Copyright © 2011-2022 走看看