2-1 学习方法
多看一下官网api Vue官网
务必把官网的小的demo自己敲一遍加深一下对语法糖的理解
2-2 hello world
那么初步认识一下vue,那么从一个简单的hello world开始吧
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello world</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">{{content}}</div>
<script>
var app = new Vue({
el: '#root',
data: {
content: 'hello world'
}
});
setTimeout(function () {
app.$data.content = 'bye world'
}, 2000)
</script>
</body>
</html>
el:'#root' vue实例化的数据只针对 id为root内使用
{{content}} : 获取 vue里面data 里面的数据值
2-3 开发TodoList（v-model、v-for、v-on）
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello world</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
<div>
<input type="text" v-model="inputValue">
<button v-on:click="handleAdd">提交</button>
</div>
<ul>
<li v-for="(item,index) in list" v-on:click="handleRemove(index)">{{item}}</li>
</ul>
</div>
<script>
var app = new Vue({
el: '#root',
data: {
inputValue: '',
list: []
},
methods: {
handleAdd() {
this.list.push(this.inputValue);
this.inputValue = '';
},
handleRemove(index) {
this.list.splice(index, 1);
}
}
});
</script>
</body>
</html>
v-on:click="handleClick" 绑定点击事件
v-model="inputValue" 数据双向绑定
v-for="(item,index) in list" 数据循环
2-4 MVVM模式
MVP (Model View Presenter)
Model:接口请求操作
View:页面展示
P:处理数据和页面（大量的dom操作）
MVP
MVVM
MVVM
而Vue则采用的是mvvm这种模式，它在乎的是数据的变化驱动Ui的变化，不用用户管dom的操作，vue则扮演的是VM的操作，我们的重心是放在了M层也就是数据这一层
2-5 前端组件化
页面有好多部分组成，把页面切成一部分一部分，而拆分出来的部分，就是一个组件
2-6 使用组件改造TodoList
1.全局组件的声明和使用
//Vue创建全局组件的方法
Vue.component('TodoItem', {
props: ['content'],
template: '<li>{{content}}</li>'
});
<todo-item v-bind:content="item" v-for="item in list"></todo-item>
ps:
数据的传递通过v-bind: 来定义传递的属性，后面跟上要传递的值
通过“props”来接受属性，再通过插值表达式来展示{{content}}
2.Vue局部组件的创建和使用
//Vue局部组件的创建和使用
var TodoItem = {
props: ['content'],
template: '<li>{{content}}</li>'
};
var app = new Vue({
el: '#root',
components: {
TodoItem: TodoItem
}
})
ps:
定义一个变量，值为对象，把属性值和模板作为属性的键值
在Vue实例化中通过components这个参数来调用这个定义好的变量（局部组件）
2-7 简单的组件间传值
父组件向子组件传值：
子组件通过定义一个属性:v-bind:content="item",将item值传给子组件的content
子组件通过props:['content'] 来接受父组件传过来的值，再通过插值表达式来展示{{content}}
子组件向父组件传值：
子组件通过定义一个方法或者一个事件handleItemClick，在方法或者事件中，通过this.$emit(''delete",this.index)方法给给父组件发送一个信号，
父组件监听这个信号：@delete="handleDeleleItem"
下面代码演示：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello world</title>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
<div>
<input type="text" v-model="inputValue">
<button v-on:click="handleAdd">提交</button>
</div>
<ul>
<!--<li v-for="(item,index) in list" v-on:click="handleRemove(index)">{{item}}</li>-->
<todo-item
v-bind:content="item"
v-bind:index="index"
v-for="(item,index) in list"
@delete="handleItemDelete"
>
</todo-item>
</ul>
</div>
<script>
//Vue创建全局组件的方法
// Vue.component('TodoItem', {
// props: ['content'],
// template: '<li>{{content}}</li>'
// });
//Vue局部组件的创建和使用
var TodoItem = {
props: ['content', 'index'],
template: '<li @click="handleItemClick">{{content}}</li>',
methods: {
handleItemClick() {
this.$emit('delete', this.index);
}
}
};
var app = new Vue({
el: '#root',
components: {
TodoItem: TodoItem
},
data: {
inputValue: '',
list: []
},
methods: {
handleAdd() {
this.list.push(this.inputValue);
this.inputValue = '';
},
// handleRemove(index) {
// this.list.splice(index, 1);
// },
handleItemDelete(index) {
console.log(index);
this.list.splice(index, 1)
}
}
});
</script>
</body>
</html>
2-8 Vue的一些指令简写方法
v-on:click 等价于 @click //this.emit('delete') 接受也是 @delete
v-bind:content 等价于 :content
更多
上一篇：第1章 Vue的 课程介绍
下一篇：第3章 Vue 基础精讲
全篇文章：Vue学习总结
所有章节目录：Vue学习目录
网友评论