## 页面组件化
就是把一个整体的页面,切割成一个一个的部分.一个部分就称作一个组件.合理的拆分组件,可以把一个大型的项目拆分成小份,和拼积木一样.
## 不使用组件化的todolist
```
<div id="app">
<input type="text" v-model="inputValue">
<input type="button" value="提交" @click="submit">
<ul>
<li v-for="value of lists">{{value}}</li>
</ul>
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
lists: ['第一课的内容', '第二课的内容'],
inputValue: ''
},
methods: {
submit() {
if (this.inputValue === '') {
return;
}
this.lists.push(this.inputValue);
this.inputValue = '';
}
}
})
```
## 全局组件
```
<div id="app">
<input type="text" v-model="inputValue">
<input type="button" value="提交" @click="submit">
<ul>
<todo-item v-bind:content="item" v-for="item of lists"></todo-item> //通过v-bind父组件向子组件传值
</ul>
</div>
<script>
//全局的组件
Vue.component('TodoItem', {
props: ['content'],
template: '<li>{{this.content}}</li>',
});
var vm = new Vue({
el: '#app',
data: {
lists: ['第一课的内容', '第二课的内容'],
inputValue: ''
},
methods: {
submit() {
if (this.inputValue === '') {
return;
}
this.lists.push(this.inputValue);
this.inputValue = '';
}
}
})
</script>
```
## 局部的组件
```
<div id="app">
<input type="text" v-model="inputValue">
<input type="button" value="提交" @click="submit">
<ul>
<todo-item v-bind:content="item" v-for="item of lists"></todo-item>
</ul>
</div>
<script>
var TodoItem = {
props:['content'],
template: '<li>{{this.content}}</li>',
};
var vm = new Vue({
el: '#app',
components:{
TodoItem:TodoItem, //注册要vue实例中
},
data: {
lists: ['第一课的内容', '第二课的内容'],
inputValue: ''
},
methods: {
submit() {
if (this.inputValue === '') {
return;
}
this.lists.push(this.inputValue);
this.inputValue = '';
}
}
})
</script>
```
## 子组件向父组件传值
```
<div id="app">
<input type="text" v-model="inputValue">
<input type="button" value="提交" @click="submit">
<ul>
<todo-item v-bind:content="item" v-bind:index="index" v-for="item,index of lists"
@delete="handleItemDelete"></todo-item>
</ul>
</div>
<script>
var TodoItem = {
props: ['content', 'index'],
template: '<li @click="handleItemClick">{{this.content}}</li>',
methods: {
handleItemClick() {
this.$emit('delete', this.index); //子组件向外粗发一个delete的事件
}
}
};
var vm = new Vue({
el: '#app',
components: {
TodoItem: TodoItem, //注册要vue实例中
},
data: {
lists: ['第一的内容', '第二的内容'],
inputValue: ''
},
methods: {
submit() {
if (this.inputValue === '') {
return;
}
this.lists.push(this.inputValue);
this.inputValue = '';
},
handleItemDelete(index) {
this.lists.splice(index, 1);
}
}
})
</script>
```
- 基础
- MVVM
- 前端组件化
- VUE实例
- 生命周期
- 指令
- v-bind
- 模板语法
- 使用样式
- class样式
- 内联样式
- v-for
- v-if和v-show
- 过滤器
- 计算属性
- 方法侦听器
- 计算属性的set和get
- watch,computed,methods对比
- 样式绑定
- 条件渲染
- 组件
- 组件化和模块化区别
- 使用组件的细节
- 父子组件数据传递
- 组件参数校验与非props特性
- 给组件绑定原生事件
- 非父子组件间的传值
- 在vue中使用插槽
- 作用域插槽
- 动态组件与v-once指令
- 动画特效
- vue中CSS动画原理
- 使用animate
- 同时使用过度和动画
- JS动画与velocity的结合
- 多个元素或组件的过度
- vue列表过度
- 动画封装
- 路由
- 什么是路由
- VUEX
- 概述
- 安装
- 访问仓库