first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/吴欣阳/每天课程/2021-07-16/vue/index.html
+++ b/历届学生/吴欣阳/每天课程/2021-07-16/vue/index.html
@@ -0,0 +1,91 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Title</title>
+  <style>
+      [v-cloak] {
+          display: none;
+      }
+  </style>
+</head>
+<body>
+
+<div class="app" v-cloak>
+  <h1>{{ test }}</h1>
+  <a :href="url">你好</a>
+
+  <div v-html="h2html"></div>
+  <div v-text="h2html"></div>
+
+  <ul>
+    <li v-for="(v,i) in newsList" :key="i">
+      {{ i }} ：{{ v.title }}
+    </li>
+  </ul>
+
+
+  <div v-show="isShow">
+    v-show 指令学习
+  </div>
+
+  <div v-if="vipLeave == 1">vip1</div>
+  <div v-else-if="vipLeave == 2">vip2</div>
+  <div v-else-if="vipLeave == 3">vip3</div>
+  <div v-else-if="vipLeave == 4">vip4</div>
+  <div v-else>暂无vip</div>
+
+
+  <input  type="text" v-model="userName" placeholder="请输入用户名">
+
+  {{ userName }}
+
+  <div v-once>{{userName}}</div>
+
+  <button @click="hello(1)">登 录</button>
+
+  <span v-pre>{{ test }}</span>
+
+
+
+</div>
+
+</body>
+<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
+<script>
+  // vue 指令
+  // v-bind  将变量绑定到标签的属性上 简写 :
+  // v-html  将变量渲染为html
+  // v-text  将变量渲染为text文本
+  // v-for   遍历数组
+  // v-show  根据一个变量的true或false决定元素是否显示  只是对元素进行 display none 和 block 的设置
+  // v-if v-else  不符合条件的元素，不在代码里面显示，直接被删除
+  // v-model 获取输入框的内容
+  // v-on    绑定点击事件  @
+ var vm = new Vue({
+    el: ".app",
+    data: {
+      test: '你好我是vue',
+      url: "http://www.netbian.com/dongman/",
+      h2html: "<h2>我是h2</h2>",
+      newsList: [
+        { title: '测试新闻1',id: 1 },
+        { title: '测试新闻2',id: 2 },
+        { title: '测试新闻3',id: 3 },
+        { title: '测试新闻4',id: 4 },
+        { title: '测试新闻5',id: 5 }
+      ],
+      isShow: false,
+      vipLeave: 3,
+      userName: "张三"
+    },
+    methods: {
+      hello(a) {
+        console.log(a)
+        console.log(this.userName)
+      },
+      test2() {}
+    }
+  })
+</script>
+</html>