Vue01

vue

• vue基础

• vue-cli

• vue-router

• vuex

• element-ui

• vue3

vue基础

vue是什么

一套用于构建用户界面的渐进式JavaScript框架

1. 采用组件化模式，提高diamagnetic复用率，让代码更好维护

2. 声明式编码，让编码人员无需直接操作DOM，提高开发效率

• 去vue官网下载开发版本，然后在html文件中引入

  // 这是在头部引入

细节：

• root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法

• vue实例和容器时一一对应的

• 真实开发中只有一个Vue实例，并且会配合组件一起使用

• {{xxx}} 中xxx要写js表达式，且xxx可以自动读取到data中的所有属性

• 一旦data中的数据发生改变，那么模板中的数据也会改变

模板语法

• 插值语法

• 指令语法

  插值语法，{{name}}

  ---

  指令语法

  我是一个链接

  注：v-bind: -----> :(简写)

• 插值语法

  • 功能：用于解析标签体内容

  • 写法{{xxx}}

• 指令语法

  • 功能：用于解析标签（标签属性，标签体内容，绑定事件）

  • 有很多很多的指令语法（此处只是拿v-bind举例子）

    new Vue({
    el:“#root”,
    data:{
    name:‘jack’,
    school:{
    name:‘a’,
    url:‘xxxxx’,
    }
    }
    })

    //这里可以

数据绑定

    单向数据绑定：

    双向数据绑定：

• v-bind:数据只能从date流向页面

• v-model:

  • 双向绑定一般应用在表单类元素上（input，select）

  • v-model:value 可以简写成 v-model，因为v-model 默认收集的就是value值

    //简写后的代码

    单向数据绑定：
    双向数据绑定：
    

el于data的两种写法

//$符是给程序员用的
//这种方式写的更灵活




//data的两种写法，对象式，函数式
//简写
data(){
        return{  name:'好人'
   }
}

总结：

• el的两种写法

  • new Vue时候配置el属性

  • 先创建Vue实例，随后再通过v.$mount(‘root’)指定el的值

• data的两种写法

  • 对象式

  • 函数时

• 由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

MVVM模型

数据代理

Object.defineproperty

//enumerable是配置是否可以枚举，默认是不可以
//writable配置属性能不能修改，默认是不能
//configurable配置属性能不能删除，默认是不能
//当有人读取person的age值时，会先走getter
//可以简写为get(){...}
//当有人修改person的age值时，stter就会被调用，且会收到修改的具体值
//若要真正修改age属性，需要修改number的值

数据代理：通过一个对象代理对另一个对象中属性的操作（读/写）

let obj = {x:100}
let obj2 = {y:200}


Object.defineProperty(obj2,'x',{
    get(){
        return obj.x
    }
    set(value){
        obj.x = value
    }
})

右边的两条线用了数据代理，这里也解释了，为什么在界面里改了数据，但是源码里的数据没有改变

• Vue中的数据代理：

  • 通过vm对象来代理data对象中属性的操作（读/写）

• Vue中数据代理的好处

  • 更加方便的操作data中的数据

• 基本原理

  • 通过Object.defineProperty()把data对象中所有属性添加到vm上，为每一个添加到vm上的属性，都指定一个getter/setter，在这两个函数内部去读/写data中对应的属性

事件处理

    

        点我
        点我
    

• 事件的基本使用

  • 使用v-on:xxx 或 @xxx绑定使劲按，其中xxx是事件名

  • 事件的回调需要配置在methods对象中，最终会在vm上

  • methods中的配置函数，不需要用箭头函数！否者this就不是vm

  • methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例

  • @click=“demo” 和 @click="demp($event)"效果是一致的，但后者可以传参

事件修饰符

事件冒泡：即多个组件嵌套，触发内层组件时，会一一触发外层事件

事件捕获：由外向内

事件冒泡：由内向外

• Vue中的事件修饰符

  • prevent:阻止默认事件

  • stop：阻止事件冒泡

  • once：事件只触发一次

    点我

键盘事件

• Vue提供常见的按键别名

  • 回车 => enter

  • 删除=> delete

  • 退出=> esc

  • 空格=> space

  • 换行=> tab

  • 上 => up

  • 下 => down

  • 左 => left

  • 右 => right

注：ctrl,alt,shift,meta 特殊。配合keydown能正常使用，因为这是系统修饰键

注：修饰符可以连续写

计算属性

属性：在Vue里，默认data里的数据是属性

计算属性：通过对属性的操作获得一个全新的属性

{{fullname}}


....



new Vue({
    el:'#root',
    data:{
        firstname:'张',
        lastname:'三'
    },
    computed:{
        fullname:{
            get(){
                //这里的this是vm
                return this.firstname + '-' + this.lasname
            },
            set(value){
               const arr = value.split('-')
                this.firstname = arr[0]
                this.lastname = arr[1]
            }
        }
    }
})


//get调用的时机
//1，当人第一次读fullname时，get就会被调用
//2，所依赖的数据发生变化时，get会被调用

//set调用的时机
//1，当fullname被修改时

计算属性，相对于methods的优势是，有缓存机制。

计算属性：

• 定义：要用的属性不存在，要通过已有属性计算得来

• 原理：底层借助了Object.defineproperty方法提供的getter 和setter

• get函数什么时候执行

  • 初次读取时会执行一次

  • 当依赖的数据发生改变时会被再次调用

• 优势：于methods实现相比，内部有缓存机制（复用），效率更高，调试方便

• 备注：

  • 计算属性最终会出现在vm上，直接读取使用即可

  • 如果计算属性要被修改，那么必须写set函数去相应修改，且set中哟啊硬气计算时依赖的数据发生改变

计算属性的简写 computed:{ fullname(){ … } } //这里的computed是vue的一个配置对象

监视属性

watch:{
    ishot:{
        immediate:true,//初始化时让handler调用一下
        handler(newValue,oldValue{
            //这里可以对新旧数据进行一个对比，然后进行后续的逻辑处理
        }
    }
}


vue实例创建好后

vm.$watch('ishot',{
  immediate:true,//初始化时让handler调用一下
        handler(newValue,oldValue{
            //这里可以对新旧数据进行一个对比，然后进行后续的逻辑处理
        }

})

• 监视属性

  • 当被监视属性变化是，回调函数自动调用，进行相关操作

  • 监视的属性必须存在，才能进行监视

  • 监视的两种方法

    • new vue时传入watch配置

    • 通过vm.$watch监视

深度监视

• 监视多级结构中某个属性的变化

• 监视多级结构中所有的属性变化

• 深度监视

  • Vue中的watch默认不监测对象内部值的改变（一层）

  • 配置deep:true 可以监测对象内部值的改变（多层）

  • Vue自身可以监测对象内部值的改变，但Vue提供的watch默认不可以

  • 使用watch时根据数据的具体结构，决定是否采用深度监视

当配置项里只有handler时，可以简写 watch:{ isHot:{ immediate:true, deep:true, handler(newValue,oldValue){ console.log(“ishot被修改了”,newValue,oldValue) } } } //简写 watch:{ isHot(newValue,oldValue){ onsole.log(“ishot被修改了”,newValue,oldValue) } }

computed和watch之间的区别

• computed能完成的功能，watch都可以完成

• watch能完成的功能，computed不一定能完成，例如：watch可以进行异步操作

两个重要原则

• 所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm 或 组件实例对象

• 所有不被Vue所管理的函数（定时器的回调函数，ajax的回调函数，promise的回调函数），最好写成箭头函数，这样this的指向才是vm 或 组件实例对象