学习Vue的第二天（使用VS code写Vue）

使用Vue.js实现TodoList

1.实现通过input框向正在进行的列表值中增加列表项内容并完成提交功能

①在视图层实现简单的布局。（了解）

<div id="app">
	<input type="text"/>
	<button>提交</button>
	<ul>
		<li>first text</li>
		<li>second text</li>
	</ul>
</div>

②在逻辑层实现简单的布局。

<div>
	...
    <ul>
        <li v-for="item in list">{
  {item}}</li>
    </ul>
	...
</div>

<script>
	var app = new Vue({     //创建Vue的实例
		el: '#app',         //传一个对象选择接管dom的局域
		data: {    			//指Vue里的具体数据
			list: ['first text', 'second text']
		}
	})
</script>

tip：运行结果同上

知识点：v-for = “item in list”，即告诉Vue要去循环list的数据，且循环的每一项放入item中，所以使用{ {item}}。

③在逻辑层实现在input输入数据，点击“提交”按钮可把数据送到下面的列表。

<!--实现数据获取的打印-->
<div>
    <input type="text" v-model="inputValue"/>
    <button v-on:click="handleBtnClick">提交</button> 
	...
</div>

<script>
    var app = new Vue({     //创建Vue的实例
        el: '#app',              //传一个对象选择接管dom的局域
        data: {     //指Vue里的具体数据
            list: [],
            inputValue: ''
        },
        //在button标签中定义好函数后需要在方法中定义handleBtnClick方法(在Vue实例中)
        methods: {
            handleBtnClick: function(){
                alert(this.inputValue)  //自动寻找inputValue
            }
        }
    })
</script>

<!--实现在input输入数据，点击“提交”按钮可把数据送到下面的列表-->
methods: {
     handleBtnClick: function(){
    	 this.list.push(this.inputValue)     //往list里增加内容
	}
}