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

一、框架和库的区别

框架（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.      });
5.      <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){
4.        }
5.        }

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>
6.        Vue.component('',{
7.          template:'#myContent'
8.        })

十二、路由模块

路由模块的本质就是建立起 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.     ];
6.     const myRouter = new VueRouter({
7.      routes:myRoutes
8.     })
10.     new Vue({
11.       router:myRouter
12.     })

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
3.    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案例