demo

rjomg · Apr 28, 2018 · ff5fb82 · ff5fb82
1 parent 0e3d7c5
commit ff5fb82
Show file tree

Hide file tree

Showing 9 changed files with 359 additions and 32 deletions.
diff --git a/demo/Vue中的列表渲染.html b/demo/Vue中的列表渲染.html
@@ -0,0 +1,82 @@
+<!DOCTYPE <!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Vue中的列表渲染</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  <style>
+    .activated{
+      color: red;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+      <div v-for="(item, index) of list" :key="item.id">
+          {{item.text}} ---- {{index}}
+        </div>
+  </div>
+
+  <div id="app2">
+    <div v-for="(item, key, index) of userInfo">
+      {{item}} --- {{key}} --- {{index}}
+    </div>
+  </div>
+
+  <div id="app3">
+      <div v-for="(item, index) of userInfo">
+        {{item}}
+      </div>
+    </div>
+
+  <script>
+    // push pop shift unshift splice sort reverse
+    var vm = new Vue({
+      el: "#app",
+      data: {
+        list: [{
+            id: '1',
+            text: "hello",
+          },{
+            id: '2',
+            text: "dell",
+          },{
+            id: '3',
+            text: "nice",
+          },{
+            id: '4',
+            text: "to",
+          },{
+            id: '5',
+            text: "meet",
+          },{
+            id: '6',
+            text: "you",
+          }]
+      }
+    })
+
+    var vm2 = new Vue({
+      el: "#app2",
+      data: {
+        userInfo: {
+          name: "Dell",
+          age: "28",
+          gender: "male",
+          salary: "secret",
+        }
+      }
+    })
+
+    var vm3 = new Vue({
+      el: "#app3",
+      data: {
+        userInfo: [1, 2, 3, 4]
+      }
+    })
+  </script>
+</body>
+</html> 
diff --git a/demo/Vue中的条件渲染.html b/demo/Vue中的条件渲染.html
@@ -0,0 +1,53 @@
+<!DOCTYPE <!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Vue中的条件渲染</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  <style>
+    .activated{
+      color: red;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <div v-if="show" date-test="v-if">{{massage}}</div>
+    <div v-else>{{massage2}}</div>
+    <div v-show="show" data-test="v-show">{{massage}}</div>
+  </div>
+
+  <div id="app2">
+      <div v-if="show">
+        用户名：<input key="username"/>
+      </div>
+
+      <div v-else>
+        邮箱名：<input key="email">
+      </div>
+    </div>
+
+  <script>
+    var vm = new Vue({
+      el: "#app",
+      data: {
+        show: false,
+        massage: "Hello World",
+        massage2: "Bye World"
+      },
+      methods: {}
+    })
+
+    var vm2 = new Vue({
+      el: "#app2",
+      data: {
+        show: false,
+      },
+      methods: {}
+    })
+  </script>
+</body>
+</html> 
diff --git a/demo/Vue中的样式绑定.html b/demo/Vue中的样式绑定.html
@@ -0,0 +1,70 @@
+<!DOCTYPE <!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>Vue中的样式绑定</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+  <style>
+    .activated{
+      color: red;
+    }
+  </style>
+</head>
+<body>
+  <div id="app">
+    <div @click="handleDivClick" :class="{activated: isActivated}">Hello World</div>
+  </div>
+
+  <div id="app2">
+    <div @click="handleDivClick" :class="[activated, activatedOne]">Hello Vue</div>
+  </div>
+
+  <div id="app3">
+      <div @click="handleDivClick" :style="[styleObj, {fontSize: '20px'}]">Hello style</div>
+    </div>
+
+  <script>
+    var vm = new Vue({
+      el: "#app",
+      data: {
+        isActivated: false
+      },
+      methods: {
+        handleDivClick: function(){
+          this.isActivated = !this.isActivated
+        }
+      }
+    })
+
+    var vm2 = new Vue({
+      el: "#app2",
+      data: {
+        activated: "",
+        activatedOne: "activated-one"
+      },
+      methods: {
+        handleDivClick: function(){
+          this.activated = this.activated === "activated" ? "" : "activated"          
+        }
+      }
+    })
+
+    var vm3 = new Vue({
+      el: "#app3",
+      data: {
+        styleObj:{
+          color: "black"
+        }
+      },
+      methods: {
+        handleDivClick: function(){
+          this.styleObj.color = this.styleObj.color === "black" ? "red" : "black"          
+        }
+      }
+    })
+  </script>
+</body>
+</html> 
diff --git a/life.html → demo/Vue生命周期函数.html b/life.html → demo/Vue生命周期函数.html
diff --git a/example.html → demo/例子.html b/example.html → demo/例子.html
diff --git a/demo/方法绑定.html b/demo/方法绑定.html
@@ -0,0 +1,44 @@
+<!DOCTYPE <!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>方法绑定</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+</head>
+<body>
+  <div id="app">
+    {{fullName}}
+  </div>
+
+  <script>
+    var vm = new Vue({
+      el: "#app",
+      data: {
+        firstName: "Dell",
+        lastName: "Lee",
+      },
+      computed: {
+        fullName: {
+          get: function(){
+            return this.firstName + " " + this.lastName
+          },
+          set: function(value){
+            var arr = value.split(" ");
+            this.firstName = arr[0];
+            this.lastName = arr[1];
+          }
+        }
+      },
+      // methods: {
+      //   fullName: function(){
+      //     return this.firstName + " " + this.lastName
+      //   }
+      // }
+
+    })
+  </script>
+</body>
+</html>
diff --git a/model.html → demo/模板语法.html b/model.html → demo/模板语法.html
diff --git a/demo/组件使用中的细节点.html b/demo/组件使用中的细节点.html
@@ -0,0 +1,110 @@
+<!DOCTYPE <!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <title>组件使用中的细节点</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
+</head>
+<body>
+  <!-- app -->
+  <div id="app">
+    <table>
+      <tbody>
+        <tr is="row" :massage="massage"></tr>
+        <tr is="row" :massage="massage"></tr>
+        <tr is="row" :massage="massage"></tr>
+      </tbody>
+    </table>
+  </div>
+
+  <script>
+    Vue.component('row', {
+      props: ['massage'],
+      template: '<tr><td>{{massage}}</td></tr>'
+    })
+
+    var vm = new Vue({
+      el: "#app",
+      data: {
+        massage: 'this is a row'
+      }
+    })
+  </script>
+
+  <!-- app2 -->
+  <div id="app2">
+    <table>
+      <tbody>
+        <tr is="row2"></tr>
+      </tbody>
+    </table>
+  </div>
+
+  <script>
+    Vue.component('row2', {
+      data: function(){
+        return {
+          massage: 'this is b row'
+        }
+      },
+      template: '<tr><td>{{massage}}</td></tr>'
+    })
+    var vm = new Vue({
+      el: "#app2",
+    })
+  </script>
+
+  <!-- app3 -->
+  <div id="app3">
+    <div ref='hello' @click="handleClick">Hello World</div>
+  </div>
+
+  <script>
+    var vm = new Vue({
+      el: "#app3",
+      methods: {
+        handleClick: function(){
+          console.log(this.$refs.hello.innerHTML)
+        }        
+      }
+    })
+  </script>
+
+<!-- app4 -->
+<div id="app4">
+    <counter ref='one' @change="handleChange"></counter>
+    <counter ref='two' @change="handleChange"></counter>
+    <div>{{total}}</div>
+  </div>
+
+  <script>
+    Vue.component('counter', {
+      template: '<div @click="handleClick">{{number}}</div>',
+      data: function(){
+        return {
+          number: 0
+        }
+      },
+      methods: {
+        handleClick: function(){
+          this.number ++ 
+          this.$emit('change')
+        }
+      }
+    })
+    var vm = new Vue({
+      el: "#app4",
+      data: {
+        total: 0
+      },
+      methods: {
+        handleChange: function(){
+          this.total = this.$refs.one.number + this.$refs.two.number
+        }
+      }
+    })
+  </script>
+</body>
+</html>