vue学习笔记(学习中)

目录

vue简介:

   特点:

  vue安装:

1、初识vue:

2、vue模板语法:

3、vue数据绑定:

4、el和data的两种写法:

   5、MVVM模型

6、数据代理

7、事件处理:

 7.1 事件的基本使用:

 7.2 vue中常用的事件修饰符:<修饰符可以连用>

7.3 键盘事件:

8、计算属性computed:  

8.1 姓名案例:

8.1.1 以计算属性实现:

8.1.2 以methods的形式实现:

8.1.3 以插值语法的方式实现:

9、监视属性watch(侦听函数):

  9.1 深度监视:

9.2简写

9.3 watch与computed的对比:

10、绑定样式

      10.1 class样式

      10. 2 style样式(不常用)

11、条件渲染

  11.1 v-if

      11.2 v-show

12、列表渲染

 12.1.1  基本列表:          

*12.1.2  key的基本原理


vue简介:

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

   特点:

1、采用组件化模式,提高代码复用率,让代码更好维护

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

3、使用虚拟DOM+优秀的Diff算法,尽量复用DOM节点

   遵循MVVM模式

   编码简洁,体积小,运行效率高,适合移动/pc端开发

    本身只关注UI,也可以引入其他第三方库开发项目

  vue安装:

  vue官网

  vue开发者工具

  提取码:1111

1、初识vue:

        1、想让vue工作,必须先创建一个vue实例,且要传入一个配置对象

        2、root容器里的代码依然符合HTML规范,只不过混入一些特殊的vue语法( 双括号{{ }} );

        3、root容器里的代码被称为【vue模板】;

        4、vue实例和组件是一一对应的;

        5、真实开发中只有一个vue实例,并且会配合着组件一起使用;

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

        7、一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新;

              注意区分:js表达式 和 js代码(语句)

                       1、表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:

  1. a
  2. a+b
  3. demo(1)
  4. x===y ?'a' : 'b'

                       2、js代码(语句):

  1. if(){}
  2. for(){}

2、vue模板语法:

1、插值语法:

             功能:用于解析标签体内容

             写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。

2、指令语法:

             功能:用于解析标签(包括:标签属性,标签体内容,绑定事件等等)。

             举例:v-bind:href=“xxx”  或 简写为  :href:“xxx”,xxx同样要写js表达式,且可以直接读取到data中所有的属性。

              vue中有很多指令,且形式都是v-???,vue实例中出现重名时可进行分级处理

3、vue数据绑定:

   vue中有两种数据绑定方式

         1、单向绑定(v-bind):数据只能从data流向页面

         2、双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data。

   备注:

         1、双向绑定一般都应用在表单元素上(如:input、select等)

         2、v-model:value可以简写成v-model,v-model默认收集的就是value值

4、el和data的两种写法:

1、el的两种写法:

  1.  new Vue时候配置el属性
  2.  先创建vue实例,随后再通过v.$mount('#root')指定el的值

 2、data的两种写法:

  1.   对象式
  2.   函数式 

     如何选择:用到组件时,data必须使用函数式,否则会报错。

 3、原则:

     由vue管理的函数,一定不要写箭头函数,一但写了箭头函数,this所指的就不再是vue实例而是window

   5、MVVM模型

            1、M:模型(MObel):data中的数据

            2、V:视图(view):模板代码

            3、VM:视图模型(viewMobel):vue实例

        发现:

            1、data中的所有属性,最后都出现在了vm身上

            2、vm身上所有的属性及vue原型上所有的属性,在vue模板中都可以直接使用

6、数据代理

  1、vue中的数据代理:

            通过vm对象来代理data对象中属性的操作(读/写)

        2、vue中数据代理的好处:

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

        3、基本原理:

             通过Object.defineProperty()把data对象中所有属性添加到vm上。

             为每一个提娜佳到vm上的属性,都指定一个getter和setter。

             在getter和setter内部去操作(读/写)data中对应的属性

