Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
lovecoding
/
W0407
10
0
Салаа 0
Файлууд Асуудлууд 0 Хуулах хүсэлтүүд 0 Мэдлэгийн сан
Эх сурвалжийг харах

vue2

zheng 2 долоо хоног өмнө
parent
36085a6bed
commit
7b7fdedc47
2 өөрчлөгдсөн 91 нэмэгдсэн , 0 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 47 0
      vue/初阶/5.数据绑定.html
  2. 44 0
      vue/初阶/6.vue方法.html

+ 47 - 0
vue/初阶/5.数据绑定.html
Файл харах 

@@ -0,0 +1,47 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <h1>{{msg}}--{{part}}--{{part1}}--{{part2}}</h1>
 
+        <div>
 
+            文本域: <textarea v-model="msg"></textarea>
 
+        </div>
 
+        <div>
 
+            单选: <input type="radio" v-model="part" value="1" />男<input type="radio" v-model="part" value="2" />女
 
+        </div>
 
+        <div>
 
+            多选: <input type="checkbox" v-model="part1" value="1">篮球 <input type="checkbox" v-model="part1" value="2">足球 <input type="checkbox" v-model="part1" value="3">羽毛球
 
+        </div>
 
+        <div>
 
+            <select v-model="part2">
 
+                <option value="1">小学</option>
 
+                <option value="2">初中</option>
 
+                <option value="3">高中</option>
 
+                <option value="4">大学</option>
 
+            </select>
 
+        </div>
 
+    </div>
 
+    <script src="./vue.js"></script>
 
+    <!-- 
+        模版语法：
 
+            插值语法:{{}} 将数据渲染到页面上
 
+            内置指令:v-xxx
 
+    -->
 
+    <script>
 
+        var app = new Vue({
 
+            el:"#app",
 
+            data:{
 
+                msg:"你好啊",
 
+                part: "2",
 
+                part1:["1","3"],
 
+                part2:"2"
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 44 - 0
vue/初阶/6.vue方法.html
Файл харах 

@@ -0,0 +1,44 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>Document</title>
 
+</head>
 
+<body>
 
+    <div id="app">
 
+        <h1>{{timer}}</h1>
 
+    </div>
 
+    <script src="./vue.js"></script>
 
+    <script>
 
+        var app = new Vue({
 
+            el:"#app",
 
+            data:{
 
+                msg:"你好啊",
 
+                timer: ""
 
+            },
 
+            // 生命周期
 
+            created() {
 
+                this.getMain();
 
+            },
 
+            methods:{
 
+                getTime() {
 
+                    let date = new Date();
 
+                    let year = date.getFullYear();
 
+                    let mouth = date.getMonth() + 1;
 
+                    let day = date.getDate();
 
+                    let hours = date.getHours();
 
+                    let minutes = date.getMinutes();
 
+                    let second = date.getSeconds();
 
+                    this.timer = year + '年' + mouth + '月' + day + '日' + hours + '时' + minutes + '分' + second + '秒';
 
+                },
 
+                getMain() {
 
+                    setInterval(()=>{
 
+                        this.getTime()
 
+                    },1000)
 
+                }
 
+            }
 
+        })
 
+    </script>
 
+</body>
 
+</html>