vue常用指令

vue.js官方给自己的定为是数据模板引擎，并给出了一套渲染数据的指令。

Vue.js 使用了基于 HTML 的模板语法，最简单的使用vue的方式是渲染数据，渲染数据最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值。

一、Vue常用指令：

v-html

双大括号语法无法渲染HTML标签，我们需要使用v-html。

v-text

类似双大括号语法渲染数据的另一种方式是使用v-text。

v-for

接下来，我们看看数组和对象的渲染方式

v-if/-else-if/-else

渲染数据的时候，同样也可以使用条件判断，我们来看看。

v-show

通过上面的代码我们可以看出，v-if的作用是控制标签的显示，它通过判断添加标签，底层采用的是appendChild来实现的，下面我们来看一个同样也是控制标签显示的另一个指令v-show。

与v-if不同的是，v-show通过样式的display控制标签的显示。

 

我们简单比较一下二者的区别：

实现方式：v-if底层采用的是appendChild来实现的，v-show通过样式的display控制标签的显示，正因为实现方式上面有差异，导致了他们的加载速度方面产生了差异；

加载性能：v-if加载速度更快，v-show加载速度慢

切换开销：v-if切换开销大，v-show切换开销小

v-if是惰性的，它是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建，v-show 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if有更高的切换开销，而v-show有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用v-show较好，如果在运行时条件很少改变，则使用v-if较好。

v-bind

绑定属性，不多说了，注意冒号后面跟标签的属性，属性后面的等号指向数据，它可以简写为 :class, :href。

v-on

另一个非常重要的指令是v-on，使用v-on我们可以在标签上面绑定事件，注意我们新建的vue实例app01中多了一个属性，methods，在methods中，是我们具体事件的实现方式。

v-model

上面演示的是通过vue实例将数据渲染进模板，并且在控制台，我们修改数据之后，修改后的数据能够及时（官方称之为响应式）的渲染到模板层，

那么，如果有这样的需求，比如有一个input标签，当用户修改渲染的原始数据后，打印修改后的数据，

简单说，我们需要vue实例可以帮我们渲染数据并响应式的监听数据修改，同时我们还需要监听用户行为，

如果用户在标签上面修改了数据（之前的修改，指的是通过vue实例app01进行的数据修改），我们需要获取到数据，针对这个需求，我们可以使用v-mode指令。

 

二、指令修饰符：.number

 

 用户可以输入任何数据类型，但有时候，我们需要限定用户输入的数据类型，可以在指令后面加上number修饰符。

<td>Python基础</td>
<td><input type="text" v-model.number="python"/></td>

三、计算属性：methods

计算属性用来监听多个数据，每次页面加载，计算属性中的函数立即执行，但是只要原数据不被修改，那么，就不会触发重新计算，

计算属性会使用计算后的缓存结果，只当原数据修改时，才会重新计算并将结果缓存起来。计算属性的计算结果可以当做data中的数据一样使用。

            computed: {
                sumScore: function () {
                    return this.python + this.web + this.django;
                },
                avgScore: function () {
                    return this.sumScore/3;
                }
            }

计算属性放在缓存当中，只有数据修改时才重新计算

计算属性是通过过滤多个数据之后的结果，不一定是data中已存在的数据。

四、侦听属性：watch

计算属性用来监听多个属性，我们也可以使用它来监听一个属性，但是页面加载即执行计算并不符合我们的需求，如何只在数据被修改后出发相应事件，vue提供给我们的是watch，即侦听属性。

侦听属性必须是data中的已存在的数据。

进行深层侦听：deep:true　　、对数据进行首次监听：immediate:true

 watch: {
        firstName: function (value) {
          console.log(value);
          this.fullName = value + ' ' + this.lastName
        },
        lastName: function (value) {
          console.log(value);
          this.fullName = this.firstName + ' ' + value
          // 监听函数
          handler:function(n,o){
              console.log(n,o)
            },
          // 可以对数据进行首次监听,注意监听函数只有一个参数就是老值
          immediate:true
        }
      }

**计算属性与侦听属性的区别：

五、自定义指令：

遇到一些复杂的需求，vue提供的指令不能完美的处理，有时候我们需要自定义指令，针对这一需求，vue提供了自定义指令，

el是我们自定义指令所在的DOM元素；

bindding是自定义指令的一些具体数据，请记住，最重要的一点是，不管是现在还是将来，任何情况下，我们都需要根据数据进行业务处理，所以，此处最关键的也是数据，即bindding.value。

六、获取DOM元素：ref与refs

某些情况下，我们需要直接获取DOM元素，并对元素进行一些加工处理。vue提供给我们$refs来获取DOM元素

在DOM元素上面绑定了ref之后，vue根实例上面就会出现$refs变量，它是一个object类型，key为ref后面的自定义名称，

而value为DOM元素。我们通过this.$refs拿到object，之后就可以通过自定义的key名，来找到DOM元素

 this.$refs:对象包含了具有ref属性的节点的集合

ref：被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的$refs对象上。

如果在普通的DOM元素上使用，那么指向的就是普通的DOM元素。
普通的DOM元素上使用

<div id="app7">
    <aaa ref=inputText></aaa>
    <input type="text"ref="TEXT" >
    <button @click="add">添加</button>
</div>
Vue.component('aaa',{
        template:"<div>我是一个组件</div>"
    })
    var app7=new Vue({
        el:"#app7",
        data:{

        },
        methods:{
            add:function(){
               console.log(this.$refs.inputText);
               console.log(this.$refs);
            }
        }
    })
    var aaa=app7.$refs.inputText;
    //console.log(aaa);
    //console.log(aaa.$el.innerText);

 

$refs:一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例
注意：$refs只会在组件渲染完成之后生效，并且它们不是响应式的。

这只意味着一个直接的子组件封装的“逃生舱”——你应该避免在模板或计算属性中访问 $refs

 

拜拜啊~~

 

早睡早起，谨防秃头