vue.js--简易todoList-原创手记-慕课网

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
				<input type="text" v-model="inputValue">
				<!-- 10.我们接下来还需要去拿到这个内容，就需要在搜索框中绑定，在这里v-model
				 是代表双向数据绑定的作用，-->
				<button v-on:click="handleBtnClick"> 提交 </button>
				<!-- 7. 用v-on的指令来绑定一个点击事件-->
				<ul>
					<!-- <li>第一课的内容</li> -->
					<li v-for='item in list'>{{item}}</li>
					<!-- 5.这里的意思是  告诉vue 我这里面要去循环list这个数据，
					然后循环的每一项我都要放在item里面 插值表达式这里我就可以用item，
					代表list中的每一项，会把list中的每一项当做item进行循环，比如这个list数据
					有两项，那么就会循环出两个li标签
					list--指的是data中的list里面的内容
					item--循环的过程中每一项的内容
					-->
				</ul>
		</div>
		
		<script>
			/* 1.首先创建vue的实例 */
			var app = new Vue({
				el:"#app",
				/*2. 可以看到li标签的两个内容都是写死在页面上的，实际上他是获得数据，
				 根据数据循环显示出来的内容*/
				 data:{
					/*3. 可以写一个data，data是固定的写法，指的是vue实例里面的一些具体的数据
					有一个数据叫做list，里面有两组数据  内容分别是 第一课的内容 第二课的内容 */
					 // list:['第一课的内容111','第二课的内容222','第三课的内容333'],
					 /* 4.写到这里在li标签上就可以借助v-xx的指令来实现数据的渲染了*/
					 
					 list:[],
					 /* 6.到了这里我们希望的是刷新页面的时候下面没有显示任何的数据的
					 但是在搜索之后按钮提交，就要在下面显示出来数据的，这需要在按钮上
					 面绑定一个事件*/
					 inputValue:'',
					 /* 11.  但是在浏览器上可以测试到  app.$data.inputValue出来的结果就是“”
					 */
					 },
					 methods:{
						 /* 8. 就是在vue的实例中增加methods的属性*/
						 handleBtnClick:function(){
							 // alert("我被点击啦");
							 /* 9.click的点击代表只要点击了我就会执行click'的方法
							 这个vue实例接管了这个模板，vue会知道当模板点击了这个
							 按钮执行的时候，会自动到methods方法里面找名字为handleBtnClick
							 的方法，就会自动执行这个方法中的内容了*/
							 // alert(this.inputValue);
							 /* 12. this.inputValue  是为了跟上面data数据中的inputValue做一个
							 绑定，能够拿到到搜索框获取的值*/
							 this.list.push(this.inputValue);
							 /* 13. 我们都知道ul这个列表li，到底显示多少个是由data中的list数组
							 来决定的，我每一次提交的按钮，往这个list数组里面去添加内容，当数据发
							 生变化时候，页面是不是也能跟着变化（增加了），调用data中的list数组 this.list
							 往里面推进push方法，让数组里面放置的是搜索的数据
							 */
						 },
				
			},
			})
			/* 总结：
			 页面中的内容是是放在list数组中的，input框的内容是放在inputValue中的
			 当我在页面上做了一些操作的时候，触发点击事件之后，我们要做到的是改编数据，页面
			 也就会自动的发生了变化，这种形式就是一种模式 MVVM模式，不会涉及到dom的操作
			 只是修改数据层，只是我们在进行数据边锋的时候，vue的底层会根据数据的不同帮助我们重新的
			 渲染页面*/
		</script>
	</body>
</html>