Rvie
2020-02-04 10:46:19浏览 5633
<!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>