Vue的基础入门

Vue的基础入门

vue.png

一、Vue的基础入门

  • 简介

    作者：尤雨溪 版本：2.X版本 预估4-5月份3.0版本会发布 官网链接

    Vue是一个渐进式的JavaScript框架

    Vue是一个MVVM框架[1]

    （M : 数据层 V : 视图层 VM：映射层，连接数据层和视图层）

  • Vue的特点

    不再是操作真实的DOM，而是操作虚拟DOM[2]，通过数据来驱动视图（而jQuery[3]是操作真实的DOM来改变视图）

    底层问题：Vue2.0 : Object.defineProperty-数据劫持、监听（ES5的方法）

    Vue3.0中做了更改，通过new Proxy（ES6的方法）来实现数据操作视图。

    Vue不支持低版本浏览器(IE9以下)

  • Vue的基本使用

    因为Vue是一个构造函数，使用的时候通过new的方式进行使用

    Vue这个构造函数是一个配置项options

    options:

    ​ el：挂载点

    ​ data：当前Vue所需要的一些属性（当前组件所需要的状态）

    ​ methods：存放Vue所需要的事件。如果需要访问data中的属性，则通过this.属性名称即可。在实例化的时候将data和methods中的所有属性和通过代理的方式代理到了Vue的实例上。（实例化对象中凡是以_开头的，默认属于构造函数的内部属性）

    let vm = new Vue({
    el: "#app",
    data: {
        name: "lxc",
        sex: "男",
        age: 18,
        msg: "这是一跳消息"        
    }，
    methods:{
      handle(){
          console.log(1)
      }
  }
})

二、Vue的基础指令

  • V-text

    用来渲染数据和执行一些JS语法

    底层：相当于innerText

    v-text:在加载的时候不会出现{{}}

    {{}}:在加载的时候会出现{{}}

  • v-html

    用来渲染数据和执行一些js语法，可以用来解析HTML标签

    简写：{{}}仅限于vue1.0,但后期被废除了。

  • v-show

    通过display属性控制元素的显示和隐藏

    布尔值 : true代表显示；false代表隐藏

  • v-if

    通过删除和创建元素来控制其显示和隐藏

    布尔值 : true代表显示；false代表隐藏

    v-else-if

    v-else

  • v-if与v-show的区别

    v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。所以，频繁地切换时不适合使用。

    v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

    相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

    一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

    • 使用场景

    v-show : 频繁地切换（选项卡）

    v-if : 登录与非登录，VIP与非VIP用户，权限页面

  • v-for遍历数组、对象、字符串、数字

    语法：v-for=“(值，下标，需要遍历的数据)”

    • v-if与v-for能否一起使用？谁的优先级更高？

    不能一起使用， v-for的优先级更高

  • v-bind绑定属性

    语法：v-bind:属性=”值“

    简写：:属性=“值”

  • v-on绑定事件

    语法：v-on:事件名称=“事件函数”

    简写：@事件名称=”事件函数”

    修饰符：辅助一些事件，可以有多个修饰符

    （ eg:阻止事件冒泡，阻止浏览器的默认事件等）

    语法：@事件名称.修饰符 = “事件函数”

    常见的修饰符：

    常用修饰符 用法
    阻止事件冒泡 .stop调用event.preventDefault()
    阻止浏览器默认行为 .prevent调用event.stopPropagation()
    事件只触发一次 .once
    按下回车 .enter（.13）[4]
    字符串转为数字 .number
    …… ……

    关于事件对象，在不传参时不需要加（）,可以在methods函数里通过e获取；需要传参时，给事件加上（），（）内加上$event和要传递的参数，可以拿到事件对象。

  • v-model双数据绑定

    流程：当输入框的数据发生改变时，会修改data中相对应的数据。当data中的数据发生改变时，视图层也会随之改变。

    使用场景：只能在表单元素中进行使用

    • 模拟v-model实现多选框
    <div id="app">

    <label for="">大娃</label>
    <input type="checkbox" value="大娃" @change="handleChange('大娃')">
    <label for="">二娃</label>
    <input type="checkbox" value="二娃" @change="handleChange('二娃')">
    <label for="">三娃</label>
    <input type="checkbox" value="三娃" @change="handleChange('三娃')">
    <label for="">四娃</label>
    <input type="checkbox" value="四娃" @change="handleChange('四娃')">

    <p v-for="(item,index) in checkVal">{{item}}</p>
