Vue框架学习03
自定义事件
使用this.$emit(‘自定义事件名’,参数),
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>hello Vue!</h1><!--需要刷新才可以变化-->
<!--view层 模板-->
<div id="app">
<todo>
<todo-title slot="todo-title" :title="title"></todo-title>
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
:item="item" :index="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
</todo>
</div>
<!--虚拟dom,模块化-->
<!--可在界面中更改后,界面数据即发生变化-->
<!--1.导入Vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
//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>{{item}}----{{index}} <button @click="remove">删除</button></li>',
methods: {
remove :function (index){
//this.$emit();自定义事件方法
this.$emit('remove',index);
}
}
});
var vm = new Vue({
el: "#app",
data: {
title: "names",
todoItems: ['cy','ccyy','cccyyy']
},
methods: {
removeItems :function (index){
console.log("删除了"+this.todoItems[index]+"OK");
this.todoItems.splice(index,1);
}
}
});//双向绑定
</script>
</body>
</html>
Vue 入门小结
核心:数据驱动,组件化
优点:借鉴了AngulaJS的模块化开发和React的虚拟Dom
- v-if
- v-if…else
- v-if…else if…
- v-on绑定事件,简写@
- v-bind给组件绑定参数,简写:
- v-for 循环事件
- v-model 数据双向绑定
组件化:
-
组合组件slot插槽
-
组件内部绑定事件需要使用到this.$emit(“事件名”,参数);
-
计算机属性的特色,缓存计算数据
Vue是纯粹的视图框架,并不包含,比如AJAX之类的通信功能,我们需要使用Axions框架做异步通信;
说明:
Vue的开发都是要基于NodeJS,实际开发采用vue-cli脚手架开发,vue-router路由,vuex做状态管理;Vue UI,界面我们一般使用ElementUI(饿了么出品),或者ICE(阿里巴巴出品)来快速搭建前端项目。