7、事件处理:

 7.1 事件的基本使用:

       1、使用v-on:xxx 或@xxx绑定事件,其中xxx是事件名

       2、事件的回调需要配置在methods对象中,最终会在vm中

       3、methods中配置的函数,不要用箭头函数,否则this就不是vm了

       4、methods中配置的函数,都是被vue所管理的函数,this的指向是vm 或 组件实例对象

       5、@click='demo' 和 @click="demo($event)"效果一致,但后者可以传参

 7.2 vue中常用的事件修饰符:<修饰符可以连用>

        1、prevent:阻止默认事件

        2、stop:阻止事件冒泡

        3、once:事件只触发一次

        4、capture:使用事件的捕获模式

        5、self:只有event、target是当前操作的元素时才触发事件

        6、passive:事件的默认行为立即执行,无需等待回调执行完毕

7.3 键盘事件:

 1、vue中常用的按键别名:

           回车:enter

           删除:delete(捕获删除和退格键)

           推出:esc

           空格:space

           换行:tab(特殊,必须配合keydown使用)

           上:up

           下:down

           左:left

           右:right

    2、vue未提供别名的按键,可以使用按键原始的key值去绑定,但注意要转为kebab-case(短横线命名)

    3、系统修饰符(用法特殊):ctrl、alt、shift、meta

         (1)配合keyup使用:按下修饰符的同时,再按下其他键,随后释放其他键,事件才触发

         (2)配合keydown使用:正常触发事件

     4、也可以使用keyCode去指定具体的按键(不推荐)

     5、vue.config.keyCodes.自定义键名 = 键码,可以去定制按键别名

8、计算属性computed:  

 1、定义:要用的属性不存在,要通过已有属性计算得来

        2、原理:底层接住了Object.defindproperty方法提供的getter和setter

        3、get函数什么时候执行:

            (1)初次读取时会执行一次

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

        4、优势:与methods实现相比,内部有缓存机制,效率更高,调试方便

        5、备注:

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

            2.如果计算属性要被修改,那必须写set函数去响应修改,且set中要引起计算时依赖的数据发生变化

8.1 姓名案例:
8.1.1 以计算属性实现:

当只有读取要求时可简写:

8.1.2 以methods的形式实现:

8.1.3 以插值语法的方式实现:

9、监视属性watch(侦听函数):

1、当被监视的属性变化时,回调函数自动调用,进行相关操作

       2、监视的属性必须存在,才能进行监视

       3、监视的两种写法:

           (1)new Vue 时传入watch配置

           (2)通过vm.$watch监视

  9.1 深度监视:

        1、vue中的watch默认不监视对象内部值的改变(一层)

        2、配置deep:true可以监视对象内部值的改变(多层)

    备注:

        1、vue自身可以监测对象内部值的改变,但vue提供的watch默认不可以

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

 

9.2简写

 当无需immediate 和 deep时可简写

vm.$形式简写:

9.3 watch与computed的对比:

computed和watch之间的区别:

        1、computed能完成的功能,watch都能完成

        2、watch能完成的功能,computed不一定能完成,例如watch可以进行异步操作

    两个重要小原则:

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

        2、所有不被vue所管理的函数(定时器的回调函数、ajax的回调函数等),最好写成箭头函数

           这样this的指向才是vm或组件实例对象

10、绑定样式

      10.1 class样式

            写法:class='xxx' xxx可以是字符串、对象、数组

                  字符串写法适用于:类名不确定,需要动态获取

                  对象写法适用于:要绑定多个样式,个数不确定,名字也不确定

                  数组写法适用于:要绑定多个样式,个数确定,名字也确定,但不确定用不用

      10. 2 style样式(不常用)

            :style="{fontSize:xxx}"其中xxx是动态值

            :style="[a,b]"其中a、b是样式对象          

