Vue：计算属性，内容分发，【自定义事件】
1.自定义事件
注：涉及到的JavaScript语法
2.代码流程
- 在vue的实例中,增加了 methods 对象并定义了一个名为removeItems的方法
var vm = new Vue({
el: "#app",
data: {
title: "黑神",
todoItems: ['黑神说Java','黑神说Vue']
},
methods: {
// 该方法可以被模板中自定义事件触发
removeItems: function (index){
console.log("删除了" + this.todoItems[index] + "ok");
// splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目，其中 index 为添加/删除项目的位置，1 表示删除的数量
this.todoItems.splice(index, 1); //一次删除一个元素
}
}
});- 修改 todo-items 待办内容组件的代码,增加一个删除按钮,并且绑定事件!
//这里是数据：列表
Vue.component("todo-items",{
props: ['item', 'index'],
//只能绑定当前组件的方法
template: '<li>{{index}}----{{item}} <button @click="remove">删除</button></li>',
methods: {
remove: function (index){
//自定义事件分发
// 这里的 remove 是自定义事件的名称，需要在 HTML 中使用 v-on:remove 的方式指派
this.$emit('remove', index);
}
}
});
- 修改 todo-items 待办内容组件的 HTML 代码,增加一个自定义事件,比如叫 remove,可以和组件的方法绑定,然后绑定到vue的方法中!
<div id="app">
<!--增加了 v-on:remove="removeItems(index)" 自定义事件，该事件会调用 Vue 实例中定义的名为 removeItems的方法-->
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<!--v-on用来绑定事件-->
<todo-items slot="todo-items" v-for="(item, index) in todoItems"
:item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
</todo>
</div>
3.思路图
- 关注度分离原则（SoC）
4.完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<!--v-on用来绑定事件-->
<todo-items slot="todo-items" v-for="(item, index) in todoItems"
:item="item" v-bind:index="index" v-on:remove="removeItems(index)"></todo-items>
</todo>
</div>
<!--导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"></script>
<!--导入Axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script type="text/javascript">
//slot：插槽->就是为了动态插入数据
Vue.component("todo",{ //这里''+可以换成\，但不建议
template:
'<div>' +
'<slot name="todo-title"></slot>' +
'<ul>' +
'<slot name="todo-items"></slot>' +
'</ul>' +
'<div/>'
});
//这里是数据：标题
Vue.component("todo-title",{
props: ['title'],
template: '<div>{{title}}</div>'
});
//这里是数据：列表
Vue.component("todo-items",{
props: ['item', 'index'],
//只能绑定当前组件的方法
template: '<li>{{index}}----{{item}} <button @click="remove">删除</button></li>',
methods: {
remove: function (index){
//自定义事件分发
this.$emit('remove', index);
}
}
});
var vm = new Vue({
el: "#app",
data: {
title: "黑神",
todoItems: ['黑神说Java','黑神说Vue']
},
methods: {
removeItems: function (index){
console.log("删除了" + this.todoItems[index] + "ok");
this.todoItems.splice(index, 1); //一次删除一个元素
}
}
});
</script>
</body>
</html>
5. Vue核心部分
- 基础语法
- 条件判断
- if for
- 网络通信**【前后端交互的重点】**
- axios
- 组件以及界面布局
- Vue.component=>组件
- props=>传参
- method—>this.$emit(‘’，);=>远程调用Vue里面的方法
通过以上内容，已经可以写出来Vue单页面应用了
6. Vue入门小结
Vue UI界面的官网【建议用ElementUI】