前端知识点总结——Vue

作者:楷楷

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

一、框架和库的区别

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

库(library):专注于一点。

框架的好处:

  1. 提到代码的质量,开发速度
  2. 提高代码的复用率
  3. 降低模块之间的耦合度(高内聚低耦合)

UI:user interface

GUI:graphical user interface

CLI:command line interface

API:application interface

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

二、Vue 概述

1、what

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

2、where

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

3、why
  • 方便阅读的中文文档
  • 容易上手 (学习曲线比较缓和)
  • 体积小
  • 基于组件化的开发方式
  • 代码的可读性、可维护性得到了提高
4、how

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

搭建环境

方式 1

全局安装 vue-cli

$ npm install --global vue-cli

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

$ vue init webpack my-project

安装依赖,走你

$ cd my-project
    $ npm install
    $ npm run dev

方式 2

直接引入对应的 js 文件

三、Vue 中基础知识

1、双花括号

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

语法:

<any>{{表达式}}</any>

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

2、指令-循环指令

基本语法1:

<any v-for="tmp in array"></any>

基本语法 2:

<any v-for="(value,index) in array"></any>

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

3、指令-选择指令

语法:

<any v-if="表达式"></any>
    <any v-else-if="表达式"></any>
    <any v-else="表达式"></any>

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

4、指令-事件绑定

语法:

<any v-on:eventName="handleEvent"></any>

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

5、指令-属性绑定

基本语法:

<any v-bind:myProp="表达式"></any>

补充,支持简写:

<any :myProp="表达式"></any>

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

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

动态样式绑定:

<p :style="{backgroundColor:myBGColor}">动态样式绑定</p>

动态样式类绑定:

<h1 :class="{myRed:false}">动态样式类的绑定</h1>
6、指令-双向数据绑定

方向1:数据绑定到视图

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

基本语法:

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

四、组件化

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

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

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

1、组件的创建

全局组件:

Vue.component('my-com',{
          template:`
            <h2>it is a header</h2>
          `
        })

局部组件:

new Vue({
            components:{
                'my-footer':{
               template:''
             }
            }
        })
2、组件使用

作为普通的标签去使用

<my-com></my-com>
3、注意事项
  • 组件的 id 和使用方式 遵循烤串式命名方式:a-b-c
  • 如果一个组件 要渲染多个元素,将多个元素放在一个顶层标签中,比如div、form
  • 全局组件可以用在 id 为 example 的范围内的任何一个组件内部,直接调用可以;但是局部组件只能在父模板中直接调用

五、自定义指令

创建:

Vue.directive('change',{
        bind:function(el,bindings){
        //首次调用
        },
        update:function(el,bindings){
        //只要是有数据变化,都会调用
        },
        unbind:function(){
        //解绑
        }
     })

使用:

<any v-change="count"></any>

六、过滤器

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

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

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

1、过滤器的创建和使用

1. 创建

Vue.filter(
        'myFilter',
        function(myInput){
           //myInput是在调用过滤器时,管道前表达式执行的结果
           //针对myInput,按照业务需求做处理
           //返回
           return '处理后的结果'
        })

2. 使用

<any>{{expression | myFilter}}</any>
2、如何在调用过滤器时,完成参数的发送和接受

1. 发送

<any>{{expression | myFilter(参数1,参数2)}}</any>

2. 接受

Vue.filter('myFilter',function(myInput,参数1,参数2){
        return '处理后的结果'
    })

七、复合组件

知识回顾:

Vue.component('my-header',{
        template:`<div></div>`
      });

      <my-header></my-header>

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

注意事项:

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

<my-list>
        <my-item></my-item>
      </my-list>

效果是出不来的。

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

八、生命周期

四个阶段:

  • create 准备工作 (数据的初始化。。。)
  • mount 挂载前后针对元素进行操作
  • update 数据发生变化,
  • destroy 清理工作 (关闭定时器、集合清空..)
  • beforeCreate/created
  • beforeMount/mounted
  • beforeUpdate/updated
  • beforeDestroy/destroyed
九、常用属性
1、watch

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

v-model="myValue"

2. 监听

watch:{
        myValue:function(newValue,oldValue){

        }
        }
2、computed

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

1. 指定计算属性

computed:{
              myHandle:function(){
               return 数据
              }
            }

2.调用

<any>{{myHandle}}</any>

十、组件间通信

1、父与子通信 (props down)

1.发送

<son myName='zhangsan'></son>

2.接受到 son 组件:

Vue.component('son',{
              props:['myName'],
              template:`
               <p>{{myName}}</p>
              `
            })
2、子与父通信 (events up)

1. 绑定

methods:{
         handleEvent:function(msg){}
        }
        <son @customEvent="handleEvent"></son>

2. 触发

子组件内部:

this.$emit(‘customEvent’,100);
3、ref(reference 引用/参考 外号)

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

1. 指定 ref 属性

<son ref="mySon"></son>

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

this.$refs.mySon
4、$parent

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

5、兄弟组件通信

1.

var bus = new Vue();

2. 接收方

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

3. 发送方

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

十一、补充组件创建的方式

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

