vue2,vue指令和选项

  • vue2,vue指令和选项已关闭评论
  • 112 次浏览
  • A+
所属分类:Web前端
摘要

文本类指令: 动态属性指令: v-bing:用于动态绑定节点的属性(比如:title ,value,style等)


vue特点

  • mvvm框架
  • 响应式(声明式)
  • 组件化(支持自定义组件)
  • 丰富的指令(Dom功能的抽象)
  • 基于选项(template,data,computed,watch,methods)
  • vue文档集中ue
  • Vue生态丰富且简单
  • 渐进式()

Veu和Dom开发思想

  • Dom开发思想:当我们需要在交互事件中改变视图时,使用DOM选择器选中目标节点、再使用DOM方法直接改变视图。
  • Vue开发思想:当我们需要在交互事件中改变视图时,先在data选项中声明一个合适的变量,再在交互事件中改变这个声明式变量即可,视图自动更新,这是一种间接的操作。

常用的Vue指令有哪些

文本类指令:

  • {{}}文本插值:用于绑定节点的文本。{{}}这种绑定值的方式会出现一闪而过的效果,使用v-cloak来解决。
  • v-text:用于绑定节点的文本,大多数的时候,可以和{{}}替换。
  • v-once:用于指定节点的动态内容只绑定一次,当前节点中所对应的变量发生变化时视图不更新。一般情况下,v-once只能和{{}}一起用。
  • v-once和v-cloak:都是不需要接受表达式来做为‘值’。
  • v-html:用于动态绑定的html节点,相当于DOM中的innerHTML,这个指令默认已经做了“防xss攻击”的处理。

动态属性指令:

v-bing:用于动态绑定节点的属性(比如:title ,value,style等)

事件绑定指令:

v-on:用于给视图节点绑定各种js事件(比如:click,keyup等)

v-on简写@  

基本语法: <div @事件名.事件修饰符='事件处理'></div> 

 v-on事件修饰符:.stop阻止事件冒泡,.prevent阻止默认事件,.enter绑定键盘Enter键盘。

表单绑定指令:

v-model:用于表单取值(表单双向绑定)  比如:input,select

基本语法:<input style="text" v-model.表单修饰符='变量'> 

v-model修饰符:.trim自动去除首尾空格  .number隐式类型转换  .lazy用于性能,当表单失去焦点时再进行双向绑定。

列表渲染:

v-for:用于渲染列表,对象,Number变量等。

渲染列表语法: <div v-for='(item,index) in array'></div> 

渲染对象语法: <div v-for='(value,key,index) in obj'></div> 

渲染Number变量语法: <div v-for='(num, index) in 5'></div> 

条件渲染:

v-show:用于显示或隐藏视图节点,使用display:block / display:none 来实现的。

v-if,v-else-if,v-else:用于显示或隐藏视图节点,真正的移除或插入视图节点。

v-show和v-if的区别

v-if是节点的插入或移除,比较耗费性能;v-show只是通过样式来实现显示与隐藏,性能消耗低。

注意:不建议v-if和v-for一起使用;如果一定要一起使用,在vue2中v-for优先级更好。

其它指令

v-pre:用于调试,可以阻止vue编译器对指令的编译

v-slot:插槽

自定义指令

在vue开发中,除了可以使用这些内置指令外,我们还可以使用Vue.directive() 或directives选项来自定义指令。

声明式变量的特点

当声明式变量时,它所对应的视图节点自动更新。

 vue选项


        const app = new Vue({
            el:'#app',
            data:{

            },
            methods:{

            },
            computed:{

            },
        })

 

  •  el:把vue组件(响应式系统)挂载到真实DOM
  • data:专门用于定义声明式变量的
  • methods:是专门用于定义函数方法的地方
  • computed(计算属性):
  • watch:侦听器(监听器)

computed

语法:在computed选项中,定义计算属性方法,在方法体使用声明式变量进行若干计算。
使用:在视图模板中把计算属性直接当作变量直接使用,在vue逻辑代码使用this访问计算属性,默认只有get功能。
计算属性可以绑定在v-model上。
 

computed作用:

  1. 当指令的表达式比较复杂时,我们建议使用计算属性来优化,提升视图模板中代码的可阅读性、可维护性。

  2. 用于缓存一个复杂的运算,避免组件更新时产生没有必要的性能损耗。计算属性本质上是一个函数,Vue会分析函数体中使用到了哪些声明式变量,有且仅有这些声明式变量发生变化时,计算属性才会重新执行。

在Vue中,计算属性能计算哪些性质的变量

data,vuex数据,$route,计算一切__ob__的数据。

如何让计算属性同时支持get/set功能

计算属性默认是一个函数,表示get功能。为了支持set,要把计算属性写对象结构 {get, set}
const app = new Vue({    el:'#app',    computed:{         he:{             get(){

       },
set(){

       }, }, }, })

watch

作用:用于监听一个变量的变化,然后去做另一件事儿。

特点:当侦听器监听引用数据类型时,默认只能监听引用数据类型的第一层。

监听深度越深,Vue在背后要做的事儿越多,这是一种性能损耗,所以一般不要对一个引用类型的变量进行深度监听。

如何监听引用数据类型的每一层(深度监听)

 const app = new Vue({

    el:'#app',     watch:{         info:{            deep:true,        handler(newInfo,oldInfo){
        const.log(this.info)
      } },
    //推荐写法
     
'info.child.age' (newAge, oldAge) {
            console.log('---age变了', newAge, oldAge)
          },

    }, })

在Vue中,侦听器能够监听哪些性质的变量变化
能够监听data、计算属性、vuex数据、$route等,凡是那些带有__ob__变量都能被监听到