Vuejs框架的总结

前端知识点总结——Vue

2018-04-15 web前端开发


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文件

<script src="js/vue.js"></script>

3.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、指令-选择指令

语法:

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

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

  3.    <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=""></img>

动态样式绑定:

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

动态样式类绑定:

<h1 :class="{myRed:false}">动态样式类的绑定</h1>

6、指令-双向数据绑定

方向1:数据绑定到视图

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

基本语法:

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

4.组件化

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

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

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

1、组件的创建

全局组件:

Vue.component('my-com',{

   template:`

      <h2 >it is a header</h2>

   `

})

局部组件:

new Vue({

  components:{

    ‘my-footer’:{

            template:`

               <h2 >it is a footer</h2>  

             `

        }

   }

})

2、组件使用

作为普通的标签去使用

<my-com></my-com>

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

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

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

5.自定义指令

创建:

Vue.directive('change',{

   bind:function(el,bindinds){

    //首次调用

   },

   update:function(){

     //解绑

     }

})

使用:

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

6.过滤器

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

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

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

1、过滤器的创建和使用

1.创建

Vue.filter(

   'myFilter',function(myInput){

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

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

      // 返回

     return ‘处理后的结果’

   }

)

2.使用

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

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

1.发送

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

2.接受

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

  2.        return '处理后的结果'

  3.    })

7.复合组件

知识回顾:

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

  2.        template:`<div></div>`

  3.      });

  4.      <my-header></my-header>

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

注意事项:

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

  1.      <my-list>

  2.        <my-item></my-item>

  3.      </my-list>

效果是出不来的。

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.    <any>{{myHandle}}</any>

10.组件间通信

1、父与子通信 (props down)

1.发送

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

2.接受到son组件:

  1.            Vue.component('son',{

  2.              props:['myName'],

  3.              template:`

  4.               <p>{{myName}}</p>

  5.              `

  6.            })    

2、子与父通信 (events up)

1.绑定

  1.        methods:{

  2.         handleEvent:function(msg){}

  3.        }

  4.        <son @customEvent="handleEvent"></son>

2.触发

子组件内部:

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

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

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

1.指定ref属性

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

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.        <template></template>

  2.        <script></script>

  3.        <style></style>

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

  2.        id='myContent'

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

  4.        </script>

  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.    <router-view></router-view>

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.     <router-link

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

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.      <router-view></router-view>

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

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页