Vue框架具体详解

title: Vue框架介绍与ES6ES7语法

分类

categories: Vue

标签

tags: ["库与框架区别","MVVM与MVC","指令","基本代码",方法,配置对象,过滤器,生命周期,axios请求,全局组件,"ES6","ES7"]

时间

date: 2018-05-22 12:10:18

前端框架Vue

框架与库的区别

小而巧为库，大而全为框架

• 库

  • 提供小功能, 项目入侵小(上了之后可以改)，上了船可以再下船

• 框架

  • 提供比较全的功能, 项目入侵大(上了之后不可改)，上了贼船了很难再下船了

介绍MVVM与MVC

• MVC 是后端开发思想，分为三个部分

  • Model：（数据层）负责数据库操作
  • View：（视图层）所有前端页面
  • Controller：（业务逻辑层） 处理对应业务逻辑

• MVVM 前端页面的分层开发思想，把一个完整的页面分成了三部分

  • Model（页面中需要的数据），这里所指的是：data部分

    • 通过ajax取数据，将来渲染到View中
  • View（页面中的HTML结果），这里所指的是：容器
  • ViewModel（中间的调度者）。这里所指的是：vm

基本代码详情

/**
*    容器就是 MVVM 中的 View
*
*    实例对象就是 MVVM 中的 VM, 被称为调度者
*
*    data就是 MVVM 中的 Model
*/

1. 导入Vue包
<script src = "vue-2.5.15.js"></script>

2. 添加一个容器, 将来被Vue控制
<div id = "box">{{msg}}</div>

3. 创建Vue的实例对象
const vm = new Vue({
    // 3.1 el传入的是选择器, 页面要控制的元素
    el: "#box",
    data: {
    // 3.2 用data渲染数据
        msg: "Hello Vue",
        flag: true
    },
    // 可以绑定事件处理函数
    methods: {
        
    },
})

/**
*    VM的实例对象, 会监听data中每一项的数据变化, 只要一变化, VM就会重新把el指定区域所有的指
*    令重新解析一遍
*    data中的数据, 在每个methods方法中都共享
*
*/

Vue指令

表达式就是指令，如果想让指令生效必须放到el的容器里，他有控制HTML的能力，v-系列插入属性节点，插值表达式插入内容区域

插值表达式

• 插入表达式
• 可以写字符串属性，也可以进行字符串拼接，可以写简单的代码三元表达式，不要过分就行
• 只能写在内容区域

  <p>{{msg}}</p>

v-cloak

• 解决插件表达式闪烁
• 在网络慢的情况下会使用

• 在外层的元素添加 v-cloak ，而且需要在style样式表中添加一个属性

  <style>

  [v-cloak] {
      display: none;
  }

  <style>
  <div id="box" v-cloak></div>

v-text

• 与插值表达式一样都可以向元素插入数据
• 会把之前的内容清空并覆盖
• 可以进行字符串拼接与三元表达式
• 它没有闪烁问题
• 不能渲染标签

  <h1 v-text = "msg"></h1>
  <h1 v-text = "msg + '拼接字符串'"></h1>

v-html

• 渲染标签

  <div v-html = "msg"></div>
  data: {

  msg: "<h1>文本</h1>"

  }

v-bind

• 属性绑定
• 可以进行字符串拼接，三元表达式

• 可以单向数据绑定 model => view

  <!-- 完整版 -->
  <img v-bind:src = "images"/>
  <!-- 简写版 -->
  <img :src = "images"/>
  data: {

  images: "./img/01.png"

  }

v-on

• 绑定事件

• 定义事件名时可以进行传参操作，添加()即可

  <!-- 示例 -->
  <button v-on:事件名称 = "btn"></button>
  <!-- ()进行传参 -->
  <button v-on:click = "btn(111)"></button>
  <!-- 原始版 -->
  <button v-on:click = "btn"></button>
  <!-- 简化版 -->
  <button @:click = "btn"></button>
  methods: {

  // 原始版
  btn: function(str){
      console.log(str);
  },
  // 简化版
  btn(str){
      console.log(str);
  }

  }

v-model

• 双向数据绑定
• 输入框输入值，msg会自动同步
• 只能与表单元素进行使用，才能实现数据绑定（input，select，textarea...），只要能和用户交互就可以实现数据绑定

• data <----> 页面

  <input type = "type" v-model = "msg"/>

  data: {

  msg: "双向数据绑定"

  }

v-for与:key

v-for(遍历的item项, 索引) in 数组 :key="item.id"

• 可以遍历数组

• 尽量使用v-for时，要添加：key，取值：number与string

  <!-- 正式版 -->
  <li v-for = "(item, i) in arr" :key="item.id">

  <p>索引: {{i}}, 值: {{item}}</p>

  </li>
  <!-- 简写版 -->
  <li v-for="item in arr" :key="item.id">{{item}}</li>

  data: {

  arr: ["张三", "李四", "王五"]

  }

v-if与v-show

• 语法： v-if=""
• 作用：显示与隐藏
• 区别： v-if通过动态创建移除进行显示隐藏，此方法比较消耗CPU
• 区别： v-show通过none与black进行显示与隐藏，此方法有初始渲染消耗

