Vue学习总结

作者: 读书的鱼 | 来源:发表于2019-03-11 16:06 被阅读135次

第1章课程介绍

1-1课程简介

学习流程

知识点

学习前提：
有一些css、js、es6、webpack、npm等基础知识

学习收获

第2章 Vue 起步

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

第3章 Vue 基础精讲

3-1 Vue实例

vue实例是根实例，组件也是vue实例，所以说页面是由很多vue实例组成的
$.$ data()：以 $开头的指的是vue实例的属性或方法 vm.$ destroy()：用于销毁vue实例，但是之前的数据和方法并没有被销毁

var app = new Vue({
  el:'#root',
  data:{
    message:'hello world'
  },
  methods: {
    handleClick(){},
  },
  watch:{

  },
  computed:{

  }
})

3-2 Vue实例生命周期

//生命周期函数就是vue实例在某个时间点自动执行的函数
var app = new Vue({
        el:'#root',
        data:{
           inputValue:'' 
        },
        beforeCreate: function () {
            console.log('beforeCreate');
        },
        created: function () {
            console.log('created');
        },
        beforeMount: function () {
            console.log(this.$el);
            console.log('beforeMount');
        },
        mounted: function () {
            console.log(this.$el);
            console.log('mounted');
        },
        beforeDestroy: function () {
            //app.$destroy()
            console.log('beforeDestroy');
        },
        destroyed: function () {
            console.log('destroyed');
        },
        beforeUpdate: function () {
            //app.$data.inputValue = 1
            console.log('beforeUpdate')
        },
        updated: function () {
            console.log('updated')
        }
})

3-3 Vue的模版语法

插值表达式{{}} ：用{{输入的值}}
v-指令写的是js表达式
v-text 就是innertext 其实就是 {{}}
v-html 就是innerhtml
v-指令后面除了可以写js名称还可以加字符串，插值表达式也可以写字符串

var app = new Vue({
      el: '#root',
      data: {
          name: 'hello',
          bigName: '<h1>hello</h1>'
      }
})

{{name + ' world'}}
<div v-text="name + ' world' "></div>
<div v-html="name + ' world' "></div>

ps:v-html 会对bigName进行转义，字体变成h1字体大小，而不会出现标签

3-4 计算属性、方法与侦听器

计算属性
computed属性，因为他是属性，所以在用插值表达式取值的时候不用加括号
computed：内置变量缓存的功能，当data里面age变量更改时，如果不是计算属性内边的变量更改，那么他就不会渲染computed内部的变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
    {{fullName}}
</div>
<script>
    var app = new Vue({
        el: '#root',
        data: {
            firstName: 'sunny',
            lastName: 'fan',
            age: 28
        },
        //计算属性:内置缓存（firstName、lastName）
        computed: {
            fullName: function () {
                console.log('计算了一次');
                return this.firstName + " " + this.lastName
            }
        }
    })
</script>
</body>
</html>

methods方法
因为是方法，所以插值表达式要用括号取值，
他不具有缓存变量的功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
    {{fullName()}}
</div>
<script>
    var app = new Vue({
        el: '#root',
        data: {
            firstName: 'sunny',
            lastName: 'fan'
        },
        methods: {
            fullName: function () {
                console.log("计算了一次")
                return this.firstName + " " + this.lastName
            }
        }
    })
</script>
</body>
</html>

侦听器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>侦听器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
    {{fullName}} {{age}}
</div>
<script>
    var app = new Vue({
        el: '#root',
        data: {
            firstName: 'sunny',
            lastName: 'fan',
            fullName: 'sunny fan',
            age: 28
        },
        watch: {
            firstName: function () {
                console.log('计算了一次');
                this.fullName = this.firstName + " " + this.lastName
            },
            lastName: function () {
                console.log('计算了一次');
                this.fullName = this.firstName + " " + this.lastName
            }
        }
    })
</script>
</body>
</html>

总结：我们可以通过methods、computed、watch来实现fullName显示的问题
computed和watch都具备缓存的功能
但是从代码量的编写程度来看，computed属性会更加方便和便捷一些。

3-5 计算属性的getter和setter

