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实现多选框



    大娃
    
    二娃
    
    三娃
    
    四娃
    

    {{item}}

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)

Model:数据层 View:视图层 Controller:业务逻辑层 ↩
1.虚拟DOM就是真实的JS对象 2. 操作内存中的JS对象远比操作真实的DOM结构速度更快 ↩
1.链式操作DOM（耗费性能）; 2. 抹平了各个浏览器之间的差异 ↩
.13是回车键的键盘码 ↩
具有getter()和setter()方法 ↩

Vue的基础入门

Vue的基础入门

一、Vue的基础入门

二、Vue的基础指令

三、实例上的属性和方法

你可能感兴趣的:(Vue的基础入门)