11、条件渲染

  11.1 v-if

           写法:

              (1)v-if='表达式'

              (2)v-else-if='表达式'

              (3)v-else='表达式'

            适用于:切换频率较低的场景

            特点:不展示DOM元素直接被移除

            注意:v-if可以和v-else-if、v-else一起使用,但要求结构不能被打断

template:内容模板,将内容包裹起来,与div作用相似,但自身在加载过程中不会被渲染(此处只可和v-if使用)

      11.2 v-show

            写法:v-show="表达式"

            适用于:切换频率较高的场景

            特点:不展示的DOM元素未被移除,仅仅是使用样式隐藏掉

       3.备注:使用v-if时,元素可能无法获取到,而是用v-show一定可以获取到

12、列表渲染

 12.1.1  基本列表:          

 v-for指令:

        1、用于展示列表数据

        2、语法:v-for='(item,index) in(of)  xxx' :key='yyy(index)'   key值唯一

        3、可遍历:数组、对象、字符串(使用较少)、指定次数(使用较少)

*12.1.2  key的基本原理

 面试题:react、vue中的key有什么作用?(key的内部原理)

      1、虚拟DOM中key的作用:

             key是虚拟DOM对象的标识,当状态中的数据发生变化时,vue会根据【新数据】生成【新的虚拟DOM】,

             随后vue进行【新虚拟DOM】和【旧虚拟DOM】的差异比较,比较规则如下:

     

      2、对比规则:

        (1)旧虚拟DOM中找到了与新虚拟DOM相同的key:

                <1>若虚拟DOM中的内容未变,直接使用之前的真实DOM

                <2>若虚拟DOM中的内容改变,则生成新的真实DOM,随后替换掉页面中之前的真实DOM

       

        (2)旧虚拟DOM中未找到与新虚拟DOM相同的key:        

                 创建新的真实DOM,随后渲染到页面    

                 

      3、用index作为key可能会引发的问题:

            (1)若对数据进行:逆序添加、逆序删除等破坏顺序的操作

                 会产生没有必要的真实DOM更新 ==> 界面效果无误,但效率低

            (2)如果结构中还包括输入类的DOM:

                  会产生错误DOM的更新导致界面出现问题  

      4、开发中如何选择使用key?

           1、最好使用每条数据的唯一标识作为key

           2、如果不存在对数据的逆序添加、逆序删除等破坏顺序的操作,仅用于渲染列表用于展示

              可以使用index作为key。

13、vue监视数据的原理:

       1.vue会监视data中的所有层次的数据

       2.如何监测对象中的数据?

            通过setter实现监视,且要在new vue时就传入要监测的数据

             (1)对象中后追加的属性,vue默认不做响应式处理

             (2)如需要后添加的属性做响应式,请使用如下API:

                  Vue.set(target.propertyName/index, value)或

                  vm.$set(target.propertyName/index, value)

       

       3.如何监测数组中的数据?

            通过包裹数组更新元素的方法实现,本质就是做了两件事:

             (1)调用原生对应的方法对数组进行更新

             (2).重新解析模板,进而更新页面

       4.在vue修改数组中的某一个元素要用如下方法:

             1.使用这些API:push(),pop(),shift(),unshift(),splice(),sort(),reverse()

             2.Vue.set() 或 vm.$set()

             特别注意Vue.set() 或 vm.$set() 不能给vm或vm的根数据对象添加属性

14、收集表单数据

            若:input  type='text',则v-model收集的是value值,用户输入的就是value值

            若:input  type='radio',则v-model收集的是value值,且要给标签配置value值

            若:input  type='checkbox'

               1、没有配置input的value属性,那么收集的就是checked(勾选 or 未勾选,是布尔值)

               2、配置input的value属性:

                   (1)v-model的初始值是非数组,那么收集的就是checked(勾选 or 未勾选,是布尔值)

                   (2)v-model的初始值是数组,那么收集的就是value组成的数组

            备注:v-model的三个修饰符:

                     lazy:失去焦点再收集数据

                     number:输入字符串转为有效数字

                     trim:输入首尾空格过渡

  • 21
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值