first commit

2024-09-27 02:06:13 +08:00
commit 852d94fbb9
36760 changed files with 3274413 additions and 0 deletions
--- a/历届学生/罗朝/2019-05-14/index.html
+++ b/历届学生/罗朝/2019-05-14/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title> Vue.js </title>
+  <script src="https://vuejs.org/js/vue.js"></script>
+
+</head>
+<body>
+
+  <!-- 所有的html代码都必须要包含在这个顶级父元素内部
+       view 层
+  -->
+  <div id="lb">
+    {{ names }}
+    {{age}}
+    <ul>
+      <li v-for="a in list">{{a.title}} {{a.id}}</li>
+    </ul>
+  </div>
+
+  <script>
+    // Vue  就是 vm
+    new Vue({
+      el: "#lb",   // 告诉Vue你需要监听的页面顶级父元素的id
+      data: {      // Vue开发中，所有的变量基本上都放在data中  数据层 model
+        names: "刘兵",
+        age: 14,
+        list: [
+          {
+            id: 1,
+            title: '新闻1'
+          },
+          {
+            id: 2,
+            title: '新闻2'
+          },
+          {
+            id: 3,
+            title: '新闻3'
+          }
+        ]
+      }
+    })
+
+  </script>
+
+
+
+</body>
+</html>
--- a/历届学生/罗朝/2019-05-14/指令学习.html
+++ b/历届学生/罗朝/2019-05-14/指令学习.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Vue 指令</title>
+  <script src="https://vuejs.org/js/vue.js"></script>
+</head>
+<body>
+  
+
+  <div id="app">
+    {{ message }}
+    <a :href="address" target="_blank">百度</a>
+    <img :src="vueLogo" :alt="message">
+    <button v-on:click="clickMore">点我</button>
+    <p v-html="h2">
+    </p>
+
+    <input @input="clickTwo" v-model="UserInfo.UserName" type="text" placeholder="请输入账户名">
+
+
+    <p v-if="showStatus">未登录</p>
+    <p v-else>已经登录</p>
+    <button @click="changeLoginStatus">切换登录状态</button>
+
+    <p v-for="(a,index) in list" :class="index == 0 ? 'hello' : '' "> {{a}} | {{ index }}</p>
+
+  </div>
+
+
+  <script>
+    /**
+     * 
+     * v-bind: 把莫个变量绑定到标签的莫个属性上
+     * 简写  ":"
+     * 
+     * v-on:  为莫个标签绑定事件
+     * 简写：@
+     * 
+     * v-html： 把字符串解析成html渲染到页面上，类似 innerhtml
+     * 
+     * v-model: 专门用来获取存放输入框里面用户输入的数据
+     * 
+     * v-if : 条件判断，根据条件的真和假决定显示还是隐藏元素
+     * v-else
+     * 
+     * v-if
+     * 
+     * v-else-if
+     * v-else-if
+     * v-else
+     * 
+     * v-for 专门用来变量数组渲染页面的
+     *  
+     */
+    new Vue({
+      el: "#app",
+      data: {
+        message: '你好我是Vue',
+        address: 'http://www.baidu.com',
+        vueLogo: 'https://cn.vuejs.org/images/logo.png',
+        h2: "<h2>我是h2标签</h2>",
+        UserInfo: {
+          UserName: null
+        },
+        showStatus: true,
+        list: [
+          4,5,7,2,4,7
+        ]
+      },
+      // Vue开发中基本上所有的事件处理函数都放在  methods: {} 里面
+      methods: {
+        clickMore() {
+          alert(this.message)
+          //this.clickTwo()
+        },
+
+        clickTwo() {
+          console.log(this.UserName)
+        },
+        changeLoginStatus() {
+          this.showStatus = !this.showStatus
+        }
+      },
+    });
+
+  </script>
+
+</body>
+</html>
--- a/历届学生/罗朝/2019-05-14/笔记.txt
+++ b/历届学生/罗朝/2019-05-14/笔记.txt
@@ -0,0 +1,29 @@
+Vue.js
+
+概念：前端 m(model)v(view)v(view)m(model) 框架
+
+model: 数据(ajax请求后返回的json)
+viewmodel (vm): 数据和页面的中间层 （在ajax数据请求成功后，每次都需要获取父元素然后遍历数据再innerhtml到页面上）
+view 视图层
+
+
+后端：mvc
+
+model(数据)  view(视图 html + css + js)   controller(控制器)
+
+1: view 就是前端用户看到的页面
+2: controller 接受用户在view层产生的具体意图，然后把用户的意图转发到具体的model，交给model来处理
+3：model  主要和数据库进行打交道，完成 controller 传过来的意图
+
+
+view  --->  controller  ----> model
+
+model ---> controller --> view
+
+
+
+Vue用法：
+
+1：传统js用法
+
+2：用过node来使用