vue常用指令及事件

v-text ：更新文本内容

_____________________________________________________________________________________________________

<div id="ele">
    <p v-text="mes"></p>
</div>
    <script>
        var vm =  new Vue({
            el:"#ele",
            data:{
                mes:"lxc"
            }
        })
    </script>

等于 {{}}  ，v-text可以防止{{}}出现在页面上。

取值：<div id="div" v-text="msg"></div>

 

v-once:只绑定一次，当数据再次发生变化，也不会导致页面刷新

_____________________________________________________________________________________________________

赋值：<div id="div" v-once>{{}}</div>

 

v-html：把html当做html渲染

_____________________________________________________________________________________________________

赋值：<div id="div" v-html="paramValue"></div>

 

 

v-model:双向数据绑定（input），数据变化，视图跟着变，视图变化数据也发生变化 。。。

_____________________________________________________________________________________________________

修饰符：.lazy  与change事件一样

              .number  将输入框的值转化为数字，当text="number"时，输入框中的数字是字符串形式的，所以加上.number可将字符串转化为数字 

              .trim 自动过滤的首尾空白字符串

 

 

响应式的变化：

_____________________________________________________________________________________________________

    vue会循环data中的数据，（数据劫持），也就是说会拦截data中的数据，给数据依次加上getter和setter,这样实现了响应式的变化。

1、当定义在data里边的数据是对象时，一定要先初始化对象中的数据(也就是设置默认值)，否则动态添加的数据响应式无效。。。

eg：

<p>{{ obj.name }}</p>
<script>
  var vm = new Vue({
    el: "#ele",
    data: {
      obj:{

      }
    }
  });

  vm.obj.name = "lxc"//动态添加的对象属性，视图层无反应
</script>

