+ctl, vue

2020-12-20 16:40:44 -05:00 · 2020-12-20 16:40:44 -05:00 · c2ddf9b813
commit c2ddf9b813
parent 4203844295
5 changed files with 142 additions and 0 deletions
--- a/ctl/#ctl.js#
+++ b/ctl/#ctl.js#
@ -0,0 +1,15 @@
+!function()
+{
+    var ctl = {};
+
+    /* class to represent a model-view-controller triple.
+     * all models subclass this 
+     */
+    class Controller {
+	constructor() { this.child_l_ = []; }
+
+	foreach_child(f) {
+	    
+	}
+    }; /*Controller*/
+}();
--- a/ctl/ctl.js
+++ b/ctl/ctl.js
@ -0,0 +1,11 @@
+!function()
+{
+    var ctl = {};
+
+    /* class to represent a model-view-controller triple.
+     * all models subclass this 
+     */
+    class Controller {
+	constructor() { this.child_l_ = []; }
+    }; /*Controller*/
+}();
--- a/vue/hello.html
+++ b/vue/hello.html
@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="utf-8">
+    <title>Vue!</title>
+    <script src="../../ext/vue/vue.js"></script>
+  </head>
+
+  <body>
+    <div id="app">
+      {{ message }}
+    </div>
+
+    <script type="text/javascript">
+      var app = new Vue({
+      el: '#app',
+      data: { message: 'Hello Vue!' }
+      })
+    </script>
+  </body>
+</html>
--- a/vue/index.org
+++ b/vue/index.org
@ -0,0 +1,64 @@
+#+title: vue hello example
+#
+# org-publish options
+# H:2   controls section numbering.  
+#       number top-level and second-level headings only
+# ^:{}  require a_{b} before assuming that b should be subscripted.  
+#       without this option a_b will automatically subscript b.
+#+options: ^:{}
+#
+# options used exclusively by emacs
+#+startup: showall
+#
+# options used exclusively by the html exporter
+#+language: en
+#+infojs_opt: view:showall toc:nil ltoc:nil mouse:#ffc0c0 path:/ext/org/org-info.js
+#+html_head: <link rel="stylesheet" type="text/css" href="../../css/notebook.css" />
+#+html_link_home: ../../index.html
+#+html_link_up: ../../index.org
+#
+
+* Introduction
+  Creating an initial project using Vue (a slightly-more-recent alternative to React)
+  - hello.html from https://vuejs.org/v2/guide/installation.html
+  - also have /Learning Vue.js 2/ (kindle)
+  
+
+* Prerequisites
+  1. A directory tree ~$HTTP_ROOT~ that you can visit in a browser or serve via http.
+     I'm using ~$HOME/Dropbox/public_html~, symlinked from ~$HOME/public_html~.
+
+  2. ~vue~ installed in ~$HTTP_ROOT/ext/vue~:
+     Donwload vue:
+
+     #+begin_example
+     mkdir -p $HOME/public_html/ext/vue
+     (cd ~/$HOME/public_html/ext/vue && wget https://unpkg.com/vue && mv vue vue.js)
+     #+end_example
+
+     #+begin_src sh :results output :exports both
+     ls -l $HOME/public_html/ext/vue
+     #+end_src
+
+     #+RESULTS:
+     : total 264
+     : -rw-rw-r-- 1 roland roland 264975 Jul 21 00:28 vue.js
+
+  3. Optionally,  a webserver making ~$HTTP_ROOT~ available over http,
+     for example:
+     
+     #+begin_example
+     cd $HOME/public_html
+     python -m SimpleHTTPServer 8080
+     #+end_example
+
+* Hello world in Vue
+  [[http:hello.html]]
+
+#+include: "hello.html" example
+
+* skeleton shopping app in Vue
+  http:shopping.html
+
+#+include: "shopping.html" example
+  
--- a/vue/shopping.html
+++ b/vue/shopping.html
@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="utf-8"/>
+    <title>my shopping list</title>
+    <script src="../../ext/vue/vue.js"></script>
+  </head>
+
+  <body>
+    <div class="container">
+      <h2>my shopping list</h2>
+      <div class="input-group">
+	<input placeholder="add shopping list item" type="text" class="js-new-item form-control">
+	<span class="input-group-btn">
+	  <button @click="addItem" class="js-add btn btn-default" type="button">Add</button>
+	</span>
+      </div>
+
+      <ul>
+	<li>
+	  <div class="checkbox">
+	    <label>
+	      <input class="js-item" name="list" type="checkbox">carrot(s)
+	    </label>
+	  </div>
+	</li>
+      </ul>
+  </body>
+</html>