2 年之前 · a773870246
--- a/10_vue/2_v-on.html
+++ b/10_vue/2_v-on.html
@@ -0,0 +1,67 @@
 
															+<!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: blue;
														
 
															+    }
														
 
															+  </style>
														
 
															+</head>
														
 
															+<body>
														
 
															+  <div id="app">
														
 
															+    {{msg}}
														
 
															+    {{num}}
														
 
															+    <!-- <button v-on:click="fn">按钮</button> -->
														
 
															+    <!-- v-on:click   简写为 @click-->
														
 
															+    <button @click="fn">按钮</button>
														
 
															+    <div id="div1" @click="fn1()">
														
 
															+      <div id="div2" @click="fn2()"></div>
														
 
															+    </div>
														
 
															+
														
 
															+    <input type="text" @keyup ="fn3()">
														
 
															+
														
 
															+    <input type="text" @keyup.enter="fn4()">
														
 
															+  </div>
														
 
															+  <script src="vue.js"></script>
														
 
															+  <script>
														
 
															+    new Vue({
														
 
															+      el:'#app',
														
 
															+      data:{
														
 
															+        msg:'hello',
														
 
															+        num: 20
														
 
															+      },
														
 
															+      methods:{
														
 
															+        fn(){
														
 
															+          // console.log(111)
														
 
															+          /* 修改data中的值  this. */
														
 
															+          this.msg = 'hello word'
														
 
															+          this.num++
														
 
															+        },
														
 
															+        fn1(){
														
 
															+          console.log(111)
														
 
															+        },
														
 
															+        fn2(){
														
 
															+          console.log(222)
														
 
															+        },
														
 
															+        fn3(){
														
 
															+          console.log(event.keyCode)
														
 
															+        },
														
 
															+        fn4(){
														
 
															+          console.log('hahhahahah')
														
 
															+        }
														
 
															+      }
														
 
															+    })
														
 
															+  </script>
														
 
															+</body>
														
 
															+</html>
														
--- a/10_vue/3_v-bind.html
+++ b/10_vue/3_v-bind.html
@@ -0,0 +1,72 @@
 
															+<!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>
														
 
															+    .aa{
														
 
															+      width: 200px;
														
 
															+      height: 200px;
														
 
															+      background: red;
														
 
															+    }
														
 
															+    .bb{
														
 
															+      color: blue;
														
 
															+      font-size: 50px;
														
 
															+    }
														
 
															+    .cc{
														
 
															+      color:green
														
 
															+    }
														
 
															+  </style>
														
 
															+</head>
														
 
															+<body>
														
 
															+  <div id="app">
														
 
															+    <button @click="change()">click</button>
														
 
															+    <!-- v-bind 动态绑定属性  -->
														
 
															+    <!-- <div v-bind:id="name"></div> -->
														
 
															+    <div :id="name"></div>
														
 
															+    <!-- <div class="aa bb">aaaaa</div> -->
														
 
															+
														
 
															+
														
 
															+    <!-- <div :class="{aa:isA,bb:isB}">aaaaaa</div> -->
														
 
															+    <!-- <div :class="[class1,class2]">2222222222222222</div> -->
														
 
															+
														
 
															+    <!-- <div :class="[flag?class2:class3]">3333333</div> -->
														
 
															+
														
 
															+    <!-- <div style="width:200px;height:200px"></div>
														
 
															+    <div :style="{color: color1}"></div> -->
														
 
															+
														
 
															+    <div :style="[s1,s2]"></div>
														
 
															+  </div>
														
 
															+  <script src="vue.js"></script>
														
 
															+  <script>
														
 
															+    new Vue({
														
 
															+      el:"#app",
														
 
															+      data:{
														
 
															+        name:"zs",
														
 
															+        class1: 'aa',
														
 
															+        class2: 'bb',
														
 
															+        class3: 'cc',
														
 
															+        isA: true,
														
 
															+        isB: true,
														
 
															+        flag:false,
														
 
															+        color:'green',
														
 
															+        s1:{
														
 
															+          width:'100px',
														
 
															+          height:'100px'
														
 
															+        },
														
 
															+        s2:{
														
 
															+          background:'red'
														
 
															+        }
														
 
															+      },
														
 
															+      methods:{
														
 
															+        change(){
														
 
															+          this.name = 'lisi'
														
 
															+          // this.class2 = 'cc'
														
 
															+        }
														
 
															+      }
														
 
															+    })
														
 
															+  </script>
														
 
															+</body>
														
 
															+</html>