<!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>
<todo-items slot="todo-items" v-for="(item,index) in todoItems"
:item="item" v-bind:index="index" v-on:remove="removeItems(index)" :key="index"></todo-items>
</todo>
</div>
<!--引入vue.js 包-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.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>{{index}}----{{item}} <button @click="remove">delete</button> </li>',
methods:{
remove:function (index) {
//this.$emit 自定義事件分發
this.$emit('remove',index);
}
}
})
var vm=new Vue({
el:"#app",
data:{
title:"創客未來",
todoItems:['創客','未來','中國']
},
methods:{
removeItems:function (index) {
this.todoItems.splice(index,1);//一次刪除一個數組元素
}
}
});
</script>
</body>
</html>
Vue的核心：數據驅動、組件化。
Vue的優點：借鑒了AngulaJS的模塊化和React的虛擬DOM，虛擬DOM就是把DOM操作放到內存中執行。
Vue常用屬性：
v-if
v-else-if
v-else
v-for
v-on 綁定事件，簡寫 @
v-model 數據雙向綁定
v-bind 給組件綁定參數，簡寫 ：
Vue 組件化
組合插件 slot插槽
組件內部綁定事件需要使用到 this.$emit("事件名",參數)；
計算屬性的特色，緩存計算數據
遵循SoC關注分離原則，Vue是純粹的視圖框架，並不包含，比如Ajax之類的通信功能，為了解決通信問題，需要使用Axios框架做異步通信；
注意：
Vue的開發都是要基於NodeJS，實際開發采用 vue-cli 腳手架開發，vue-router路由，vuex做狀態管理，Vue UI，界面我們一般使用 ElementUI（餓了么出品），或者ICE（阿里巴巴）來快速搭建前端項目。
官網：
https://element.eleme.cn/#/zh-CN
https://ice.work/