最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

xampp教程:前端知识点总结——Vue案例

XAMPP教程 admin 44浏览 0评论

一、框架和库的区别

框架(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

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

三、Vue 中基础知识

1、双花括号

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

语法:

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

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

2、指令-循环指令

基本语法1:

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

基本语法 2:

  1.    <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、指令-事件绑定

语法:

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

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

5、指令-属性绑定

基本语法:

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

补充,支持简写:

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

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

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

动态样式绑定:

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

动态样式类绑定:

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

方向1:数据绑定到视图

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

基本语法:

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

四、组件化

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

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

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

1、组件的创建

全局组件:

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

局部组件:

  1.        new Vue({
  2.            components:{
  3.                'my-footer':{
  4.               template:''
  5.             }
  6.            }
  7.        })
2、组件使用

作为普通的标签去使用

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

五、自定义指令

创建:

  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.     <any v-change="count"></any>

六、过滤器

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

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

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

1、过滤器的创建和使用

1. 创建

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

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.    })

七、复合组件

知识回顾:

  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. 允许在一个组件中,直接来调用另外一个组件。

八、生命周期

四个阶段:

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

十、组件间通信

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

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

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.        })

十二、路由模块

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

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

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

工作原理:

  • 解析地址栏:完整的页面地址、路由地址
  • 根据路由地址从路由词典中找到真正的要加载的页面
  • 发起 ajax 请求:请求要加载的页面
  • 像指定的容器中插入加载来的页面
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

十三、搭建基于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 行业,大家都希望能够在自己所处的行业以及所处的领域中有所建树。而如果要实现这个目标,在成长的过程中,不可避免的会踩坑、走弯路,那有没有办法可以少踩一些坑、少走一些弯路呢?万幸,答案是有的。

 

我与这些领军者相去甚远,但依然希望尽自己的一些力量来帮助到一些人,让大家可以少走一些弯路、少踩一些坑。怀揣着这样的一个梦想,我开设了这门课程。

转载请注明:XAMPP中文组官网 » xampp教程:前端知识点总结——Vue案例