var vm = new Vue({
  el: "#ele",
  data: {
    obj:{
      name:""//给对象添加默认值，实现数据响应式
  }
});

2、如果不设置默认值，非要动态添加，vue中也给到了方法

        $set(obj,propertyName,value):此方法可以给对象添加响应式的数据变化

            obj: 哪一个对象

            propertyName: 要添加的属性

            value: 要添加的属性值

eg：

var vm = new Vue({
  el: "#ele",
  data: {
  obj:{}
  }
});
vm.$set(vm.obj,"name","lxc")//实现动态数据响应式

对于数组动态添加：

var vm = new Vue({
  el: "#ele",
  data: {
  arr:[]
  }
});
// 方法一：vm.$set 源码中是调用的splice方法
vm.$set(vm.arr, index, newValue) // 可触发页面更新
// 方法二：
// 在vue源码中，会对数组变异方法进行拦截，对push、unshift、splice方法添加的数据判断，进行响应式处理
vm.arr.splice(index, 1, newValue) // 可触发页面更新

 

 

3、data中已有的数据对象，动态添加多个数据，需要使用Object.assign( )

eg :  源对象要与一起混合进去的对象组成一个新对象

var vm = new Vue({
el: "#ele",
data: {
  obj:{

  }
}
});
vm.obj =  Object.assign({},vm.obj,{name:'lxc',address:'yt'})//实现动态数据响应式

 

4、data中的数据如果是数组，实现响应式变化，改变数组的某一项或改变数组的长度实现不了响应式变化！！！

可用改变数组的（变异方法）方法实现数据响应式：

如：改变原数组的方法——pop（）    push（）   shift（）    unshift（）   splice（）     reverse（）     sort（）

eg:    

var vm = new Vue({
el: "#ele",
data: {
  arr:[1,2,3,4]
}
});
vm.arr = vm.arr.reverse()//倒序数组
vm.arr = vm.arr.map(ele=>ele*2)//数组每一项乘2
// 上边这些写法都可以实现响应式变化

 

数据渲染：

_____________________________________________________________________________________________________

数组：

v-for=" （item,index) in items "：在迭代的元素上添加v-for指令;

     item:数组的每一项，是一个变量

     index : 数组每一项对应的索引，可以当做key值使用， 但官方不推荐

     items：要遍历的源数据数组

<ul id="ele">
  <li v-for="(items,index) in arr" :keys="index">{{items.name}},年龄是: {{items.age}}</li>
</ul>

<script>
    var vm = new Vue({
      el: "#ele",
      data: {
        arr:[
          {name:"l",age:20},
          {name:"x",age:22},
          {name:"c",age:24}
        ]
      }
    });
</script>

显示结果：

数据发生变化的时候，官方解释，v-for默认行为不会去改变整体，而是替换元素，所以需要提供一个key的属特殊性，也就是说在遍历的时候会给每一个元素绑定唯一的key值，以便跟踪每个节点的身份。。。

对象：

v-for=" ( value,name,index ) in obj "也可以遍历对象，

     value : 对象的属性值

     name：对象属性

     index：每个元素对应的索引

eg：

<ul id="ele">
  <li v-for="(value,name,index) in obj" :key="index">{{value}}——{{name}}——{{index}}    
  </li>
</ul>
<script>
    var vm = new Vue({
      el: "#ele",
      data: {
        obj:{name:"lxc",age:20,height:"180"}
      }
    });
</script>

补充下：

最近看文章，可能是使用v-for遍历对象有点生疏，看到个骚操作，记录下来：

1、使用v-for遍历对象, 两个参数时，分别对应对象的 value 和key

<div v-for="(value,key) in say" :key="key">
    <h1>{{value}}</h1> <!--name is ···     height is ··· -->
    <h1>{{key}}</h1>   <!-- a    b  -->
</div>

export default {
    name: "first",
    data(){
        return{
            say:{
                a:"name is ··· ",
                b:"height is ··· "
            }
        }
    }
}

2、利用v-model双向绑定，可对输入框赋值默认值，input输入框就可以跟数据绑定一起了。。。

<template>
    <div v-for="(key,value) in say" :key="index">
        <input type="text" v-model="say[index]">
    </div>
</template>

<script>
export default {
    name: "first",
    data(){
        return{
            say:{
                name:"默认值name is ··· ",
                height:"默认值height is ··· "
            },
            property:{
                name:"lxc",
                height:170
            }
        }
    }
}
</script>

3、在实际开发中，如果有一段重复的html模板要渲染，又没有数据相关联，你可以这样模拟：

<div v-for="n in 3" :key="n">
    <span>被渲染的标签，渲染了{{n}}次</span>
</div>

 

 

事件：(以点击事件为例)

_____________________________________________________________________________________________________

v-on：click="clickEventFn"，v-on可以绑定一个事件，冒号后边是事件名称，事件后边绑定的一个方法，

也可以直接调用方法，与绑定一个事件的区别在于，直接调用方法可以传递参数

<button @click="showFn()">

也可以是运行一些js代码：

<button @click="count += 1">

v-on：click可简写成@click

eg：

<div id="ele">
    <button v-on:click="clickFn">click</button>
</div>

<script>

  var vm = new Vue({
    el: "#ele",
    data: {
      name:"lxc"
    },
    methods:{
      clickFn(event){
        console.log(this.name)//lxc
        console.log(event) //MouseEvent {isTrusted: true, …}
      }
    }
  });

</script>

上边代码，有几个注意的点：

1、如果不传参数，事件处理函数后边可以不加括号；事件源对象默认是事件处理函数的第一个参数。

2、在vue中data中的数据、方法中的事件处理函数都会挂载到vm根实例上，所以在方法中调用data中的数据，可以用this，因为this指向根实例（也就是vm）；值得注意的是ES6中的箭头函数中的this指向父级，所以在vue中尽量避免用箭头函数！！！

3、如果需要传递参数，事件源对象必须手动写成$event , 以参数的形式传递到事件处理函数中去。。。

<div id="ele">
    <button v-on:click="clickFn($event,1)">click</button>
</div>
<script>
  var vm = new Vue({
    el: "#ele",
    data: {
      name:"lxc"
    },
    methods:{
      clickFn(param1,param2){
        console.log(param1)// MouseEvent {isTrusted: true, …}
        console.log(param2) // 1
      }
    }
  });
</script>

 

修饰符：

_____________________________________________________________________________________________________

这里只说几个重点：

1、阻止冒泡（从上往下，或从下往上都会阻止事件的传播）：  <button @click.stop = "doSometing"></button>

eg：子元素和父元素里分别有alert（son）和alert（father），点击子元素时，会先弹出son，后会弹出father，会向上一直冒泡到父元素

2、阻止默认行为：<button @click.prevent = "doSomething"><button>

     事件捕获（从上往下）：<button @click.capture= "doSomething"><button>

      eg：在上边的例子基础上，给父级在加一个父级，子元素和父元素、父级的父级里分别有alert（son）和alert（father）、alert（grandpa）,如果给父级的父级加上事件捕获，点击子元素时，会先弹出grandpa，然后接着冒泡，弹出son，在弹出father

3、按键修饰符：<input @keyup.enter = "over"> 或者<input @keyup.13 = "over">

4、点击回调只触发一次<button @click.once = "doSomething">

5、动态事件 ( vue2.6.0+ 添加的)：<button @[event] = "dosSomething">

6、下边指令的意思：event.target是当前元素自身时，触发处理函数；即事件不是从内部元素触发的。。。

<div @ click.self = "doSomething"></div>

7、不拦截默认事件：div @click.passive="doSomething"></div>

       不拦截默认事件修饰符能够提升移动端的性能，.passive会告诉浏览器你不想阻止事件的默认行为；每次事件产生，浏览器都会去查询一下是否有preventDefault阻止该次事件的默认动作，我们加上passive就是为了告诉浏览器，不用查询了，我们没用preventDefault阻止默认动作。

      passive一般用在滚动监听，如：@scroll 、 @touchmove，因为滚动监听过程中，移动每个像素都会产生一次事件，每次都使用内核查询prevent会使滑动卡顿。我们通过passive将内核线程查询跳过，可大大提升滑动的流畅度。。。

     不要把.passive和.prevent一起使用，因为.prevent会被忽略，浏览器会展示一个警告。。。

8、鼠标按钮修饰符：

      .left     /    .right     /    .middle

使用修饰符时，顺序很重要，v-on:click.prevent.self会阻止所有的点击，而v-on:click.self.prevent只会阻止对元素自身的点击。。。

9、补充：

sync修饰符：

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件都没有明显的变更来源（也就是不知道是父组件变更的还是子组件变更的！）

vue推荐我们以 ​​update:myPropName​​ 的模式触发事件取而代之

例如：

this.$emit('update:changeMsg', '1')
// 在父组件中监听
<text-component :msg="123" @update:changeMsg="msg = $event" />

上边写法很繁琐，方便起见，vue提供了一个缩写, .sync 修饰符：

<text-conponent :msg.sync="msg" />

 

附带一个小demo（ToDoList）

<style>
      li{
        width:200px;
        height:20px;
        padding:15px 20px;
        margin:10px 0; 
        list-style: none;
        background: #ccc;
        position: relative;
        line-height:20px;
      }
      .del{
        position: absolute;
        right:10px;
        top:50%;
        transform: translate(0,-50%);
        width:50px;
        height:20px;
        border:1px solid #444;
        outline: none;
        line-height: 20px;
        text-align: center;
      }

  </style>

<div id="ele">
     //可以通过点击按钮 或者 按回车添加数据
     <input type="text" v-model="info" @keyUp.enter="clickAddInfoFn">
     <button @click="clickAddInfoFn">点击添加</button>
   <ul>
      <li v-for="item in arr">{{item}}<button class="del" @click="deleteDataFn(item)">删除</button></li>
   </ul>
 </div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

      var vm = new Vue({
        el: "#ele",
        data: {
            info:"",
            arr:[]
        },
        methods: {
          //点击添加信息的事件处理函数
          clickAddInfoFn(){
            let _this = this;
            if( _this.arr.every((ele)=>_this.info != ele) ){//这里用every来判断添加的数据与数组中的数据是否一样（去重）
                _this.arr.push(_this.info);
            }else{
                alert("输入重复，请重新输入！")
            }
            this.info = "";//置空输入框
          },
          //删除数据的事件处理函数（点击删除时，拿到当前数据，利用filter过滤掉相等的数据）
          //也可以用index进行删除（过滤掉索引相同的）
          deleteDataFn(val){
            this.arr = this.arr.filter(function(ele){
                return ele !== val
            })
          }
        }
      });


    </script>

效果：

 

补充：

条件渲染：

v-show：根据条件来渲染元素，不会删除元素，只是去切换元素css的display属性

_____________________________________________________________________________________________________

eg：

<div class="box">
    <button @click="isshow = !isshow">click</button>
    <h1 v-show="isshow">吕星辰</h1>
</div>

<script>
    var vm = new Vue({
        el:".box",
        data:{
            isshow:true
        }
    })
</script>

注意：v-show不支持<template>元素

 

v-if与v-show一样都是条件渲染

_____________________________________________________________________________________________________

<div class="box">
    <button @click="isshow = !isshow">click</button>
    <h1 v-if="isshow">吕星辰</h1>
</div>
<script>
    var vm = new Vue({
        el:".box",
        data:{
            isshow:true
        }
    })
</script>

点击为false之后的显示，元素被删除了。。。

多个元素的的切换渲染：

可以把v-if放在<template>不可见的元素上边，最终渲染将不包含<template>

<template v-if="isTrue">
    <p>1</p>
    <p>2</p>
</template>

如果v-if不成立可紧跟在后边使用v-else或v-esle-if，用来判断别的条件是否成立：

eg：（随机数大于0.5显示1，小于则显示0）

<div v-if="Math.random() >0.5">
    <p>1</p>
</div>
<div v-else>
    <p>0</p>
</div>

v-if和v-show的区别：

v-if是操作dom元素的，而v-show是操作css，如果只是简单的且频繁的显示隐藏元素用v-show，如果运行时条件很少改变，则使用v-if

 

v-if和v-for一起用时

_____________________________________________________________________________________________________

官方说明：不推荐两者一起用，当v-if和v-for一起用时，v-for具有比v-if更高的优先级，v-if将分别重复运行v-for的循环中。

eg：

<div class="box">
    <ul>
        <li v-for="(item,index) in arr" :key="item.id" v-if="item.isshow">
            {{item.number}}
        </li>
    </ul>
</div>
<script>
var vm = new Vue({
    el:".box",
    data:{
        arr:[{number:1,isshow:true,id:"1"},
            {number:2,isshow:false,id:"2"},
            {number:3,isshow:true,id:"3"},
            {number:4,isshow:false,id:"4"}
        ]
    }
})
</script>

上边代码：li元素会先循环，然后判断是否渲染到页面中去

显示结果：

如果你想根据条件来判断是否循环执行，可以将v-if写在外层或者template上。

<div class="box">
    <ul v-if="isshow">
        <li v-for="item in arr">
            {{item}}
        </li>
    </ul>
    <p v-else>isShow为false</p>
</div>

 

以上是vue中常用的几个指令及事件，还有一些我会在以后及时补充上。。。