• 应用场景： 切换次数多使用 v-show，切换次数少使用 v-if

  <!-- v-if 语法 -->
  <button @click="flag=!=flag"></button>
  <h1 v-if="flag">显示与隐藏</h1>

  <!-- v-show 语法 -->
  <button @click="flag"></button>
  <h1 v-show="flag">显示与隐藏</h1>

  data: {

  flag: true

  }

v-if与v-else

<button @click="flag=!flag"></button>
<h1 v-if="flag">显示</h1>
<h1 v-else>隐藏</h1>

data {
    flag: true
}

绑定class样式

• 绑定具体类名

  .a{color: red;}
  .b{font-size: 18px;}

  / 固定版 /
  <h1 :class="['a', 'b']"></h1>
  / 动态版 /
  <h1 :class="[flag ? a : b]"></h1>
  <button @click="flag=!flag">切换</button>
  data: {

  flag: true

  }

方法

方法-Vue.$set()

• 语法： Vue.$set(为那个对象挂属性, 新属性名称, 新属性值)

• 应用场景： 如果想在data动态一个值，就需要此方法

  {{user.name}}

  data: {

  user: {name: "zs"}

  }
  methods: {

  add(){
      this.$set(this.user, "age", 18)
  }

  }

方法-Vue.$mount()

• 如果el与$mount同时使用了， el优先级最高

  let vm = new Vue({

  data:{},
  methods: {}

  })

  vm.$mount("#box");

配置对象

渲染模板template

• 此属性是渲染模板，templat属性接受的值为字符串

• 此优先级比el高，会把el的覆盖并替换

  <h3>{{msg}}</h3>

  let vm = new Vue({

  el: "#box",
  template: "<h1>{{msg}}</h1>",
  data: {
      msg: "Vue"
  }

  })

过滤器

输出数据时，需要对数据进行格式上的处理，并将结果呈现到页面上，使用Vue提供的过滤器

• 语法：待处理数据 | dateFormat，| 术语：管道符
• 如果在插值表达式中，结果为过滤器处理后的
• 只能用在插值表达式与v-bind中

• 可以连续设置过滤器

  <p>{{str | dateFormat}}</p>
  <!-- 调用传参 -->
  <p>{{str | dateFormat()}}</p>
  data: {

  str: "2018-01-25T02:02.045z"

  }

创建全局过滤器

• Vue.filter("过滤器名称", 处理函数);
• 处理函数的第一形参，名称是约定好的originVal, 第一个参数为管道符左侧的值
• 处理函数的第二形参，为调用过滤器的参数
• 处理完毕后需要使用return出去

• 需要在全局创建

  Vue.filter("dateFormat", (originVal)=>{

  const dt = new Date(originVal)
  const y = dt.getFullYear();
  return y;

  })

创建私有过滤器

• 私有过滤器名称为filters，可以创建多个过滤器

• 只能被当前所属的实例所控制的区域使用

  let vm = new Vue({

  el: "",
  filters: {
      过滤器名称: ()=>{
          
      }        
  }

  })

实例生命周期

每一个vm实例，在创建、运行、销毁的三个阶段，都会依次触发事件，这些事件就是生命周期函数

生命周期钩子(别名)=生命周期函数=生命周期事件

生命周期函数分类

• 创建期间的生命周期函数(一辈子只执行一次)

  • beforeCreate: ()=>{}
  • created: ()=>{}
  • beforeMount: ()=>{}
  • mounted: ()=>{}

• 运行期间的生命周期函数

  • beforeUpdate: ()=>{} 数据新的，页面老的
  • updated: ()=>{} 页面和数据都是最新的

• 销毁期间的生命周期函数

  • beforeDestroy： ()=>{} 销毁之前 但是可以正常工作
  • destroyed: ()=>{} 销毁之后 无法正常工作了

生命周期函数介绍

1. beforeCreate: ()=>{} 比方科瑞特

   1. 这个时候data与methods还没有初始化

2. created: ()=>{} 科瑞唉特d

   1. 这个时候data与methods已经初始化完毕
   2. 如果要获取首屏数据就在此方法进行ajax请求

3. beforeMount: ()=>{} 比方忙特

   1. 当执行到beforeMount 就进行入了创建阶段的第三个生命周期函数，将内存的HMTL结构渲染到页面，但并未开始渲染

4. mounted: ()=>{} 忙提特

   1. 这个阶段正在把内存中渲染好的HTML结构替换到页面中，覆盖到el区域中
   2. 初始化JS插件，在此时比较合适，类似（轮播图插件，区域滚动之类的）

5. beforeUpdate: ()=>{}

   1. 这个阶段就标识data数据发生了变化，data数据最新的，但用户界面还是老的

6. updated: ()=>{}

   1. 此时页面已经刷新。此时data和页面都是最新的

7. beforeDestroy： ()=>{}

   1. 此时vm实例即将被销毁，但是可以使用vm

8. destroyed: ()=>{}

   1. 此时vm已经销毁了，无法正常工作了

