通俗易懂--快速入门Vue--1
Posted xujunkai
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了通俗易懂--快速入门Vue--1相关的知识，希望对你有一定的参考价值。
原有设计模式：MVP
M 模型 数据 V 视图 触发事件 P 控制器 负责业务逻辑新设计模式：MVVM
M层 script 主要M层开发 面向数据编程 V层 html VM层 进行逻辑（自动改变）- VM层？？？？？？
- 虚拟dom???
- define proxy 模式？？？
项目组件化
- 每个组件就是页面区域。
1.全局组件
Vue.component('todo-item',{
props:['content'],
template:"<li>{{content}}</li>"
});2.局部组件
var TodoItem = {
props:['content'],
template:"<li>{{content}}</li>"
};- 局部组件需要注册
// 在实例中进行注册
var vm = new Vue({
el:"#app",
// 局部组件注册
components:{
TodoItem:TodoItem
},
})3父组件向子组件传值
父组件通过v-bind:xxx="xxx" 绑定要传的值，子组件通过定义通过props，接受哪些父组件传来的值，
v-bind:子组件props接收要穿值的名字=父组件变量的名字
4子组件向父组件传值
- 子组件通过$emit,将要触发的事件传到父组件，父组件通过监听该事件，来进行值的更改
// 子组件绑定要触发事件 @click='handelItemClick'
handelItemClick:function () {
this.$emit('delete',this.index)
}
//通过$emit触发事件，并传值。
//父组件在标签上监听该delete事件,并绑定处理方法
@delete="handelItemDelete"
//父组件定义handelItemDelete，将传来的数据，在当前实例中修改
handelItemDelete:function (indexvalue) {
this.list.splice(indexvalue,1)
}- v-bind: 等于 : v-on:等于:
5一个Todolist的组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<script src="./vue.js"></script>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<button @click="handlebtnClisk">提交</button>
<ul>
<todo-item v-for="(item,index) in list"
v-bind:index="index"
v-bind:content="item"
@delete="handelItemDelete"
>{{item}}</todo-item>
</ul>
</div>
</body>
<script>
// 全局组件
// Vue.component('todo-item',{
// props:['content'],
// template:"<li>{{content}}</li>"
// });
// 局部组件
var TodoItem = {
props:['content','index'],
template:"<li @click='handelItemClick'>{{content}}</li>",
methods:{
handelItemClick:function () {
this.$emit('delete',this.index)
}
}
};
var vm = new Vue({
// el限制一个vue实例的管理范围。
el:"#app",
// 局部组件注册
components:{
TodoItem:TodoItem
},
data:{
list:[],
inputValue:""
},
methods:{
handlebtnClisk:function () {
this.list.push(this.inputValue);
this.inputValue = ""
},
handelItemDelete:function (indexvalue) {
this.list.splice(indexvalue,1)
}
}
});
</script>
</html>以上是关于通俗易懂--快速入门Vue--1的主要内容，如果未能解决你的问题，请参考以下文章