Home Explore Project
Register Sign In
lyq
/
nodejs-note
1
31
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

add vue note

liuyuqi-dellpc 7 years ago
parent
9196aa1aa2
commit
09e76d6c79
8 changed files with 242 additions and 0 deletions
Split View Show Diff Stats
  1. 3 0
      express/README.md
  2. 43 0
      express/express_demo.1.js
  3. 16 0
      express/express_demo.js
  4. 31 0
      vue/basic/test1.html
  5. 26 0
      vue/basic/test2.html
  6. 41 0
      vue/basic/test3.html
  7. 40 0
      vue/basic/test4.html
  8. 42 0
      vue/basic/test5.html

+ 3 - 0
express/README.md
View File 

@@ -0,0 +1,3 @@
 
+node express/express_demo.js
 
+
 
+

+ 43 - 0
express/express_demo.1.js
View File 

@@ -0,0 +1,43 @@
 
+var express = require('express');
 
+var app = express();
 
+ 
+//  主页输出 "Hello World"
 
+app.get('/', function (req, res) {
 
+   console.log("主页 GET 请求");
 
+   res.send('Hello GET');
 
+})
 
+ 
+ 
+//  POST 请求
 
+app.post('/', function (req, res) {
 
+   console.log("主页 POST 请求");
 
+   res.send('Hello POST');
 
+})
 
+ 
+//  /del_user 页面响应
 
+app.get('/del_user', function (req, res) {
 
+   console.log("/del_user 响应 DELETE 请求");
 
+   res.send('删除页面');
 
+})
 
+ 
+//  /list_user 页面 GET 请求
 
+app.get('/list_user', function (req, res) {
 
+   console.log("/list_user GET 请求");
 
+   res.send('用户列表页面');
 
+})
 
+ 
+// 对页面 abcd, abxcd, ab123cd, 等响应 GET 请求
 
+app.get('/ab*cd', function(req, res) {   
+   console.log("/ab*cd GET 请求");
 
+   res.send('正则匹配');
 
+})
 
+ 
+ 
+var server = app.listen(8081, function () {
 
+ 
+  var host = server.address().address
 
+  var port = server.address().port
 
+ 
+  console.log("应用实例，访问地址为 http://%s:%s", host, port)
 
+ 
+})

+ 16 - 0
express/express_demo.js
View File 

@@ -0,0 +1,16 @@
 
+//express_demo.js 文件
 
+var express = require('express');
 
+var app = express();
 
+ 
+app.get('/', function (req, res) {
 
+   res.send('Hello World');
 
+})
 
+ 
+var server = app.listen(8081, function () {
 
+ 
+  var host = server.address().address
 
+  var port = server.address().port
 
+ 
+  console.log("应用实例，访问地址为 http://%s:%s", host, port)
 
+ 
+})

+ 31 - 0
vue/basic/test1.html
View File 

@@ -0,0 +1,31 @@
 
+<html>
 
+<title>test1</title>
 
+<<head>
 
+    <!-- 开发环境版本，包含了用帮助的命令行警告 -->
 
+    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
 
+    <!-- 生产环境版本，优化了尺寸和速度 -->
 
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
+    </head>
 
+
 
+    <body>
 
+        <div id="app">
 
+           <span>Message: {{ message }}</span>
 
+           <!-- 当数据改变时，插值处的内容不会更新。 -->
 
+           <span v-once>这个将不会改变: {{ message }}</span>
 
+
 
+           <p>Using mustaches: {{ rawHtml }}</p>
 
+           <p>Using v-html directive: <span v-html="rawHtml"></span></p>
 
+           <div v-bind:id="dynamicId"></div>
 
+
 
+        </div>
 
+    </body>
 
+    <script>
 
+        var app = new Vue({
 
+            el: '#app',
 
+            data: {
 
+                message: 'Hello Vue!'
 
+            }
 
+        })
 
+    </script>
 
+
 
+</html>

+ 26 - 0
vue/basic/test2.html
View File 

@@ -0,0 +1,26 @@
 
+<html>
 
+<title>test1</title>
 
+<<head>
 
+    <!-- 开发环境版本，包含了用帮助的命令行警告 -->
 
+    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
 
+    <!-- 生产环境版本，优化了尺寸和速度 -->
 
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
+    </head>
 
+
 
+    <body>
 
+        <div id="app-2">
 
