前端知识点总结——Vue

(点击上方公众号,可快速关注)

作者:楷楷

https://www.hazyzh.com/b/180211145458


1.框架和库的区别

框架(framework):有着自己的语法特点、都有对应的各个模块。

库(library):专注于一点。

框架的好处:

  1. 提到代码的质量,开发速度

  2. 提高代码的复用率

  3. 降低模块之间的耦合度(高内聚低耦合)

UI:user interface

GUI:graphical user interface

CLI:command line interface

API:application interface

思维模式的转换:从操作DOM的思维模式 切换到以数据为主。

2.Vue概述

1、what

是一个渐进式的构建用户界面的js框架

2、where

小到的简单的表单处理,大到复杂的数据操作比较频繁的单页面应用程序

3、why
  1. 方便阅读的中文文档

  2. 容易上手 (学习曲线比较缓和)

  3. 体积小

  4. 基于组件化的开发方式

  5. 代码的可读性、可维护性得到了提高

4、how

工作方式:可以通过丰富的指令扩展模板,可以通过各种各样的插件来增强功能

搭建环境

方式1

全局安装 vue-cli

    
    
    
    
  1. $ npm install --global vue-cli

创建一个基于 webpack 模板的新项目

    
    
    
    
  1. $ vue init webpack my-project

安装依赖,走你

    
    
    
    
  1.    $ cd my-project

  2.    $ npm install

  3.    $ npm run dev

方式2

直接引入对应的js文件

3.Vue中基础知识

1、双花括号

mustache(胡子)/interpolation(插值表达式)

语法:

    
    
    
    
  1.    {{表达式}}

作用:将表达式执行的结果 输出当调用元素的innerHTML中;还可以将数据绑定到视图。

2、指令-循环指令

基本语法1:

    
    
    
    
  1.     v-for="tmp in array">

基本语法2:

    
    
    
    
  1.     v-for="(value,index) in array">

作用:在遍历array这个集合时,将临时变量保存在tmp中,创建多个any标签。

3、指令-选择指令

语法:

    
    
    
    
  1.     v-if="表达式">

  2.     v-else-if="表达式">

  3.     v-else="表达式">

作用:根据表达式执行结果的真假,来决定是否要将当前的这个元素 挂载到DOM树

4、指令-事件绑定

语法:

    
    
    
    
  1.     v-on:eventName="handleEvent">

作用:给指定的元素 将handleEvent的方法绑定给指定eventName事件。

5、指令-属性绑定

基本语法:

    
    
    
    
  1.     v-bind:myProp="表达式">

补充,支持简写:

    
    
    
    
  1.     :myProp="表达式">

作用:将表达式执行的结果绑定到当前元素的myProp属性。

    
    
    
    
  1.     v-bind:src="'img/'+myImg" alt="">

动态样式绑定:

    
    
    
    
  1.     :style="{backgroundColor:myBGColor}">动态样式绑定

动态样式类绑定:

    
    
    
    
  1.     :class="{myRed:false}">动态样式类的绑定

6、指令-双向数据绑定

方向1:数据绑定到视图

方向2:将视图中(表单元素)用户操作的结果绑定到数据

基本语法:

    
    
    
    
  1.    <表单元素 v-model="变量">

4.组件化

组件:组件就是可被反复使用的,带有特定功能的视图。

所谓的组件化,就像玩积木一样,把封装的组件进行复用,把积木(组件)拼接在一起,构成一个复杂的页面应用程序。

组件树就是由各个组件构成的一种数据结构,它存在的意义是为了帮梳理应用程序。

1、组件的创建

全局组件:

    
    
    
    
  1.        Vue.component('my-com',{

  2.          template:`

  3.            

    it is a header

  4.          `

  5.        })

局部组件:

    
    
    
    
  1.        new Vue({

  2.            components:{

  3.                'my-footer':{

  4.               template:''

  5.             }

  6.            }

  7.        })

2、组件使用

作为普通的标签去使用

    
    
    
    
  1.    

3、注意事项
  1. 组件的id和使用方式 遵循烤串式命名方式:a-b-c

  2. 如果一个组件 要渲染多个元素,将多个元素放在一个顶层标签中,比如div、form

  3. 全局组件可以用在id为example的范围内的任何一个组件内部,直接调用可以;但是局部组件只能在父模板中直接调用