computed属性当中有两个方法，分别是：get 和 set

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>getter和setter</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<body>
<div id="root">
    {{fullName}} {{age}}
</div>
<script>
    var app = new Vue({
        el: '#root',
        data: {
            firstName: 'sunny',
            lastName: 'fan',
            age: 28
        },
        computed: {
            fullName: {
                get: function () {
                    return this.firstName + " " + this.lastName
                },
                set: function (value) {
                    console.log(value);
                    var arr = value.split(" ");
                    this.firstName = arr[0];
                    this.lastName = arr[1];
                }
            }
        }
    })
</script>
</body>
</body>
</html>

3-6 Vue中的样式绑定

class的对象绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class的对象绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .activated {
            color: red;
        }
    </style>
</head>
<body>
<body>
<div id="root">
    <div @click="handleChangeColor" :class="{activated:isActivated}">
        hello world
    </div>
</div>
<script>
    var app = new Vue({
        el: '#root',
        data: {
            isActivated: false
        },
        methods: {
            handleChangeColor: function () {
                this.isActivated = !this.isActivated
            }
        }
    })
</script>
</body>
</body>
</html>

class的数组绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class的数组绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <style>
        .activated-one {
            font-size: 20px;
        }

        .activated {
            color: red;
        }
    </style>
</head>
<body>
<div id="root">
    <div @click="handleChangeColor" :class="[activated,activatedOne]">hello world</div>
</div>
<script>
    var app = new Vue({
        el: '#root',
        data: {
            activated: '',
            activatedOne: 'activated-one'
        },
        methods: {
            handleChangeColor: function () {
                this.activated = this.activated === 'activated' ? "" : "activated"
            }
        }
    })
</script>
</body>
</html>

style对象绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>style对象绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
    <div @click="handleChangeColor" :style="styleObj">hello world</div>
</div>
<script>
    var app = new Vue({
        el: '#root',
        data: {
            styleObj: {
                color: 'black'
            }
        },
        methods: {
            handleChangeColor: function () {
                this.styleObj.color = this.styleObj.color === 'black' ? 'red' : 'black'
            }
        }
    })
</script>
</body>
</html>

style的数组绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>style数组绑定</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
    <div @click="handleChangeColor" :style="[styleObj,{fontSize:'30px'},styleOne]">hello world</div>
</div>
<script>
    var app = new Vue({
        el: '#root',
        data: {
            styleObj: {
                color: 'black'
            },
            styleOne: {
                fontWeight: 'bold'
            }
        },
        methods: {
            handleChangeColor: function () {
                this.styleObj.color = this.styleObj.color === 'black' ? 'red' : 'black'
            }
        }
    })
</script>
</body>
</html>

3-7 条件渲染

v-if 、v-else-if、v-else

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>V-if</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
    <h5>实例一:v-if</h5>
    <template v-if="isShow">
        hello world
    </template>
    <button @click="handleChange">{{toggleText}}</button>
    <hr>
    <h5>实例二:v-else</h5>
    <div v-if="isShowTwo">
        要是我显示
    </div>
    <div v-else>
        要么你显示
    </div>
    <button @click="handleChangeRole">切换显示</button>
    <hr>
    <h5>实例三:v-else-if</h5>
    <div v-if="status==='A'">
    A
    </div>
    <div v-else-if="status==='B'">
        B
    </div>
    <div v-else-if="status==='C'">
        C
    </div>
    <div v-else>
        其他
    </div>
</div>
<script>
    var app = new Vue({
        el: '#root',
        data: {
            isShow: false,
            toggleText: '显示',
            isShowTwo: true,
            status: 'A'
        },
        methods: {
            handleChange: function () {
                this.isShow = !this.isShow;
                this.toggleText = this.toggleText === '显示' ? '隐藏' : '显示'
            },
            handleChangeRole: function () {
                this.isShowTwo = !this.isShowTwo;
            }
        }
    })
</script>
</body>
</html>

用 key 管理可复用的元素
当切换两个input输入框的时候，为了不然input框的输入内容被占用，所以我们通过设置input的key值来解决这个问题

<template v-if="loginType === 'username'">
  <label>Username</label>
  <input placeholder="Enter your username" key="userName-input">