1. 全局组件

Vue.component

2. 局部组件

{
          components:{
            'my-footer':{template:``}
          }
        }
2、.vue 结尾的文件
<template></template>
        <script></script>
        <style></style>
3、单独指定一个模板内容
<script
        id='myContent'
        type='text/x-template'>
        </script>

        Vue.component('',{
          template:'#myContent'
        })

十二、路由模块

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

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

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

工作原理:

  • 解析地址栏:完整的页面地址、路由地址
  • 根据路由地址从路由词典中找到真正的要加载的页面
  • 发起 ajax 请求:请求要加载的页面
  • 像指定的容器中插入加载来的页面
2、路由模块的基本使用

专业术语:

  • router 路由器
  • route 路由
  • routes 路由数组(路由词典)

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

2. 指定一个容器

<router-view></router-view>

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

var MyLogin = Vue.component()

4. 配置路由词典

const myRoutes = [
      {path:'',component:MyLogin},
      {path:'/login',component:MyLogin}
     ];

     const myRouter = new VueRouter({
      routes:myRoutes
     })

     new Vue({
       router:myRouter
     })

5. 测试

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

注意事项:

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

2. 一定要指定 router-view

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

routes:路由数组 []

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

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

方式 1:

直接修改地址栏

方式 2:

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

方式 3:

<router-link 
     to="路由地址"></router-link>
4、完成参数的传递

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

1. 明确发送方和接收方

list --20--> detail

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

/detail --》 /detail/:index

    this.$route.params.index

3. 发送

routerLink to="/detail/20"
    this.$router.push('/detail/20')
5、路由嵌套

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

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

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

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

<router-view></router-view>

2. 配置路由词典

{
        path:'/a',
        component:A,
        children:[
          {path:'/b',component:B}
        ]
      }

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

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

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

/mail /mail/draft

十三、搭建基于CLI开发环境的方式

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

2. 将 tpls.zip 拷贝到 project 中

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

4. 进入到 tpls

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

6. 执行 npm install

7. 执行 npm start

站在巨人的肩膀上,我们可以看得更远,约翰 · 雷西格发布了 jQuery 的第一个版本,从此让我们进入了 jQuery 时代;尤雨溪创造了 Vue,使我们正式迈入 Vue 的时代。

我们选择了 IT 行业,大家都希望能够在自己所处的行业以及所处的领域中有所建树。而如果要实现这个目标,在成长的过程中,不可避免的会踩坑、走弯路,那有没有办法可以少踩一些坑、少走一些弯路呢?万幸,答案是有的。

我与这些领军者相去甚远,但依然希望尽自己的一些力量来帮助到一些人,让大家可以少走一些弯路、少踩一些坑。

原文发布于微信公众号 - GitChat精品课(CSDN_Tech)

原文发表时间:2018-11-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏北京马哥教育

Linux cat命令

豌豆贴心提醒,本文阅读时间3分钟,文末有秘密! ? 文 | 豌豆 图 | 来源网络 ? Linux cat命令 命令:cat cat 命令用...

3894
来自专栏大前端_Web

前端路由相关实现

版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/articl...

992
来自专栏君赏技术博客

百思不得姐数据挖掘第一篇

这是此文档的第一篇文章,写在之前要说的话。里面设计的技术点可能有些新人不是太了解,我只会说我遇到的难点和思路,文章也是想到那里写到那里。

663
来自专栏贺贺的前端工程师之路

Flex Box布局学习- 兼容

随着自己写过的页面的增多,也遇到了很多CSS兼容性的问题。这些兼容性问题,都是必然的,因为技术在不断进步,不断革新,所谓,“后浪推前浪,前浪拍死在沙滩上”,当然...

922
来自专栏彭湖湾的编程世界

【javascript】原生js更改css样式的两种方式

下面我给大家介绍的是原生js更改CSS样式的两种方式: 1通过在javascript代码中的node.style.cssText="css表达式1;css表达式...

2198
来自专栏移动开发之家

GSYVideoPlayer项目说明

项目目前UI层大部分方法和变量都是protect,虽然就封装性而言这并不是很好,但你可以继承后快捷实现你的自定义。

1013
来自专栏前端布道

Angular开发实践(五):深入解析变化监测

什么是变化监测 在使用 Angular 进行开发中,我们常用到 Angular 中的绑定——模型到视图的输入绑定、视图到模型的输出绑定以及视图与模型的双向绑定。...

4128
来自专栏Petrichor的专栏

nano:基本操作

2204
来自专栏向治洪

微信小程序实例之摇一摇抽奖

概述 前面我们讲了如何开始微信小程序搭建和一些组件的介绍。微信小组件和微信小程序入门 微信小程序目录 为了更好的理解小程序和小程序开发,我们首先来看一下项目的目...

5596
来自专栏不知的专栏

反-反爬虫:用几行代码写出和人类一样的动态爬虫

本文将从 Phantomjs 动态爬虫介绍起,用3行代码傻瓜式完成基于 Casper 的动态爬虫来绕过对抗策略获取页面数据。

1.3K1

扫码关注云+社区

领取腾讯云代金券