5.自定义指令

创建:

    
    
    
    
  1.     Vue.directive('change',{

  2.        bind:function(el,bindings){

  3.        //首次调用

  4.        },

  5.        update:function(el,bindings){

  6.        //只要是有数据变化,都会调用

  7.        },

  8.        unbind:function(){

  9.        //解绑

  10.        }

  11.     })

使用:

    
    
    
    
  1.     v-change="count">

6.过滤器

过滤器是针对一些数据 进行筛选、过滤、格式化等相关的处理,变成我们想要的数据。

过滤器的本质 就是一个带有参数带有返回值的方法。

Vue1.* 支持内置的过滤器,但是Vue2.* 就不再内置过滤器,但是支持自定义过滤器。

1、过滤器的创建和使用

1.创建

    
    
    
    
  1.       Vue.filter(

  2.        'myFilter',

  3.        function(myInput){

  4.           //myInput是在调用过滤器时,管道前表达式执行的结果

  5.           //针对myInput,按照业务需求做处理

  6.           //返回

  7.           return '处理后的结果'

  8.        })

2.使用

    
    
    
    
  1.        {{expression | myFilter}}

2、如何在调用过滤器时,完成参数的发送和接受

1.发送

    
    
    
    
  1.    {{expression | myFilter(参数1,参数2)}}

2.接受

    
    
    
    
  1.    Vue.filter('myFilter',function(myInput,参数1,参数2){

  2.        return '处理后的结果'

  3.    })

7.复合组件

知识回顾:

    
    
    
    
  1.      Vue.component('my-header',{

  2.        template:`

    `

  3.      });

  4.      <my-header>my-header>

复合组件:并不是新的概念,就是一个组件,只不过这个组件中 可以调用其他的组件。

注意事项:

1.组件要渲染的内容 取决于在定义组件时template

    
    
    
    
  1.      

  2.        

  3.      

效果是出不来的。

2.允许在一个组件中,直接来调用另外一个组件。

8.生命周期

四个阶段:

  • create 准备工作 (数据的初始化。。。)

  • mount 挂载前后针对元素进行操作

  • update 数据发生变化,

  • destroy 清理工作 (关闭定时器、集合清空..)

  • beforeCreate/created

  • beforeMount/mounted

  • beforeUpdate/updated

  • beforeDestroy/destroyed

9.常用属性
1、watch

1.表单元素的双向数据绑定

    
    
    
    
  1.    v-model="myValue"

2.监听

    
    
    
    
  1.        watch:{

  2.        myValue:function(newValue,oldValue){

  3.        }

  4.        }

2、computed

计算属于是用于在模板中,搞定复杂的业务逻辑,因为有依赖缓存。

1.指定计算属性

    
    
    
    
  1.            computed:{

  2.              myHandle:function(){

  3.               return 数据

  4.              }

  5.            }

2.调用

    
    
    
    
  1.    {{myHandle}}

10.组件间通信

1、父与子通信 (props down)

1.发送

    
    
    
    
  1.     myName='zhangsan'>

2.接受到son组件:

    
    
    
    
  1.            Vue.component('son',{

  2.              props:['myName'],

  3.              template:`

  4.              

    {{myName}}

  5.              `

  6.            })    

2、子与父通信 (events up)

1.绑定

    
    
    
    
  1.        methods:{

  2.         handleEvent:function(msg){}

  3.        }

  4.        @customEvent="handleEvent">

2.触发

子组件内部:

    
    
    
    
  1.        this.$emit(‘customEvent’,100);

3、ref(reference 引用/参考 外号)

帮助在父组件中 得到子组件中的数据、方法。

1.指定ref属性

    
    
    
    
  1.     ref="mySon">

2.根据ref得到子组件实例

    
    
    
    
  1.    this.$refs.mySon

4、$parent

this.$parent得到父组件的实例

5、兄弟组件通信

1.

    
    
    
    
  1. var bus = new Vue();

2.接收方

    
    
    
    
  1.    bus.$on('eventName',function(msg){})

