Vue框架具体详解

2024年1月26日 82次阅读 来源: Jack凯

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. 让程序猿跟专注于代码逻辑

定义组件

    原文作者：Jack凯
    原文地址: https://segmentfault.com/a/1190000015362102
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