Página inicial Explorar Ajuda
Entrar
lovecoding
/
VIP28
9
0
Fork 0
Arquivos Issues 0 Pull Requests 0 Wiki
Ver código fonte

new

zsydgithub 1 ano atrás
pai
b1522e30d3
commit
da900834b6
3 arquivos alterados com 140 adições e 0 exclusões
Visão dividida Mostrar estatísticas do Diff
  1. 60 0
      Vue/7_v-on.html
  2. 38 0
      Vue/8_demo.html
  3. 42 0
      Vue/9_v-for.html

+ 60 - 0
Vue/7_v-on.html
Ver arquivo 

@@ -0,0 +1,60 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+  <style>
 
+    #div1{
 
+      width: 200px;
 
+      height: 200px;
 
+      background: red;
 
+    }
 
+    #div2{
 
+      width: 100px;
 
+      height: 100px;
 
+      background: orange;
 
+    }
 
+  </style>
 
+</head>
 
+<body>
 
+  <div id="app">
 
+    {{msg}}
 
+    <!-- <button v-on:click="fn">btn</button> -->
 
+    <button @click="fn">btn</button>
 
+
 
+    <div id="div1" @click="fn1">
 
+      111
 
+      <div id="div2" @click="fn2">
 
+        222
 
+      </div>
 
+    </div>
 
+
 
+    <input type="text" @keyup="fn3">
 
+  </div>
 
+  <script src="./vue.js"></script>
 
+  <script>
 
+    var app = new Vue({
 
+      el: "#app",
 
+      data:{
 
+        msg: 'hello'
 
+      },
 
+      methods:{
 
+        fn(){
 
+          console.log('1111')
 
+        },
 
+        fn1(){
 
+          console.log('div1')
 
+        },
 
+        fn2(){
 
+          console.log('div2')
 
+        },
 
+        fn3(){
 
+          console.log(event.keyCode)
 
+        }
 
+      }
 
+    })
 
+  </script>
 
+</body>
 
+</html>

+ 38 - 0
Vue/8_demo.html
Ver arquivo 

@@ -0,0 +1,38 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+  <div id="app">
 
+    <input type="button" value="v-on指令" v-on:click="fn1">
 
+    <input type="button" value="v-on简写" @click="fn1">
 
+    <input type="button" value="v-on双击" v-on:dblclick="fn1">
 
+    <h2>{{food}}</h2>
 
+    <input type="button" value="单击修改食物" @click="changeFood">
 
+  </div>
 
+  <script src="./vue.js"></script>
 
+  <script>
 
+    var app = new Vue({
 
+      el: "#app",
 
+      data: {
 
+        food: '西红柿'
 
+      },
 
+      methods: {
 
+        fn1(){
 
+          alert('我是点击事件')
 
+        },
 
+        changeFood(){
 
+          this.food = '土豆'
 
+        }
 
+      }
 
+    })
 
+  </script>
 
+</body>
 
+
 
+</html>

+ 42 - 0
Vue/9_v-for.html
Ver arquivo 

@@ -0,0 +1,42 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+
 
+<head>
 
+  <meta charset="UTF-8">
 
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+  <title>Document</title>
 
+</head>
 
+
 
+<body>
 
+  <div id="app">
 
+    <ul>
 
+      <li v-for="val in arr">{{val}}</li>
 
+    </ul>
 
+
 
+    <ul>
 
+      <li v-for="obj in arr2">{{obj.age}}</li>
 
+    </ul>
 
+  </div>
 
+  <script src="./vue.js"></script>
 
+  <script>
 
+    var app = new Vue({
 
+      el: '#app',
 
+      data: {
 
+        arr: [1,2,3,4,5],
 
+        arr2: [{
 
+          name: 'zs',
 
+          age:18
 
+        },{
 
+          name:'lisi',
 
+          age: 20
 
+        },{
 
+          name: 'ww',
 
+          age: 22
 
+        }]
 
+      }
 
+    })
 
+  </script>
 
+</body>
 
+
 
+</html>