+            <span v-bind:title="message">
 
+                    3          鼠标悬停几秒钟查看此处动态绑定的提示信息！
 
+            </span>
 
+        </div>
 
+    </body>
 
+    <script>
 
+        var app2 = new Vue({
 
+            el: '#app-2',
 
+            data: {
 
+                message: '页面加载于 ' + new Date().toLocaleString()
 
+            }
 
+        })
 
+    </script>
 
+
 
+</html>

+ 41 - 0
vue/basic/test3.html
View File 

@@ -0,0 +1,41 @@
 
+<html>
 
+<title>test1</title>
 
+<<head>
 
+    <!-- 开发环境版本，包含了用帮助的命令行警告 -->
 
+    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
 
+    <!-- 生产环境版本，优化了尺寸和速度 -->
 
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
+    </head>
 
+
 
+    <body>
 
+        <div id="app-3">
 
+            <p v-if="seen">现在你看到我了</p>
 
+        </div>
 
+        <div id="app-4">
 
+            <ol>
 
+                <li v-for="todo in todos">
 
+                    {{ todo.text }}
 
+                </li>
 
+            </ol>
 
+        </div>
 
+    </body>
 
+    <script>
 
+        var app3 = new Vue({
 
+            el: '#app-3',
 
+            data: {
 
+                seen: true
 
+            }
 
+        })
 
+        var app4 = new Vue({
 
+            el: '#app-4',
 
+            data: {
 
+                todos: [
 
+                    { text: '学习 JavaScript' },
 
+                    { text: '学习 Vue' },
 
+                    { text: '整个牛项目' }
 
+                ]
 
+            }
 
+        })
 
+    </script>
 
+
 
+</html>

+ 40 - 0
vue/basic/test4.html
View File 

@@ -0,0 +1,40 @@
 
+<html>
 
+<title>test1</title>
 
+<<head>
 
+    <!-- 开发环境版本，包含了用帮助的命令行警告 -->
 
+    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
 
+    <!-- 生产环境版本，优化了尺寸和速度 -->
 
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
+    </head>
 
+
 
+    <body>
 
+        <div id="app-5">
 
+            <p>{{ message }}</p>
 
+            <button v-on:click="reverseMessage">逆转消息</button>
 
+        </div>
 
+        <div id="app-6">
 
+            <p>{{ message }}</p>
 
+            <input v-model="message">
 
+        </div>
 
+    </body>
 
+    <script>
 
+        var app5 = new Vue({
 
+            el: '#app-5',
 
+            data: {
 
+                message: 'Hello Vue.js!'
 
+            },
 
+            methods: {
 
+                reverseMessage: function () {
 
+                    this.message = this.message.split('').reverse().join('')
 
+                }
 
+            }
 
+        })
 
+        var app6 = new Vue({
 
+            el: '#app-6',
 
+            data: {
 
+                message: 'Hello Vue!'
 
+            }
 
+        })
 
+    </script>
 
+
 
+</html>

+ 42 - 0
vue/basic/test5.html
View File 

@@ -0,0 +1,42 @@
 
+<html>
 
+<title>test1</title>
 
+<<head>
 
+    <!-- 开发环境版本，包含了用帮助的命令行警告 -->
 
+    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
 
+    <!-- 生产环境版本，优化了尺寸和速度 -->
 
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
 
+    </head>
 
+
 
+    <body>
 
+        <div id="app-7">
 
+            <ol>
 
+                <!--
 
+                    现在我们为每个 todo-item 提供 todo 对象
 
+                    todo 对象是变量，即其内容可以是动态的。
 
+                    我们也需要为每个组件提供一个“key”，稍后再
 
+                    作详细解释。
 
+                  -->
 
+                <todo-item v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">
 
+                </todo-item>
 
+            </ol>
 
+        </div>
 
+    </body>
 
+    <script>
 
+        Vue.component('todo-item', {
 
+            props: ['todo'],
 
+            template: '<li>{{ todo.text }}</li>'
 
+        })
 
+
 
+        var app7 = new Vue({
 
+            el: '#app-7',
 
+            data: {
 
+                groceryList: [
 
+                    { id: 0, text: '蔬菜' },
 
+                    { id: 1, text: '奶酪' },
 
+                    { id: 2, text: '随便其它什么人吃的东西' }
 
+                ]
 
+            }
 
+        })
 
+    </script>
 
+
 
+</html>