Home Explore Help
Sign In
lovecoding
/
Web1020
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

admin

fengchuanyu 3 months ago
parent
7f394ba92a
commit
7fd5552cdb
4 changed files with 85 additions and 8 deletions
Split View Show Diff Stats
  1. 42 0
      11_Vue基础/10_其他指令.html
  2. 11 2
      11_Vue基础/8_v-bind.html
  3. 23 0
      11_Vue基础/9_v-model.html
  4. 9 6
      11_Vue基础/练习2_商品卡.html

+ 42 - 0
11_Vue基础/10_其他指令.html
View File 

@@ -0,0 +1,42 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./js/vue.js"></script>
 
+    <style>
 
+        [v-cloak]{
 
+            display: none;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+       
+        <!-- <div v-pre>
 
+            {{num}}
 
+        </div> -->
 
+        <!-- v-once 仅加载一次 -->
 
+        <!-- <h1 v-once>{{num}}</h1> -->
 
+         <!-- v-cloak 优化首次加载的页面效果 -->
 
+        <h1 v-cloak>{{num}}</h1>
 
+
 
+        <button @click="changeNum">add</button>
 
+    </div>
 
+    <script>
 
+        let app = new Vue({
 
+            el:"#app",
 
+            data:{
 
+                num:10,
 
+                str:"hello"
 
+            },
 
+            methods: {
 
+                changeNum:function(){
 
+                    this.num = 100
 
+                }
 
+            },
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 11 - 2
11_Vue基础/8_v-bind.html
View File 

@@ -12,6 +12,11 @@
 
         .box2{
 
             color: blue;
 
         }
 
+        .active{
 
+            font-size: 40px;
 
+            font-weight: bolder;
 
+            color: green;
 
+        }
 
     </style>
 
 </head>
 
 <body>
 
@@ -23,15 +28,19 @@
 
         <button @click="changeClass('box1')">box1</button>
 
         <button @click="changeClass('box2')">box2</button>
 
         <!-- <img v-bind:src="imgSrc" alt=""> -->
 
-        <img v-bind:src="imgSrc + '.jpg'" alt="">
 
+        <!-- <img v-bind:src="imgSrc + '.jpg'" alt=""> -->
 
 
+        <div v-bind:class="{ active : isActive }">你好</div>
 
+        <div :style="{ fontSize:fontS+'px' }"> 世界 </div>
 
     </div>
 
     <script>
 
         var app = new Vue({
 
             el:"#app",
 
             data:{
 
                 styleName:"",
 
-                imgSrc:"./img/1"
 
+                imgSrc:"./img/1",
 
+                isActive:false,
 
+                fontS:60
 
             },
 
             methods: {
 
                 changeClass: function (cName) {

+ 23 - 0
11_Vue基础/9_v-model.html
View File 

@@ -0,0 +1,23 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+    <script src="./js/vue.js"></script>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <input type="text" v-model="inpVal">
 
+        <h1>文本框的值: {{inpVal}}</h1>
 
+    </div>
 
+    <script>
 
+        let app = new Vue({
 
+            el:"#app",
 
+            data:{
 
+                inpVal:""
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 9 - 6
11_Vue基础/练习2_商品卡.html
View File 

@@ -51,14 +51,14 @@
 
     <div id="app">
 
         <button @click="getData">获取数据</button>
 
         <div class="box clearfix">
 
-            <div class="card-content">
 
+            <div v-for="item in dataList" class="card-content">
 
                 <div class="card-img">
 
-                    <img src="http://shop-static.edu.koobietech.com/2019/04/b3558ee506fb4589bfaa94a543226477.jpg" alt="图片">
 
+                    <img v-bind:src="item.pic" alt="图片">
 
                 </div>
 
                 <div class="card-info">
 
-                    <h3>阿迪达斯官方 adidas 三叶草 NITE JOGGER 男子经典鞋BD7956</h3>
 
-                    <p>运动鞋/休闲鞋</p>
 
-                    <p>¥0.01</p>
 
+                    <h3>{{item.prodName}}</h3>
 
+                    <p>{{item.brief}}</p>
 
+                    <p>¥{{item.price}}</p>
 
                 </div>
 
             </div>
 
         </div>
 
@@ -77,8 +77,11 @@
 
             },
 
             methods:{
 
                 getData:function(){
 
+                    let that = this;
 
                     ajaxFun("GET", "http://shop-api.edu.koobietech.com/prod/tagProdList", function (res) {
 
-                        console.log(res);
 
+                        // console.log(res.data[0].productDtoList);
 
+                        // console.log(that.dataList)
 
+                        that.dataList = res.data[0].productDtoList
 
                     })
 
                 }
 
             }