tnoborio/core.cljs

## core.cljs
(ns hoge.core
  (:use [clojure.string :only [reverse]]))

(def app (js/Vue. (clj->js {:el "#app"
                            :data {:message "Hello Vue from ClojureScript!"}})))

;; (set! (.-message app) "new message")

(def app2 (js/Vue. (clj->js {:el "#app-2"
                             :data {:message (str "You loaded this page on " (js/Date.))}})))

;; (set! (.-message app2) "some new message")

(def app3 (js/Vue. (clj->js {:el "#app-3"
                             :data {:seen true}})))

;; (set! (.-seen app3) false)

(def todos [{:text "Learn JavaScript"}
            {:text "Learn Vue"}
            {:text "Build something awesome"}])

(def app4 (js/Vue. (clj->js {:el "#app-4"
                             :data {:todos todos}})))

;; (.push (.-todos app4) (clj->js {:text "Learn ClojureScript"}))

(defn reverse-message! []
  (this-as this
           (set! (.-message this)
                 (reverse (.-message this)))))

(def app5 (js/Vue. (clj->js {:el "#app-5"
                             :data {:message "Hello Vue.js!"}
                             :methods {:reverseMessage reverse-message!}})))


(def app6 (js/Vue. (clj->js {:el "#app-6"
                             :data {:message "Hello Vue from ClojureScript!"}})))

(.component js/Vue "todo-item"
            (clj->js {
                      :props ["todo"]
                      :template "<li>{{ todo.text }}</li>"}))

(def groceries [{:text "Vegetables"}
                {:text "Cheese" }
                {:text "Whatever else humans are supposed to eat"}])

(def app7 (js/Vue. (clj->js {:el "#app-7"
                             :data {:groceryList groceries}})))

## index.html
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>app</h1>
    <div id="app">
      {{ message }}
    </div>
    <h1>app2</h1>
    <div id="app-2">
      <span v-bind:title="message">
	Hover your mouse over me for a few seconds
	to see my dynamically bound title!
      </span>
    </div>
    <h1>app3</h1>
    <div id="app-3">
      <p v-if="seen">Now you see me</p>
    </div>
    <h1>app4</h1>
    <div id="app-4">
      <ol>
	<li v-for="todo in todos">
	  {{ todo.text }}
	</li>
      </ol>
    </div>
    <h1>app5</h1>
    <div id="app-5">
      <p>{{ message }}</p>
      <button v-on:click="reverseMessage">Reverse Message</button>
    </div>
    <h1>app6</h1>
    <div id="app-6">
      <p>{{ message }}</p>
      <input v-model="message">
    </div>
    <h1>app7</h1>
    <div id="app-7">
      <ol>
	<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
      </ol>
    </div>
    <script src="https://unpkg.com/vue"></script>
    <script src="main.js" type="text/javascript"></script>
  </body>
</html>
	(ns hoge.core
	(:use [clojure.string :only [reverse]]))

	(def app (js/Vue. (clj->js {:el "#app"
	:data {:message "Hello Vue from ClojureScript!"}})))

	;; (set! (.-message app) "new message")

	(def app2 (js/Vue. (clj->js {:el "#app-2"
	:data {:message (str "You loaded this page on " (js/Date.))}})))

	;; (set! (.-message app2) "some new message")

	(def app3 (js/Vue. (clj->js {:el "#app-3"
	:data {:seen true}})))

	;; (set! (.-seen app3) false)

	(def todos [{:text "Learn JavaScript"}
	{:text "Learn Vue"}
	{:text "Build something awesome"}])

	(def app4 (js/Vue. (clj->js {:el "#app-4"
	:data {:todos todos}})))

	;; (.push (.-todos app4) (clj->js {:text "Learn ClojureScript"}))

	(defn reverse-message! []
	(this-as this
	(set! (.-message this)
	(reverse (.-message this)))))

	(def app5 (js/Vue. (clj->js {:el "#app-5"
	:data {:message "Hello Vue.js!"}
	:methods {:reverseMessage reverse-message!}})))


	(def app6 (js/Vue. (clj->js {:el "#app-6"
	:data {:message "Hello Vue from ClojureScript!"}})))

	(.component js/Vue "todo-item"
	(clj->js {
	:props ["todo"]
	:template "<li>{{ todo.text }}</li>"}))

	(def groceries [{:text "Vegetables"}
	{:text "Cheese" }
	{:text "Whatever else humans are supposed to eat"}])

	(def app7 (js/Vue. (clj->js {:el "#app-7"
	:data {:groceryList groceries}})))
	<!DOCTYPE html>
	<html>
	<head></head>
	<body>
	<h1>app</h1>
	<div id="app">
	{{ message }}
	</div>
	<h1>app2</h1>
	<div id="app-2">
	<span v-bind:title="message">
	Hover your mouse over me for a few seconds
	to see my dynamically bound title!
	</span>
	</div>
	<h1>app3</h1>
	<div id="app-3">
	<p v-if="seen">Now you see me</p>
	</div>
	<h1>app4</h1>
	<div id="app-4">
	<ol>
	<li v-for="todo in todos">
	{{ todo.text }}
	</li>
	</ol>
	</div>
	<h1>app5</h1>
	<div id="app-5">
	<p>{{ message }}</p>
	<button v-on:click="reverseMessage">Reverse Message</button>
	</div>
	<h1>app6</h1>
	<div id="app-6">
	<p>{{ message }}</p>
	<input v-model="message">
	</div>
	<h1>app7</h1>
	<div id="app-7">
	<ol>
	<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
	</ol>
	</div>
	<script src="https://unpkg.com/vue"></script>
	<script src="main.js" type="text/javascript"></script>
	</body>
	</html>