第2章 Vue起步

2019-05-18 本文已影响229人读书的鱼

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

而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学习目录