简单的vue实例 TodoList 在input框里输入值,删除列表项
一个简单的vue引用1.引入vue.js文件2.设置id3.实例化Vuevar dom = document.getElementById('app');dom.innerHTML='hello world'setTimeout(function () {dom.innerHTML='bye world'},2000)js延时函数在Vue里延时替换innerHTML要指明变量app 要...
一个简单的vue引用
1.引入vue.js文件
2.设置id
3.实例化Vue
var dom = document.getElementById('app');
dom.innerHTML='hello world'
setTimeout(function () {
dom.innerHTML='bye world'
},2000)
js延时函数
在Vue里延时替换innerHTML
要指明变量app 要添加上data的content,这样就不需要关心dom只要关心content就可以。
实现把input框里的内容提交后传送到下面
1.
1.用v-for来循环li标签的内容
data后跟大括号,数组里的东西用单引号括起来
var app = new Vue({
el:'#app',
data:{
list:['第一课的内容','第二课的内容','第三课的内容']
}
})
2.给button绑定click事件 用v-on指令
<button v-on:click="handleBtnClick">提交</button>
3.点击button后,获取input里的内容
3.1在input里绑定数据,<input type="text" v-model="inputValue"><!--inputValue实际上是data数据,而不是方法--
3.2在data里声明数据,data:{
list:[],
inputValue:''
},
再alert 出来 methods:{
handleBtnClick:function () {
alert(this.inputValue) //alert如果弹出的是变量,就不能加引号
}
}
用v-model数据双向绑定,当vue实例的数据变化,页面的内容页会跟着变化
在控制台里输入app.$data.inputValue 点击提交按钮后可以输出文本框理里的内容
4.把input里的内容push到li标签里
把alert方法换成this.list.push(this.inputValue)即可
5.点击提交之后input框里的内容置空
this.inputValue='',把data里的inputValue置空
在vue里都是操作数据而不是dom,操作data里的内容,称为mvvm实际模式
mvp模式
m 指model v 指视图 p 控制器,都是在控制dom,
mvvm模式
当对m层数据改变的时候,v层也会随之改变
组件就是页面上的一个区域
通过组件拆分来完善项目
component是全局组件的方法,
点击提交按钮会在下面渲染出template模板里的东西
但是提交之后push的内容都一样
如何改变呢
1.申明全局组件TodoItem
v-bind:class="classProperty"
中,
v-bind
是指令,
:
后面的
class
是参数,而
classProperty
则在官方文档中被称为“预期值”)
局部组件的定义
点击列表项删除
父组件如何给子组件传值呢
todo-item是子组件,通过一个content变量把item的值传递给todo-item子组件。
子组件如何与父组件传值呢
如何点击列表项之后删除呢
1.在子组件里methods里设置handleItemClick方法里设置this.$smit("delete")
2.当删除子组件的同时,监听子组件删除的事件,一旦方法被执行,就会执行父组件里的方法。在<todo-item>里监听delete方法 @delete="handleItemDelete",
3.在父组件里添加handleItemDelete事件
handleItemDelete:function(){
alert("delete");
}
当点击的时候,就会监听父组件里的方法。
把alert("delete‘’)换成this.list='' 这时发现列表项都被清空了。
如何实现点击一个删除一个呢。需要传入index下标。利用v-bind
更多推荐
所有评论(0)