lv7777/app.js

## app.js
var express=require("express");
var app=express();
var strage=[];
/**
 * wrap in {} in
 * id:number
 * title:string
 * content:string
 *
 */

app.use("/",express.static("/"));
app.get("/",function(req,res,next){
     console.log("ss")
    res.sendfile("index.html");
})
app.get("/vue.js",function(req,res,next){
    // console.log("ssss")
    res.sendfile("vue.js");
})
app.get("/index.js",function(req,res,next){
    res.sendfile("index.js");
})
app.get("/load",function(req,res,next){
    console.log("/load");
    console.log(strage)
    res.send({
        arr:strage
    });
})

app.get("/add",function(req,res,next){
    console.log("/add");
    var id;
    if(strage.length){
        console.log(strage);
        console.log("/add");
       id=(strage[strage.length-1].id)++
    }else{
        id=0
    }
    var obj={
        title:req.query.title,
        content:req.query.content,
        id:id
    }
    strage.push(obj)
    console.log(obj)
});


app.listen(3000)

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Vue.js todo app</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
  <!--<script src="vue.js"></script>-->
  <script src="index.js"></script>
</head>
<body>
    <div id="titleid">{{title}}and{{title2}}</div>
    <div id="statusid" v-show="show">{{status}}</div>
    <div id="main" >
        <ul v-for="item in lists">
            <li>{{item.title}}</li>
            <li>{{item.content}}</li>
        </ul>
    </div>
    <div id="input">
    <input type="text" id="titleinput" v-model="titleinputbind">
        <input type="text" id="contentinput" v-model="contentinputbind">
    </div>
    <div id="modelss"><button  v-on:click="add">add</button>
        <button  v-on:click="load">load</button>
    </div>
  </div>
</body>
</html>

## index.js
window.onload = function() {
    new Vue({
       el:"#titleid",
       data:{
           title:"default"
       },
       created:function(){
           this.title="changed"
           this.title2="changed"
       }
    });
   var stat= new Vue({
        el:"#statusid",
        data:{
            status:"",
            show:false
        }
    })
    var vm=new Vue({
        el:"#main",
        data:{
            lists:[
                {title:"helo",content:"aa"},{title:"e",content:"fa"}
            ]//この中にはまずobject,その中にtitle,contents
        }

    })
    var input=new Vue({
        el:"#input",
        data:{
            titleinputbind:"xxxxxxxxx",
            contentinputbind:";;;;;;;;;;;"
        }
    })
    new Vue({
        el:"#modelss",
        data:{

        },
        methods:{
            add:function(){
                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange=function () {
                    if(xhr.readyState==4&&xhr.status==200){
                        if("ok"==JSON.parse(xhr.responseText)){
                            console.log("ok")
                        }else{
                           // throw new Error("wwwwwww");
                        }
                    }
                }
                xhr.open("GET","http://localhost:3000/add?title="+input.titleinputbind+"&content="+input.contentinputbind);
                xhr.send(null);
            },
            load:function(){
                //vmにserverから値をfetchしてきてpushする。
                var xhr=new XMLHttpRequest();
                xhr.onreadystatechange=function(){
                    if(xhr.readyState==4&&xhr.status==200){
                        var arr=JSON.parse(xhr.responseText).arr;
                        console.log(arr)
                        for(var i of arr){
                            vm.lists.push({
                                title:i.title,
                                content:i.content
                            })
                            //TODO:重複を消す。
                        }
                    }
                }
                xhr.open("GET","http://localhost:3000/load");
                xhr.send(null);
            }
        }
    })
};
	var express=require("express");
	var app=express();
	var strage=[];
	/**
	* wrap in {} in
	* id:number
	* title:string
	* content:string
	*
	*/

	app.use("/",express.static("/"));
	app.get("/",function(req,res,next){
	console.log("ss")
	res.sendfile("index.html");
	})
	app.get("/vue.js",function(req,res,next){
	// console.log("ssss")
	res.sendfile("vue.js");
	})
	app.get("/index.js",function(req,res,next){
	res.sendfile("index.js");
	})
	app.get("/load",function(req,res,next){
	console.log("/load");
	console.log(strage)
	res.send({
	arr:strage
	});
	})

	app.get("/add",function(req,res,next){
	console.log("/add");
	var id;
	if(strage.length){
	console.log(strage);
	console.log("/add");
	id=(strage[strage.length-1].id)++
	}else{
	id=0
	}
	var obj={
	title:req.query.title,
	content:req.query.content,
	id:id
	}
	strage.push(obj)
	console.log(obj)
	});



	app.listen(3000)
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Vue.js todo app</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
	<!--<script src="vue.js"></script>-->
	<script src="index.js"></script>
	</head>
	<body>
	<div id="titleid">{{title}}and{{title2}}</div>
	<div id="statusid" v-show="show">{{status}}</div>
	<div id="main" >
	<ul v-for="item in lists">
	<li>{{item.title}}</li>
	<li>{{item.content}}</li>
	</ul>
	</div>
	<div id="input">
	<input type="text" id="titleinput" v-model="titleinputbind">
	<input type="text" id="contentinput" v-model="contentinputbind">
	</div>
	<div id="modelss"><button v-on:click="add">add</button>
	<button v-on:click="load">load</button>
	</div>
	</div>
	</body>
	</html>
	window.onload = function() {
	new Vue({
	el:"#titleid",
	data:{
	title:"default"
	},
	created:function(){
	this.title="changed"
	this.title2="changed"
	}
	});
	var stat= new Vue({
	el:"#statusid",
	data:{
	status:"",
	show:false
	}
	})
	var vm=new Vue({
	el:"#main",
	data:{
	lists:[
	{title:"helo",content:"aa"},{title:"e",content:"fa"}
	]//この中にはまずobject,その中にtitle,contents
	}

	})
	var input=new Vue({
	el:"#input",
	data:{
	titleinputbind:"xxxxxxxxx",
	contentinputbind:";;;;;;;;;;;"
	}
	})
	new Vue({
	el:"#modelss",
	data:{

	},
	methods:{
	add:function(){
	var xhr=new XMLHttpRequest();
	xhr.onreadystatechange=function () {
	if(xhr.readyState==4&&xhr.status==200){
	if("ok"==JSON.parse(xhr.responseText)){
	console.log("ok")
	}else{
	// throw new Error("wwwwwww");
	}
	}
	}
	xhr.open("GET","http://localhost:3000/add?title="+input.titleinputbind+"&content="+input.contentinputbind);
	xhr.send(null);
	},
	load:function(){
	//vmにserverから値をfetchしてきてpushする。
	var xhr=new XMLHttpRequest();
	xhr.onreadystatechange=function(){
	if(xhr.readyState==4&&xhr.status==200){
	var arr=JSON.parse(xhr.responseText).arr;
	console.log(arr)
	for(var i of arr){
	vm.lists.push({
	title:i.title,
	content:i.content
	})
	//TODO:重複を消す。
	}
	}
	}
	xhr.open("GET","http://localhost:3000/load");
	xhr.send(null);
	}
	}
	})
	};