使用axios发起ajax请求

axios只能发起get与post请求，无法发起jsonp请求，如果涉及到jsonp可以在后端设置CORS跨域资源共享

请求方式

• axios

  • 只支持 get 与 post
  • 无法发起jsonp请求
  • 如果涉及到了jsonp请求，让后端小伙伴设置一个CORS跨域资源共享

• vue-resource

  • 可以发起jsonp请求，官方不推荐，作者不更新了

语法

在引入axios包时，全局就多了一个axios成员

get请求

// 返回值是 promise 实例对象
let result = axios.get("地址?请求参数")；
// 通过 then 指定回调, 就可以拿到服务器返回的数据
result.then((myresult)=>{
    // 返回数据就在 myresult.data 身上
    console.log(myresult);
})

Vue中使用get请求

<button @click="btn"></button>

// 需要在全局下设置
Vue.prototype.$http = axios;

methods: {
    btn(){
        //1. 调用axios发起get请求, 返回值是实例对象, 调用实例对象的
        axios.get("地址").then((result)=>{
            result.data
        });
        
        //2. 
        this.$http.get("地址").then((result)=>{
            result.data
        })
    }
}

post请求

axios.post("地址", {name: "zs", age: 18}).then(()=>{
    
})

axios高级用法

全局配置请求API的跟路径

// 全局配置 axios 请求 API 接口时候的根路径
axios.defaults.baseURL = "http://www.liulongbin.top:3005";
Vue.prototype.$http = axios;

拦截器实现loading效果

• 拦截器分两部分

  • 请求开始时候的拦截器

  • 请求完毕以后的拦截器

    • 只要有请求被完成， 则会触发 response 拦截器，
• 需要在实例 created 生命周期函数内 注册 request 与 response 拦截器

动画

只能实现简单的动画，内容需要 transition 标签才能实现过渡动画，动画需要在style标签内设置

1. 动画分为两部分

   1. 入场动画，不可见（flag=false） -- 可见（flag=true）
   2. 出场动画，可见（flag=true） -- 不可见（flag=false）

2. 入场时候

   1. v-enter 入场前的样式
   2. v-enter-to 入场完成以后的样式，一般不使用
   3. v-enter-active 入场的时间段

3. 离场时候

   1. v-leave 离场前的样式
   2. v-leave-to 离场完成以后的样式
   3. v-leave-active 离场的时间段

• 过渡动画不一定和 v-if 与 v-show 使用
• 列表过渡不需要配合
• 单个元素过渡需要 v-if 与 v-show 来配合使用

第三库动画库

单个元素使用

1. 将需要过渡动画用 transition 包裹起来

2. 给 transition 添加入场与离场动画

   1. enter-active-class="" 入场时候的类名
   2. leave-active-class="" 离场时候的类名

多个元素使用

1. 多个元素需要过渡动画，需要用 transition-group 进行包裹
2. 需要在 style 定义两组类，Vue提供的过渡动画

计算属性

• 如果计算属性所指向的 function 中， data上的数据发生了变化，则会重新计算属性重新求值

  computed: {

  funllname: function(){}

  }

Vue配置webpack

安装传统的安装webpack，在导入Vue组件的时候会出现报错，因为默认导入时阉割版的Vue，开发时需要手动进行指定正常版的Vue，并导入进去

1. 运行 cnpm i vue -S 把 vue 安装到项目依赖

2. 在 index.js 中使用 import 导入 vue 模块：

   import Vue from 'vue'

3. 在 index.html 中创建将来要被 vm 实例控制的 div：

   <!-- 将来，这个 div 就是 Vue实例 要控制的区域 -->
   <div id="#app"></div>

4. 在 index.js 中创建 vm 实例，并使用 el 指定要控制的区域，使用 data 指定要渲染的数据：

   const vm = new Vue({
     el: '#app', // 要控制的区域
     data: {
       msg: 'ok' // 要渲染的数据
     }
   })
   
   

关于基于webpack的vue项目报错

1. 因为使用 import 导入的 vue 模块，导入的并不是功能最全的 vue 包；而是删减版的；
2. 删减版的 vue 包中功能很少，目的是为了减小vue 包的体积，因为文件越小，网络请求越快！

3. 如何让 import 导入最全的 vue 包呢？

   • 打开 node_modules 目录，找到 vue 包所在的文件夹
   • 打开文件夹中的 package.json，找到 module 节点
   • 把 module 节点所对应的 dist/vue.runtime.esm.js 路径，修改为 dist/vue.min.js 即可
4. 暂时 import 最全的 vue 包；等开发项目的时候，一定要使用 删减版的 包；

组件

模块化和组件化概念

1. 模块化：以代码角度思考， 把可复用的代码，抽离为单独的模块

2. 组件化：以UI角度思考， 把可复用的UI结构，抽离为单独的模块

   1. 方便了UI结构的重用
   2. 随着项目开发的深入，组件手里的组件会越来越多
   3. 可以直接使用第三方组件库
   4. 让程序猿跟专注于代码逻辑

定义组件