遇见Vue的第一天

这篇文章与其说是技术文章，不如说是随笔，就是记录了一天的我。
1、时机
今天是一个比较闲的周一，因为上周加班赶点的将项目上线了。也过了一个非常轻松的周末，周六与干妈去了逛了哈尔滨最大的奥特莱斯——枫叶小镇奥特莱斯（真的好大，东西也很多，值得去哦！），讨论了好多事以及今后的打算，觉得以前过的还是很没有目标的，在加上周日与男票的对话，我觉得开始写博客，记录一下自己学的技术，以及生活状态。
2、准备
准备工作，当然是注册博客了，这个一起已经注册过，但是没有完善过个人信息。到工位的第一件事就是完善个人信息，选头像的用了我半个多小时，主要是任嘉伦太帅了，我无法选择，最后选出如下两张，犹豫~
3、Vue
这个框架之前就听过，今天之所以学这个是因为看了Vue官网的视频。被Vue的响应式深深吸引，如下介绍一下我了解的Vue
（1）目前流行的框架
Angular
React
Vue
（2）特点
Vue是一款友好的(approachable)、多用途(Versatile)且高性能的（Performant）的渐进式的JavaScript框架；Vue创建可维护和可测试性更强的代码库。
（3）具体实现
1. 引入js文件
这个引用的是建议初学的，包含有帮助的命令行警告，然后就可以进行开发了
<script src="https://unpkg.com/vue/dist/vue.js"></script>
2. 创建一个Vue实例
var app = new Vue({ });
3.代码
html文件

<div id="app">
			<p>{{ message }}</p>
			<input v-model = "message" /><br />
			<button v-on:click="reveMessage">按钮</button>
		</div>
		<div id="app_2">
			<ol>
				<todo_item></todo_item>
			</ol>
			<span v-bind:title="message2">
				鼠标悬停，显示提示信息
			</span>
		</div>
		<div id="app_3">
			<p v-if="seen">判断是否</p>
		</div>
		<div id="app4">
			<ol>
				<li v-for="dos in todos">
					{{ dos.text }}
				</li>
			</ol>
		</div>
		<div id="app5">
			<ol>
				<todo-item
				      v-for="item in groceryList"
				      v-bind:todo="item"
				      v-bind:key="item.id"
				></todo-item>
			</ol>
		</div>

js文件

$(function(){
	Vue.component('todo-item', {
	  props: ['todo'],
	  template: '<li>{{ todo.text }}</li>'
	})
	var app5 = new Vue({
		el:'#app5',
		data:{
			groceryList: [
		      { id: 0, text: '干虾' },
		      { id: 1, text: '冰虾' },
		      { id: 2, text: '虾米' }
		    ]
		}
	})
	var app_4 = new Vue({
		el:'#app4',
		data:{
			todos:[
				{text:"1"},
				{text:"2"},
				{text:"3"}
			]
		}
	})
	app_4.todos.push({text:"新增"});
	
	var app_3 = new Vue({
		el:"#app_3",
		data:{
			seen : true
		}
	})
	var app_2 = new Vue({
		el : '#app_2',
		data :{
			message2 : '页面加载于'+new Date().toLocaleTimeString()
		}
	});
	var app = new Vue({
		el: '#app',
		data: {
			message: 'Hello Vue.js!'
		},
		methods : {
			reveMessage : function(){
				//字符串反转
//				this.message = this.message.split('').reverse().join('')
				if(this.message == "Hi"){
					this.message = 'Hello Vue.js!'
				}else{
					this.message = "Hi"
				}
			}
		}
	});
});

4、致谢
只是第一次写博客，写的也比较简单，如存在问题，请见谅~
最后附赠两张 嘉伦的美照（手动流口水）