-
完善删除功能
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
<div id="root">
<input v-model="inputValue" />
<button @click="submit">提交</button>
<ul>
<to-do v-for="(item,index) in list" :key="index" :a="item" :b="index" :c="list"></to-do>
</ul>
</div>
<script>
new Vue({
el: '#root',
data: {
inputValue: '',
list: []
},
components: {
'to-do': {
props: ['a', 'b','c'],
template: '<li>{{a}} <button @click="del(b,c)"><i>X</i></button></li>', //mmp 点击事件方法名千万别命名delete......js关键字，我想静静
methods: {
del: function(index,array){
console.log(index)
console.log(array)
array.splice(index, 1);
}
}
}
},
methods: {
submit: function(){
this.list.push(this.inputValue)
this.inputValue = ''
}
}
})
</script>
</body>
</html>
查看全部 -
双向数据绑定
v-model已绑定value
v-model="数据名"
查看全部 -
vue事件的绑定查看全部
-
vue事件的绑定查看全部
-
v-text v-html查看全部
-
父组件通过属性向子组件传递数据，子组件发布事件xxx，父组件订阅事件@xxx。
子组件可以使用 $emit 触发父组件的自定义事件
查看全部 -
在html里写的vue中 data 是对象 在vue组件中 <script>中data()
是函数查看全部 -
v-on 代表绑定一个事件，v-on:可简写成@ 所以v-on:click="handleclick"等价于@click="handleclick"查看全部
-
v-bind:title="test" 绑定属性
事件绑定@ 与 v-on：click="method"一样
属性绑定： 与 v-bind:title="tile" 一样
查看全部 -
如果new Vue({ })的实例中未定义模板template,那么系统默认到挂载点找，将挂载点下的所有东西变为模板。
每个组件也是一个小的实例。
查看全部 -
父子组件传值的问题
查看全部 -
挂载点：vue实例里面的el属性对应的id。
模板：挂载点内部的内容都叫模板内容。
查看全部 -
看了好几遍没有找到我错在哪里了，后来重新从vue init webpack todolist 重做，重打了一遍，就好了，好像是因为空格的个数？
查看全部 -
build目录下放置的是项目的webpack配置文件，可以不动
config是针对线上环境和开发环境的配置文件，也可以不动
node_modules 指的是项目的依赖
src 指的是源代码放置的目录
static放置的是静态的资源
src中的main.js文件是整个项目的入口文件
vue-cli提供了一种新的vue的编码语法：单文件组件（一个.vue文件中包含了一个组件里必须的所有内容）
vue-cli的优势：
1可以使用es6。
2一个组件是一个.vue的文件所定义的，实现了组件的封装。
（在安装该工具之前需要安装npm和node）
查看全部 -
Vue-cli自带了webpack的各种配置，借助该工具，可以迅速上手工程级别vue项目的开发。
npm install --global vue-cli
vue init webpack todolist
查看全部
举报