WEB前端-前端知识点总结VUE
张炜 2018-04-07 来源 : 阅读 646 评论 0

摘要:本文主要介绍了WEB前端知识点VUE,通过十几个要点着重写出来,让我们从一开始就可以学习到WEB前端精髓所在,让我们在VUE的这条路上走得更远,能够更加容易的学习它们,让我们在以后的运用中更加的熟练。

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

        $ npm install --global vue-cli

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

        $ vue init webpack my-project

        # 安装依赖,走你

        $ cd my-project

        $ npm install

        $ npm run dev

    方式2:

        直接引入对应的js文件

   

3.Vue中基础知识

JavaScript


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="变量">

      </表单元素>

   

4.组件化

JavaScript


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

 

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

 

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

 

1、组件的创建

  全局组件

    Vue.component('my-com',{

      template:`

        <h2>it is a header</h2>

      `

    })

      局部组件

    new Vue({

        components:{

            'my-footer':{

           template:''

         }

        }

    })

2、组件使用

    作为普通的标签去使用

    <my-com></my-com>

 

 

3、注意事项

    1.组件的id和使用方式 遵循烤串式命名方式:a-b-c 

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

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

   

 

5.自定义指令

JavaScript


1、创建和使用

Vue.directive('change',{

    bind:function(el,bindings){

    //首次调用

    },

    update:function(el,bindings){

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

    },

    unbind:function(){

    //解绑

    }

})

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

   

6.过滤器

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

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

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

1、过滤器的创建和使用

JavaScript


1.创建

   Vue.filter(

    'myFilter',

    function(myInput){

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

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

       //返回

       return '处理后的结果'

    })

 

2.使用

    <any>{{expression | myFilter}}</any>

   

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

JavaScript


1.发送

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

 

2.接受

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

    return '处理后的结果'

})

   

7.复合组件

JavaScript


知识回顾:

  Vue.component('my-header',{

    template:`<div></div>`

  });

 

  <my-header></my-header>

 

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

 

注意事项:

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

  

  <my-list>

    <my-item></my-item>

  </my-list>

  效果是出不来的

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

   

8.生命周期


四个阶段:

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

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

    update 数据发生变化,

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

 

    beforeCreate/created

    beforeMount/mounted

    beforeUpdate/updated

    beforeDestroy/destroyed

   

9.常用属性


1、watch

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

   v-model="myValue"

   2.监听

    watch:{

    myValue:function(newValue,oldValue){

    

    }

    }

2、computed

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

    1.指定计算属性

        computed:{

          myHandle:function(){

           return 数据

          }

        }

 

    2.调用

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

   

10.组件间通信

JavaScript


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);

   

11.补充组件创建的方式

JavaScript


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'

    })

   

12.路由模块

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

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


SPA:single page application 单一页面应用程序,只有一个完整的页面;

它在加载页面时,不会加载整个页面,而是只更新某个指定的容器中内容。

比如Gmail、移动的webApp

 

 

工作原理:

1.解析地址栏 

    完整的页面地址、路由地址

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

3.发起ajax请求 

    请求要加载的页面

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

   

2、路由模块的基本使用

JavaScript


专业术语: 

    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、使用路由模块来实现页面跳转的方式

JavaScript


方式1:直接修改地址栏

方式2:js

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

方式3:

<router-link

to="路由地址"></router-link>

   

4、完成参数的传递


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

 

1.明确发送方和接收方

list --20--> detail

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

/detail --》 /detail/:index

 

this.$route.params.index

2.发送

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

   

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


1.指定一个文件夹

C:\xampp\htdocs\framework\vue\project

2.将tpls.zip拷贝到project中 

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

4.进入到tpls

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

6.执行npm install

7.执行npm start

   

14.axios

1.axios的get方法


export const getAjax= function (getUrl,getAjaxData) {

  return axios.get(getUrl, {

    params: {

      'getAjaxDataObj1': getAjaxData.obj1,//obj1为getAjaxData的一个属性

      'getAjaxDataObj2': getAjaxData.obj2

    }

  })

}

   

2.axios的post方法

JavaScript


export const postAjax= function (getUrl,postAjaxData) {

return axios.get(postUrl, {

 

  'postAjaxDataObj1': postAjaxData.obj1,//obj1为postAjaxData的一个属性

  'postAjaxDataObj2': postAjaxData.obj2

 

})

}

   

3.axios的拦截器
主要分为请求和响应两种拦截器,请求拦截一般就是配置对应的请求头信息(适用与常见请求方法,虽然ajax的get方法没有请求头,但是axios里面进行啦封装),响应一般就是对reponse进行拦截处理,如果返回结果为[]可以转化为0

1.请求拦截:将当前城市信息放入请求头中

JavaScript


axios.interceptors.request.use(config => {

config.headers.cityCode = window.sessionStorage.cityCode //jsCookie.get('cityCode')

return config

},

   

2.响应拦截:处理reponse的结果


axios.interceptors.response.use((response) =>{

  let data = response.data

  if(response.request.responseType === 'arraybuffer'&&!data.length){

    reponse.date=0

  }

})

   

希望这篇文章可以帮助到你,总之同学们,it资讯尽在职坐标。

本文由 @职坐标 发布于职坐标。未经许可,禁止转载。
喜欢 | 2 不喜欢 | 0
看完这篇文章有何感觉?已经有2人表态,100%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论
本文作者 联系TA

擅长制定和落实工作

  • 11
    文章
  • 1155
    人气
  • 83%
    受欢迎度

已有6人表明态度,83%喜欢该老师!

进入TA的空间
名师指导直通车
  • 资料索取
    资料索取
  • 答疑解惑
    答疑解惑
  • 技术交流
    技术交流
  • 职业测评
    职业测评
  • 面试技巧
    面试技巧
  • 高薪秘笈
    高薪秘笈
TA的其他文章 更多>>
大数据-Hadoop与Spark学习经验谈
经验技巧 100% 的用户喜欢
大数据-CentOS 6.6安装 Nginx
经验技巧 100% 的用户喜欢
大数据-Dubbo详细介绍与安装使用过程
经验技巧 100% 的用户喜欢
大数据-dubbo原理
经验技巧 100% 的用户喜欢
大数据-Hadoop学习笔记-Hadoop HDFS环境搭建
经验技巧 0% 的用户喜欢
其他海同名师 更多>>
刘新华
刘新华 联系TA
实力型。激情饱满,对专业充满热情
吴翠红
吴翠红 联系TA
独创“教、学、练、测”循环教学模式
吕益平
吕益平 联系TA
熟悉企业软件开发的产品设计及开发
黄泽民
黄泽民 联系TA
擅长javase核心技术
程钢
程钢 联系TA
擅长大型企业商业网站开发和管理
经验技巧30天热搜词 更多>>

您输入的评论内容中包含违禁敏感词

我知道了

X
免费获取海同IT培训资料
验证码手机号,获得海同独家IT培训资料
获取验证码
提交

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    ICP许可  沪B2-20190160

站长统计