</div>

    let vm = new Vue({
    el: "#app",
    data: {
        checkVal: []
    },
    methods: {
        handleChange(value) {
            //includes检测数组中是否包含某一项
            let flag = this.checkVal.includes(value);
            if (flag) {
                let index = this.checkVal.indexOf(value);
                this.checkVal.splice(index, 1);
            } else {
                this.checkVal.push(value)
            }
        }
    }
})

  • v-pre

    将{}正常解析、转义{{}}，跳过大量没有指令的节点会加快编译。

  • v-cloak

    解决Vue.js没有加载进来的时候{{}}会显示的问题

  • v-once

    只渲染一次数据

  • computed计算属性

    通过属性计算而得来的属性

    注意：

    1. computed内部的函数名称可以随意编写
    2. computed内部的函数必须通过return的方式将结果进行返回，最好不要在内部进行赋值操作(见第四点)
    3. 虽然computed内部是以函数的方式进行编写，但是在调用的时候并不是一个函数，所以不需要加（）
    4. 只要函数内部所依然的属性发生了改变，该函数就会自己调用执行。所以尽量不进行赋值操作。eg:this.a = this.a + this.b;会进入死循环。
    5. 如果函数内部所依赖的属性没有发生改变的时候，computed会从缓存中读取结果。

    总结：computed中的方法都是依赖于Vue中data里面的属性，如果属性发生了改变，computed中所对应的函数就会去执行。

    使用场景：当多个属性影响一个属性的时候，我们就需要用到computed(购物车)

三、实例上的属性和方法

​ 关于$on,$emit,$off,$once 已经上一篇文章介绍过了，此处不再赘述

  • vm.$mount：设置外部挂载点

  • vm.$forceUpdata：强制更新（尽量不使用）

    凡是在data中写的属性，默认会添加两个方法，分别是getter（）和setter（），主要用于做数据劫持。

  • vm.$nextTick：获取数据更新后最新的DOM结构

    this.$nextTick是一个异步函数。底层用到了MutationObserver或者是setTimeout(fn,0)。其实把this.$nextTick替换成setTimeout(fn,20)也是可以的（20ms是一个经验值，每一个Tick约为16.66ms），对用户体验而言是无感知的。

    this.$nextTick(()=>{
    console.log(document.getElementsByTagName("span")[0].offsetWidth)
})
setTimeout(()=>{
    console.log(document.getElementsByTagName("span")[0].offsetWidth)
},10)

  • vm.$destroy：卸载、断开与Vue之间的练习

  • watch:属性监听

    监听data中属性的变化，当发生改变时，watch中对应的函数就会执行。

    注意：

    1. watch中的函数名，必须是所依赖data中的属性名

    2. watch中的函数会有两个参数，一个是新值，一个是旧值。

    3. watch默认情况下只会监听对象地址的改变，无法监听值的改变，除非进行深度监听，需要配置handler函数以及deeg为true。

    4. watch第一次不会去监听（computed），如要监听，需设置immediate:true;

    5. watch在特殊情况下，无法监听到数组的变化

      • 通过下标来更改数组中的数据
      • 测过length来改变数组的长度

      解决方案：通过Vue实例方法$set进行设置。

      ​ 通过splice来清空数组

  • $set的基本使用

    给一个响应式添加一个响应式属性，或者给响应式设置属性。

    语法：$set(object , key / index , value);

  • $delete基本使用

    删除响应式对象[5]的某一个值

    语法：$delete(object , key / index)

  1. Model:数据层 View:视图层 Controller:业务逻辑层 ↩

  2. 1.虚拟DOM就是真实的JS对象 2. 操作内存中的JS对象远比操作真实的DOM结构速度更快 ↩

  3. 1.链式操作DOM（耗费性能）; 2. 抹平了各个浏览器之间的差异 ↩

  4. .13是回车键的键盘码 ↩

  5. 具有getter()和setter()方法 ↩

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • [Vue.js进阶]从源码角度剖析Vue的生命周期
    前言 使用Vue在日常开发中会频繁接触和使用生命周期,在官方文档中是这么解释生命周期的: 每个 Vue 实例在被创...
    心_c2a2阅读 2,313评论 1赞 8
  • js基础（7）
    33、JS中的本地存储 把一些信息存储在当前浏览器指定域下的某一个地方（存储到物理硬盘中）1、不能跨浏览器传输：在...
    萌妹撒阅读 2,157评论 0赞 2
  • Vue.js学习笔记-进阶部分+完整实现代码
    深入响应式 追踪变化： 把普通js对象传给Vue实例的data选项，Vue将使用Object.defineProp...
    冥冥2017阅读 4,913评论 6赞 16
  • 再读 Vue.js 文档
    主要还是自己看的，所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/，类似于 vie...
    Leonzai阅读 3,427评论 0赞 25
  • Vue的特性精华
    以下内容是我在学习和研究Vue时，对Vue的特性、重点和注意事项的提取、精练和总结，可以做为Vue特性的字典； 1...
    科研者阅读 14,178评论 3赞 24