框架分类及前端Vue框架

最新推荐文章于 2024-09-05 15:20:03 发布

原创最新推荐文章于 2024-09-05 15:20:03 发布 · 509 阅读

CC 4.0 BY-SA版权

1.MVVM框架：取代之前MVC框架

分类：
MVVM框架：国内VUE 国外Angular
IOC/DI：Spring
ORM框架：mybatis
服务器框架：NODE
组件化框架：REACT
加密，打包框架：GULP
JS框架：FLEX

要先导入js包
参考代码：

<!DOCTYPE html>
<html>
<head>
   <title>ceshi</title>
   <script src="vue.js"></script>
</head>
<body>
   
   <div id="div5">{{msg}}</div>


   <div class="div1">
       <h3>{{num}}</h3>
       <h3>{{num2}}</h3>
       <h3>{{arr}}</h3>
       <h3>{{obj.age}}</h3>
       <h3>{{arr2[1].price}}</h3>
   </div>


   <h1 id="uuu8">
   <button v-on:click="fn1">ceshi1</button>
   <button v-on:click="fn2">ceshi2</button>
   </h1>


   <div id="box">
       {{arr}}
       <button v-on:click="fn3('jw')">insert</button>
       <button v-on:click="fn4(0)">delete</button>
       <button v-on:click="fn5('jw2')">updata</button>
       <button v-on:click="fn6">select</button>
   </div>


   <div id="box2">
       <div v-show="isShow">jjjjwwww</div>
       <button @click="fun1">{{isShow}}xs/yc</button>
   </div>


   <div id="box3">
       <h1>{{msg}}</h1>
       <input type="text" v-model="msg">
   </div>

   
   <ul id="box4">
       <li v-for="item in arr11">{{item}}</li>
   </ul>
</body>

   //第二数字、字符串、数组、对象调用案例
   var v= new Vue({
       el:".div1",
       data:{
           num:1,
           num2:'jw',
           arr:['11','22','33'],
           obj:{
               name:'jw2',
               age:19
           },
           arr2:[{id:1,price:20},{id:2,price:30}]
       }
   });

   //第三调用方法案例
   var c= new Vue({
       el:"#uuu8",
       data:{

       },
       methods:{
           fn1:function(){
               console.log("1111");
               },
           fn2:function(){
               console.log("2222");
           }
       }
   });

   //第四增删函数案例
   var vm2=new Vue({
       el:"#box",
       data:{
           arr:['1','2','3']
       },
       methods:{
           fn3:function(str){
               this.arr.push(str);
           },
           fn4:function(index){
               this.arr.splice(index,1);
           },
           fn5:function(str){
               this.arr.splice(1,1,str);
           },
           fn6:function(){
               console.log(vm2.arr);
           }
       }
   });

   //第五show显示隐藏案例
   var v=new Vue({
       el:"#box2",
       data:{
           isShow:true
       },
       methods:{
           fun1:function(){
               this.isShow=!this.isShow;
           }
       }
   });

   //第六model案例
   var vm3=new Vue({
       el:"#box3",
       data:{
           msg:'hello vue js'
       }
   });

   //第七for案例
   var vm4=new Vue({
       el:"#box4",
       data:{
           arr11:['豪哥1','豪哥2','豪哥3']
       }
   });
</script>
</html>