Vue2.5基础文档一. vue模式简介 1. 传统前端开发模式（MVP） View：视图层，负责显示。 2. Vue

一. vue模式简介

1. 传统前端开发模式（MVP）

MVP 全称：Model-View-Presenter ；MVP 是从经典的模式MVC演变而来

Model：模型层，负责提供数据
View：视图层，负责显示。
Controller/Presenter：控制器，负责逻辑的处理

MVP模式.png

2. Vue 的`MVVM`模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开。 MVVM（Model-View-ViewModel）框架的由来便是MVP（Model-View-Presenter）模式与WPF结合的应用方式时发展演变过来的一种新型架构框架。它立足于原有MVP框架并且把WPF的新特性糅合进去，以应对客户日益复杂的需求变化。 MVVM模式.png

二. Vue 简单了解

组件创建
(1)全局组件：通过new Vue({})接管元素，进行Vue处理。通过Vue.component({})创建组件 (2)局部组件创建一个对象，并注册到Vue实例中
简单的组件间传值和函数处理。
父组件向子组件传值，通过v-bind传值子组件接受父组件的传值，通过props接受通过methods进行事件处理。

v-model //数据的双向绑定
v-on //绑定事件
v-for //条件与循环
v-if //条件与循环
v-bind //组件之间传值

三. Vue的生命周期函数

1. 生命周期函数，就是vue实例在某一个时间点会自动执行的函数。

生命周期钩子:
beforeCreate
created
beforeMount
mounted
beforeUpdate
updated
activated
deactivated
beforeDestroy
destroyed
errorCaptured

四. vue基础语法

1. vue 的模板语法

1、将变量渲染到DOM上的三种方式

{{name}} 
v-text='name'  //和{{}}一样
v-html='name' //会转义 <h1/>等标签

2、计算属性、方法和监听器

计算属性computed和监听器watch都具有数据缓存的特性，但大多数情况下，用计算属性更合适。

// 创建Vue的实例
var vm = new Vue({
            el: '#app',
            data: {
                firstName: 'li',
                endName: 'san',
                fullName: 'li san',
                age: 12
            },
            // 计算属性
            computed: {
                fullName: function() {
                    console.log('ji suan ')
                    return this.firstName + this.endName
                }
            },

            // 方法
            methods: {
                fullName: function() {
                    return this.firstName + this.endName 
                }
            },

            // 监听器
            watch: {
                firstName: function() {
                    this.fullName = this.firstName + this.endName
                },
                endName: function() {
                    this.fullName = this.firstName + this.endName
                }
            }
        })

计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：

// ...
computed: {
  fullName: {
    // getter
    get: function () {
      return this.firstName + ' ' + this.lastName
    },
    // setter
    set: function (newValue) {
      var names = newValue.split(' ')
      this.firstName = names[0]
      this.lastName = names[names.length - 1]
    }
  }
}

3、Class 与 Style 绑定

利用v-bind操作元素的 class 列表和内联样式是数据绑定。只需要通过表达式计算出字符串结果即可。在将 v-bind 用于 class 和 style 时,表达式结果的类型除了字符串之外，还可以是对象或数组。

<div id="app"
        @click='handleClick'
        :style='[styleObj,{fontSize: "22px"}]'>dlick me</div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                styleObj: {
                    color: 'red'
                }
            },
            methods: {
                handleClick: function() {
                    this.styleObj.color = this.styleObj.color === 'red' ? 'black' : 'red'
                }
            }
        })
    </script>

4、条件渲染：`v-if`、`v-show`

v-if 直接将元素在DOM上，进行挂载、卸载，切换效率低
v-show 改变的只是元素的display属性，切换效率高

// v-if
<div v-if='isShow === "A"'>显示A</div>
<div v-else-if='isShow === "B"'>显示B</div>
<div v-else>nothing</div>

// v-show
<div v-show='isShow'>this is show</div>

5、vue中提供了数组操作方法，也有对象

Vue中，改变对象和数组的方法，vue提供了set方法

// 改变对象
方法1：Vue.set(vm.userInfo, 'name', 'lisi')
方法2：vm.$set(vm.userInfo, 'name', 'lisi')

// 改变数组
vm.$set(vm.userInfo, 1, 23)

五. Vue用法注意

1、`ul,tbody,ol`等标签，一般支持嵌入`li,td`等固定标签。如果要嵌入组件，利用`is`指向才能正确显示标签。

<div>
    <table>
        <tbody>
            <tr is="row"></tr>
        </tbody>
    </table>
</div>
    
Vue.compoment('row', {
    template: '<tr><td>this is a row</td></tr>'
})

2、Vue的根实例中，data是一个对象形式。但在子组件中，data必须是个函数，此举是为了保证每个子组件数据的唯一性。

 Vue.compoment('row', {
            data: function(){
                return {content: 'this is a component'}
            },
            template: '<tr><td>this is a row</td></tr>'
        })

3、`ref`引用

vue中可以通过ref，获取到原生DOM标签以及组件的引用。

4、父子组件间传值

和React一样，Vue的父子组件直接传值遵循单向数据流。父组件通过参数向子组件传值，子组件通过向父组件出发函数修改父组件的值。

// 父组件向子组件传值
<div>
    <counter count='0'></counter>
    <counter :count='1'></counter>
</div>

5、组件参数校验和非Props特性

子组件接受父组件的传值时，可以约束传值。

// 接受多个值
props: {
    count: [Number, String]
}
// 接受单个值
props: {
    count: {
        type: String,
        required: true,
        default: 'this is a a',
        validator: function(value){
            return (value.length > 5)
        }
    }
},

6、给组件绑定原生事件

<div id='root'>
    <child @click.native='handleClick'></child>
</div>

Vue.compoment('row', {
    template: '<div>this is a row</div>'
})
var vm=new Vue({
    el:'#root',
    methods:{
        handleClick: function(){
            alert('click')
        }
    }
})

7、非父子组件之间传值

BUS/总线/发布订阅者模式/观察者模式
Vuex

8、`vue`中使用插槽(`slot`)，包括具名插槽、作用域插槽

<div id="app">
    <body-content>
        <div slot="header">this is header</div>
        <div slot="footer">this is footer</div>
    </body-content>
</div>

<script>
    Vue.component('body-content', {
        template: `
        <div>
            <slot name='header'>default header</slot>
            <div>content</div>
            <slot name='footer'>defalut footer</slot>
        </div>            `
    })
    var vm = new Vue({
        el: '#app'
    })
</script>

9、动态组件和`v-once`

六、vue的加强

1、过渡&动画

Vue 提供了 transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡

2、vue中使用`animate.css`库

当然，过渡和动画是可以一起使用的。

3、vue中的`js`动画和`velocity.js`

4、vue中列表过渡

5、vue中的动画封装

七、项目开发

1、单页面应用和多页面应用

2、移动端APP开发常见问题

包含以下几点：

不同手机的分辨率，border的1px会有所不同---解决方案：border.css
不同手机机型，在click点击时，会出现300ms延迟的情况---解决方案：fastClick.js
在做轮播图时，在网速较慢时刷新页面会导致价格坍塌 ---解决方案：设定样式，固定轮播框架

Vue2.5基础文档