Strona główna Odkrywaj Pomoc
Zaloguj się
lovecoding
/
VIP26
9
0
Forkuj 0
Pliki Problemy 0 Oczekujące zmiany 0 Wiki
Przeglądaj źródła

day:25

e 1 rok temu
rodzic
f043d02728
commit
a84eb41780
3 zmienionych plików z 63 dodań i 5 usunięć
Zunifikowany widok Pokaż statystyki zmian
  1. 1 1
      day25/html/3.模板语法.html
  2. 23 4
      day25/html/4.vue方法使用.html
  3. 39 0
      day25/html/5.vue的数据绑定指令.html

+ 1 - 1
day25/html/3.模板语法.html
Wyświetl plik 

@@ -9,7 +9,7 @@
 
     <!-- 
     <!-- 
         模板语法:
 
         模板语法:
 
             1.插值语法:{{}} 将data中的数据或者是js的语法片段渲染到页面中
 
             1.插值语法:{{}} 将data中的数据或者是js的语法片段渲染到页面中
 
-            2.内置指令
 
+            2.内置指令:v-xx
 
      -->
 
      -->
 
     <div id="app">
 
     <div id="app">
 
         数字:{{num}}
 
         数字:{{num}}

+ 23 - 4
day25/html/4.vue方法使用.html
Wyświetl plik 

@@ -6,23 +6,42 @@
 
     <title>Document</title>
 
     <title>Document</title>
 
 </head>
 
 </head>
 
 <body>
 
 <body>
 
-    <div id="app"></div>
 
+    <div id="app">
 
+        {{timer}}
 
+    </div>
 
     <script src="../vue.js"></script>
 
     <script src="../vue.js"></script>
 
     <script>
 
     <script>
 
+        // function formData() {
 
+        //             var data = new Date();
 
+        //             var year = data.getFullYear();
 
+        //             var mouth = data.getMonth() + 1;
 
+        //             var day = data.getDate();
 
+        //             var hour = data.getHours();
 
+        //             var minutes = data.getMinutes();
 
+        //             var seconds = data.getSeconds();
 
+        //             this.timer =  year + '年' + mouth + '月' + day + '日' + hour + '时' + minutes + '分' + seconds + '秒'
 
+        //         }
 
         var app = new Vue({
 
         var app = new Vue({
 
             el:"#app",
 
             el:"#app",
 
-            data:{},
 
+            data:{
 
+                timer: null
 
+            },
 
+            // 第一种：生命周期 created 创建前
 
+            created() {
 
+                this.formData();
 
+            },
 
             // 方法
 
             // 方法
 
             methods: {
 
             methods: {
 
+                // formData
 
                 formData() {
 
                 formData() {
 
                     var data = new Date();
 
                     var data = new Date();
 
                     var year = data.getFullYear();
 
                     var year = data.getFullYear();
 
                     var mouth = data.getMonth() + 1;
 
                     var mouth = data.getMonth() + 1;
 
-                    var day = data.getDay();
 
+                    var day = data.getDate();
 
                     var hour = data.getHours();
 
                     var hour = data.getHours();
 
                     var minutes = data.getMinutes();
 
                     var minutes = data.getMinutes();
 
                     var seconds = data.getSeconds();
 
                     var seconds = data.getSeconds();
 
-                    var time = 
+                    this.timer =  year + '年' + mouth + '月' + day + '日' + hour + '时' + minutes + '分' + seconds + '秒'
 
                 }
 
                 }
 
             },
 
             },
 
         })
 
         })

+ 39 - 0
day25/html/5.vue的数据绑定指令.html
Wyświetl plik 

@@ -0,0 +1,39 @@
 
+<!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>
 
+    <!-- 
+        内置指令：
 
+        1.数据绑定的指令 
+            a.v-text 更新数据文本内容 innerText 
+            b.v-html 更新文本内容 innerHTML 可以解析html标签
 
+            c.v-model 数据改变 视图更新 / 视图更新 数据改变 数据双向绑定
 
+                适用于表单里的内容
 
+     -->
 
+    <div id="app">
 
+        <div v-text="text1">{{text}}</div>
 
+        <div v-html="html1">{{html}}</div>
 
+        <input type="text" v-model="input1">
 
+        输入值：{{input1}}
 
+    </div>
 
+    <script src="../vue.js"></script>
 
+    <script>
 
+        var app = new Vue({
 
+            el:"#app",
 
+            data:{
 
+                text: "文字1",
 
+                html: "文字2",
 
+                text1:"<b>今天天气真好</b>",
 
+                html1: "<b>开学了</b>",
 
+                input1: ""
 
+            },
 
+            methods: {
 
+            },
 
+        })
 
+    </script>
 
+</body>
 
+</html>