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

vue2

e 9 сар өмнө
parent
f1cddff961
commit
ecfcb05523
3 өөрчлөгдсөн 97 нэмэгдсэн , 0 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 13 0
      vue/vue初阶/1.html
  2. 46 0
      vue/vue初阶/4.计时器.html
  3. 38 0
      vue/vue初阶/5.内置指令.html

+ 13 - 0
vue/vue初阶/1.html
Файл харах 

@@ -0,0 +1,13 @@
 
+<!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>
 
+    <script>
 
+        // alert(innerText("<h1>哈哈哈</h1>"))
 
+    </script>
 
+</body>
 
+</html>

+ 46 - 0
vue/vue初阶/4.计时器.html
Файл харах 

@@ -0,0 +1,46 @@
 
+<!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">
 
+        {{timer}}
 
+    </div>
 
+    <script src="./vue.js"></script>
 
+    <script>
 
+        var app = new Vue({
 
+            el:"#app",
 
+            data:{
 
+                // 全局 => windows => this
 
+                timer:""
 
+            },
 
+            // 生命周期
 
+            // 在页面创建完成后 就可以执行对应的操作
 
+            created(){
 
+                setInterval(()=>{this.newTime()},1000)
 
+                // setInterval定时器 反复执行
 
+                // setTimeOut 延时器 执行一次
 
+            },
 
+            // 方法
 
+            methods: {
 
+              newTime() {
 
+                // var new1 = '2024-10-1 12:00:00';
 
+                var date = new Date();
 
+                var years = date.getFullYear();
 
+                // getMonth() 0-11
 
+                var months = date.getMonth() + 1;
 
+                var days = date.getDate();
 
+                var hours = date.getHours();
 
+                var minutes = date.getMinutes();
 
+                var seconds = date.getSeconds();
 
+                this.timer = years + '年' + months + '月' + days + '日' + hours + ':' + minutes + ':' + seconds;
 
+                console.log(this.timer);
 
+              }
 
+            },
 
+        })
 
+    </script>
 
+</body>
 
+</html>

+ 38 - 0
vue/vue初阶/5.内置指令.html
Файл харах 

@@ -0,0 +1,38 @@
 
+<!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>
 
+    <!--
 
+        内置指令:
 
+            v-xxx 
+        数据绑定相关的内置指令:
 
+        1.v-text:更新文本内容innerText
 
+        2.v-html：更新文本内容 innerHtml 解析了标签
 
+        3.v-model: 适用于表单去进行双向数据绑定（视图 => 数据 / 数据 => 视图）
 
+    -->
 
+    <div id="app">
 
+        <div v-text="text1">{{text1}}</div>
 
+        <div v-html="text1">{{text1}}</div>
 
+        <input type="text" v-model="input1"  name="" id="">
 
+        <!-- <div v-model="text2"></div>
 
+         <button>获取</button> -->
 
+    </div>
 
+    <script  src="./vue.js"></script>
 
+    <script>
 
+        var app = new Vue({
 
+            el:"#app",
 
+            data:{
 
+                text1:"<h1>你好</h1>",
 
+                text2:"你好你好",
 
+                input1:"hello1"
 
+            },
 
+            created() {
 
+            },
 
+        })
 
+    </script>
 
+</body>
 
+</html>