3.发送方

    
    
    
    
  1.    bus.$emit('eventName',123);

11.补充组件创建的方式

1、直接在template属性中指定模板内容

1.全局组件

    
    
    
    
  1.    Vue.component

2.局部组件

    
    
    
    
  1.        {

  2.          components:{

  3.            'my-footer':{template:``}

  4.          }

  5.        }

2、.vue结尾的文件
    
    
    
    
  1.        

  2.        

  3.        

3、单独指定一个模板内容
    
    
    
    
  1.        

  2.        id='myContent'

  3.        type='text/x-template'>

  4.        

  5.        Vue.component('',{

  6.          template:'#myContent'

  7.        })

12.路由模块

路由模块的本质 就是建立起url和页面之间的映射关系。

1、SPA的基本概念和工作原理

SPA:single page application 单一页面应用程序,只有一个完整的页面;它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容,比如Gmail、移动的webApp。

工作原理:

  1. 解析地址栏:完整的页面地址、路由地址

  2. 根据路由地址从路由词典中找到真正的要加载的页面

  3. 发起ajax请求:请求要加载的页面

  4. 像指定的容器中插入加载来的页面

2、路由模块的基本使用

专业术语:

  • router路由器

  • route路由

  • routes 路由数组(路由词典)

1.引入 vue.js vue-router.js

2.指定一个容器

    
    
    
    
  1.    

3.创建业务所需要用到的组件类

    
    
    
    
  1.    var MyLogin = Vue.component()

4.配置路由词典

    
    
    
    
  1.     const myRoutes = [

  2.      {path:'',component:MyLogin},

  3.      {path:'/login',component:MyLogin}

  4.     ];

  5.     const myRouter = new VueRouter({

  6.      routes:myRoutes

  7.     })

  8.     new Vue({

  9.       router:myRouter

  10.     })

5.测试

修改地址栏中的路由地址,测试看加载的组件是否正确

注意事项:

1.先引入vue,再引入插件

2.一定要指定router-view

3.route路由 {path:'',component:}

routes:路由数组 []

router:路由器,按照指定的路由规则去访问对应的组件 new VueRouter

3、使用路由模块来实现页面跳转的方式

方式1:

直接修改地址栏

方式2:

    
    
    
    
  1.    this.$router.push(‘路由地址’);

方式3:

    
    
    
    
  1.    

  2.     to="路由地址">

4、完成参数的传递

在页面之间跳转的时候,在有些场景下,需要同时指定参数

1.明确发送方和接收方

    
    
    
    
  1.    list --20--> detail

2.配置接收方的路由地址

    
    
    
    
  1.    /detail --》 /detail/:index

  2.    this.$route.params.index

3.发送

    
    
    
    
  1.    routerLink to="/detail/20"

  2.    this.$router.push('/detail/20')

5、路由嵌套

在一个路由中,path对应一个component,如果这个component需要根据

不同的url再加载其他的component,称之为路由的嵌套

举例:比如A组件现在需要根据不同的url,加载B组件或者C组件

1.给A组件指定一个容器

    
    
    
    
  1.      

2.配置路由词典

    
    
    
    
  1.      {

  2.        path:'/a',

  3.        component:A,

  4.        children:[

  5.          {path:'/b',component:B}

  6.        ]

  7.      }

需求:现在有两个组件,分别是login/mail,建立SPA。

在此基础上,希望mail组件 嵌套inbox/outbox/draft

补充:在设置子路由,路由匹配规则依然是适用的,只不过路由地址为空和异常,要携带父组件的路由地址

    
    
    
    
  1.      /mail /mail/draft

13.搭建基于CLI开发环境的方式

1.指定一个文件夹: C:\xampp\htdocs\framework\vue\project

2.将tpls.zip拷贝到project中

3.右键单击压缩包,解压缩到当前文件夹

4.进入到tpls

5.同时按下shift和鼠标右键,选择在此位置打开命令行串口

6.执行npm install

7.执行npm start


觉得本文对你有帮助?请分享给更多人

关注「前端大全」,提升前端技能

前端知识点总结——Vue_第1张图片


你可能感兴趣的:(前端知识点总结——Vue)