</template>
<template v-else>
  <label>Email</label>
  <input placeholder="Enter your email address" key="email-input">
</template>

v-show
v-show很相似，只要设置值为true则显示

v-if和v-show的区别

v-show不能和v-else 和 v-else-if结合使用
v-show 不管是ture还是fasle div元素都会渲染出来（false style的display:none）,如果如果有频繁的切换，我们会首选v-show,减少对dom的频繁操作

3-8 Vue列表渲染

v-for
<li v-for="(item,index) in list" :key="index">{{index}}--{{item}}</li>
<li v-for="(item,key,index) of userInfo" :key="index">{{key}}-{{item}}-{{index}}</li>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表渲染</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
<div id="root">
    <ul>
        <li v-for="(item,index) in list" :key="index">{{index}}--{{item}}</li>
    </ul>
    <ul>
        <li v-for="(item,key,index) of userInfo" :key="index">{{key}}-{{item}}-{{index}}-</li>
    </ul>
</div>
<script>
    var app = new Vue({
        el: '#root',
        data: {
            list: [
                'hello',
                'world'
            ],
            userInfo: {
                name: 'sunny',
                age: 29
            }
        }
    })
</script>
</body>
</html>

template可以当一个空标签做为for循环渲染，而这个template不会渲染到dom里面

<ul>
  <template v-for="item in items">
    <li>{{ item.msg }}</li>
    <li class="divider" role="presentation"></li>
  </template>
</ul>

为了防止子组件循环渲染出现dom结构不对的情况，我们一般会通过is来给子组件命名

//html
 <table>
    <tbody>
      <tr is="row" v-for="item in list" :title="item"></tr> //这个地方调用is属性
   </tbody>
</table>

//js
 Vue.component('row', {
        props: ['title'],
        template: '<tr><td>{{title}}</td></tr>'
});
var app = new Vue({
        el: '#root',
        data: {
            list: [
                'hello',
                'world'
            ]
        }
    })

更改数组值方法有哪些？

1.变异方法
push()、 pop()、 shift()、unshift()、splice()、sort()、reverse()
2.替换数组
当也可以创建一个新的数组，在通过
filter()、concat()、slice()
更改原始数组的值，再把更改后的数组替换旧的数组
3.set或者$set方法

Vue.set(app.userInfo,'age',22)
//或者
vm.$set(app.userInfo,'age',22)

4.Object.assign()或者_.extend()

vm.userInfo = Object.assign({},vm.userInfo,{
  sex:'男',
  email:'fx35792@163.com'
})

ps:不可以通过数组下标去更改数组的值

Vue学习总结

第1章课程介绍

1-1课程简介

第2章 Vue 起步

2-1 学习方法

2-2 hello world

2-3 开发TodoList（v-model、v-for、v-on）

2-4 MVVM模式

2-5 前端组件化

2-6 使用组件改造TodoList

2-7 简单的组件间传值

2-8 Vue的一些指令简写方法

第3章 Vue 基础精讲

3-1 Vue实例

3-2 Vue实例生命周期

3-3 Vue的模版语法

3-4 计算属性、方法与侦听器

3-5 计算属性的getter和setter

3-6 Vue中的样式绑定

3-7 条件渲染

3-8 Vue列表渲染

更改数组值方法有哪些？

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

待看

VUE

Django

Vue

vue

vue

VueJS

前端全栈

Vue学习总结

第1章 课程介绍

1-1课程简介

第2章 Vue 起步

2-1 学习方法

2-2 hello world

2-3 开发TodoList（v-model、v-for、v-on）

2-4 MVVM模式

2-5 前端组件化

2-6 使用组件改造TodoList

2-7 简单的组件间传值

2-8 Vue的一些指令简写方法

第3章 Vue 基础精讲

3-1 Vue实例

3-2 Vue实例生命周期

3-3 Vue的模版语法

3-4 计算属性、方法与侦听器

3-5 计算属性的getter和setter

3-6 Vue中的样式绑定

3-7 条件渲染

3-8 Vue列表渲染

更改数组值方法有哪些？

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

第1章课程介绍