vue2,vue指令和选项

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-bind：用于动态绑定节点的属性（比如：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. 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__变量都能被监听到