vue学习笔记

vue学习笔记

概念：

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现在话的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

vue的特点：

1. 渐进式：vue的侵入性很少，可以与很多其他前端技术联用
2. 组件化
3. 响应式：数据响应式，vue会监控数据变化。当数据变化时

vue的核心功能：

关于创建vue工程

1. 直接在页面上引用vue.js
2. 使用构建工具vue-cli脚手架

vue实例

vue实例：通过new vue（配置对象）得到的对象

1. 当创建vue实例的时候，vue将会把data（为了实现响应式）methods配置（为了在模板中方便使用）等配置成员提升到vue实例中.
2. 由于有提升的存在，为了防止命名冲突，vue会将自身的成员名称前加上$ 或 _ , 为了防止命名冲突，vue会将自身的成员加上$(可以使用),_符号就不用用了

模板

插值：在模板的元素内部使用

指令：通常作为元素的属性存在，名称上以v- 开头

v-for:用于循环生成元素
v-on :用于注册事件。 语法糖@
v-if :用于判断该玄素是否可以生成,可以与v-else 或者v-else-if联用
v-show:元素已经显示,display:none
v-bind:用于绑定属性, 语法糖:
v-model：用于事件双向绑定，实际上是自动绑定用了value值,和注册了input事件

模板中的配置

1. 页面中直接书写
2. 在template配置中书写（常见）
3. 在render中手动配置用函数创建，render函数的参数是一个创建虚拟DOM对象，为什么要创建虚拟DOM,因为真实DOM操作特别慢

配置对象

1. template:字符串，配置模板
2. el:配置控制的元素，css选择器
3. data: 管理的数据，该数据是响应式的
4. mothods:配置方法，方法中的this指向vue实例，不能会用箭头函数,会干扰vue绑定this

   挂在的配置

5. 通过el进行配置
6. 使用vue实例中的$mount函数进行配置

关于computed –计算属性

1. 计算属性，其中的配置会提升到vue实例中，因为在模板中可以直接当做属性使用，使用时，实际上调用的是对应的方法。通常，计算属性用户通过data或其他计算属性得到的数据。
2. 与方法的区别：vue会检查计算属性的依赖，当依赖没有发生变化时，vue会直接使用之前缓存的结果，而不会重新计算
3. 能用计算属性尽量使用，因为效率很高。依赖不变时不会重新加载。（计算属性的读取函数不可以有参数，有参数没意义）
4. 计算属性可以配置get和set. 分别用于读取时和设置时。 get读取属性的时候可以监听到，然后检查那张表函数有没有变化。

关于v-html指令：

1. vue为了安全，会将元素内部的插值进行实体编码

1
2
3
4
5
6
7
8
9
10

<div v-html = "html">

</div>

config = {
    data:{
        html:<p>带标签的元素</p>
    }
}
//这样就可以把html标签渲染出来了

组件

组件是页面中可复用的功能单元

VUE中的组建

1. 组件的创建：组件对于开发者，是一个普通的配置对象
2. 组件的注册：

   1 2 3 4 5 6 7 8 9 10 11 12 13 14

   //全局注册组件 Vue.component("组件形成",pager) //局部注册组件 在使用的组件和vue实例配置中进行注册 const config = { template:`<div> <MyPager></MyPager> </div>`, el:"#app", components:{ MyPager :pager } }

组件名称的规范，以下命名的方式任选其一：

1. 使用短横线命名
2. 使用大驼峰命名

   组件的使用：把组件当成标签使用即可，标签名任选其一

3. 短横线命名
4. 大驼峰命名

组件可以嵌套，因为会形成一个组件树，组件树的根叫做根组件

组件中的数据通信：

1. prevent修饰符用于v-on指令，表示阻止默认行为
2. stop修饰符用于v-on指令，表示阻止事件冒泡

组件的状态和属性：

1. 通常讲组件中需要自身管理的数据（组件配置中的data）叫做组件状态（component state），组件状态只能在组件内部使用，外部原则上不可以使用.
2. data(state 状态)在组件中的配置和在vue实例中配置的区别：
   在组件中data必须是一个函数，而VUE实例中心必须是一个对象。因为组件是可以被复用的，每一个组件都是独立的，所以data必须是一个函数.

1
2
3
4
5
6
7
8
9

//在组件中
export default{
    template,
    data(){
        return {
            //返回的结果是组件的状态
        }
    }
}

组件中可以有属性（component props），而vue实例中没有

1. 声明组件属性时，使用短横线或小驼峰命名法
2. 传递组件属性时，使用短横线或小驼峰命名法
3. 属性会被提升到vue组件实例中

==组件的属性时只读的，不允许更改，根本原因是要保证单向数据流==

自定义事件：

1. 在组件中触发事件： this.$emit(“事件名”,事件参数…)
2. 当一个组件状态发生变化时，该组件会重新渲染，在渲染的过程中，可能会导致其子组件的属性发生变化，而属性的变化会导致组件重新渲染。但根本原因，是状态的变化.
3. v-model 的本质是一个语法糖，实际上是绑定value属性，同时监听input事件

组件的生命周期

1. beforeCreate(){} –>这个是自动执行的
2. created() –>组件实例中已经提升到实例总，但是没有渲染页面
3. beforeMount –> 组件即将进行渲染，但还没有渲染，此时已经编译好模板
4. mounted【常用】 –>组件已经完成渲染（页面可见）
5. beforeUpdate –>组件即将更新，还没有更新，此时得到的数据是新的，但页面依旧是旧的
6. updated –> 数据，界面都是新的
7. beforeDestory –> 当组件即将被销毁 调用vm.$destroy()函数
8. destoryed –> 解除绑定，销毁子组件以及事件监听器

vue路由

vue路由，可以简单理解为，当访问某个地址时，渲染某个组件

使用路由

1. 根据一个配置对象创建路由，得到路由对象
2. 在创建vue实例时，将路由对象配置到实例配置的router中
3. 在合适的位置写上router-view组件，表示路由匹配到组件渲染的位置，它实际上是vue-router做好的一个组件，并且做好了全局注册

路由配置对象

1. routes:路由规则配置
2. mode:配置模式
   1. hash模式，兼容性最好，地址出现#号后，切换地址不会导致页面刷新
   2. history模式，使用的是HTML5 history API，地址直接变化，并且页面不刷新