vue知识点整理

Vue知识点整理

一、对于MVVM的理解

MVVM分为Model、View、ViewModel三者

• Model：代表数据模型，数据和业务逻辑都在Model层定义
• View:代表UI视图，负责数据的展示
• ViewModel：就是与界面(View)对应的Model,ViewModel的职责就是把Model对象封装成可以显示和接收输入的界面数据对象

Model和View并无直接关联，而是通过ViewModel来进行联系，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变是就会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。简单的说，ViewModel就是View与Model的连接器，View与Model通过ViewModel实现双向绑定。

二、Vue的生命周期

• beforeCreate:在数据观测和初始化事件还未开始，el和data还未初始化，也就是说此时访问不到$el和data
• created:完成数据观测、属性和方法的运算，初始化事件，完成了对data数据的初始化，$el属性还没有显示出来
• beforeMount:完成了el和data的初始化
• mounted:挂载完成，此时可以进行ajax交互
• beforeUpdate:在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以再该钩子中进一步更改状态，不会触发附加的重渲染过程
• updated:在虚拟DOM重新渲染之后调用
• beforeDestory:在实例销毁前调用，实例仍然可以使用
• destoryed:在实例销毁之后调用，调用后，所有的事件监听器会被移除，该钩子在服务器端渲染期间不会被调用

三、组件之间的通信

props/$emit

父组件A通过props的方式向子组件传递参数。
子组件想父组件传递通过在子组件中$emit,在父组件中v-on的方式实现

$attrs和$listeners

这一种方式可以解决在父组件A下面有字组件B，子组件B下面有子组件C，这是如果想让组件A和组件C通信，使用上面这种方式就是有一些复杂，而这种方式可以解决这个问题。

<!-- C组件中能直接触发getCData的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
 <!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的） -->
<C v-bind="$attrs" v-on="$listeners"></C>

中央事件总线（非父子组件间通信）

以上两种方式都是父子之间的通信，那么如果不是父子组件呢，那么我们就可以使用事件总线的方式，新建一个Vue事件bus对象，然后通过bus.$emit触发事件，bus.$on监听触发的事件。

$parent和$children

在组件内部可以直接通过子组件$parent对父组件进行操作，父组件通过$children对子组件进行操作

provide和inject

他们成对出现，用于父组件向下传递数据。父组件中通过provider来提供变量，然后在子组件中通过inject来注入变量。不论子组件有多深，只要调用了inject那么就可以注入provider中的数据。

vuex

四、vue路由实现方式

hash模式

在浏览器中符号“#”，#以及#后面的字符称之为hash，用window.location.hash读取
特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。

history模式

history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

五、vue定义一个过滤器

<div id="app">
    <input type="text v-model="msg" />
    {{msg | capitalize}}
</div>
//js代码
var app = new Vue({
    el:'#app',
    data:{
        msg:""
    },
    filters:{
        capitalize:function(value){
            if(!value) return ''
            value = value.toString()
            return value.charAt(0).toUpperCase()+value.slice(1)
        }
    }
})

六、keep-alive

keep-alive是vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在页面渲染完毕后不会被渲染成一个DOM 元素，当组件在keep-alive内被切换是组件的activated、deactivated这两个声生命周期钩子函数会被执行。

activated： 页面第一次进入的时候，钩子触发的顺序是created->mounted->activated
deactivated: 页面退出的时候会触发deactivated，当再次前进或者后退的时候只触发activated
被包裹在keep-alive中的组件的状态将会被保留.
include、exclude:

<keep-alive include="bookLists,bookLists">
      <router-view></router-view>
</keep-alive>
<keep-alive exclude="indexLists">
      <router-view></router-view>
</keep-alive>

include属性表示只有name属性为bookLists，bookLists的组件会被缓存，（注意是组件的名字，不是路由的名字）其它组件不会被缓存exclude属性表示除了name属性为indexLists的组件不会被缓存，其它组件都会被缓存

七、事件修饰符

.stop阻止事件继续传播

.prevent阻止标签默认行为

.capture使用事件捕获模式,即元素自身触发的事件先处理，然后再交由内部元素进行处理

.self只当在event.target是当前元素自身是触发处理函数

.once 事件只触发一次

.passive告诉浏览器你不想阻止事件的默认行为

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用v-on:click.prevent.self会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。

八、v-model的修饰符

.lazy:默认情况下，v-model同步输入框的值和数据。可以通过这个修饰符，转变为在change事件再同步。

.number:自动将用户的输入值转化为数值类型

.trim:自动过滤用户输入的首尾空格