vue日常指令总结

2019-08-27 本文已影响0人 June_Done

计算属性：可以使用 methods 来替代 computed，效果上两个都是一样的，但是 computed 是基于它的依赖缓存，只有相关依赖发生改变时才会重新取值。而使用 methods ，在重新渲染的时候，函数总会重新调用执行。
v-model ：数据双向绑定，常用于表单，用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
v-model.number:可以让其类型为number。
v-model.trim:去除首尾空格。
v-model.lazy:可以使用 .lazy 懒加载修饰符，让其只在 change 事件中再加载输入框中的数据。
input v-model的双向绑定，如下：

// 子组件 w-input.vue  
<template>
    <input type="text" :value="value" @input="handleInput"> 
</template>
export default {
    props:['value'],
   methods:{
      handleInput(e){
           this.$emit('input', e.target.value)
      }
    }
}

:value 将该input框的value值和从父元素传入的value值做绑定(父元素中的value变化导致input框的value值变化)
@input 使用 $emit 调用父元素的input事件,并将$ event.target.value(也就是这个input框的value值)传过去

// 父组件
<w-input v-model="value"></w-input>
// 解析v-model： argument[0]是子组件$emit传出来的e.target.value
<w-input :value = value @input = "value = getval"></w-input>
export default {
    data:{
      return{
          value:'123'
      }
    },
    methods:{
        getval:function(v){
            this.value = v
        }
    }
 }

当组件中子元素调用父元素的Input方法时,相当于调用了 getval($event.target.value) 修改了父元素的val值
还有一些其他的功能：

// 子组件 w-input.vue  
<template>
    <input type="checkbox" :value="value1" @input="handleInput"> 
</template>
export default {
  model:{
      prop:'value1',
      event:'change'
   },
   props:['value1'],
   methods:{
      handleInput(e){
           this.$emit('change', e.target.value)
      }
    }
}

v-on：用于绑定html事件，缩写：@click
v-bind：用于属性绑定，缩写：“：”
watch： Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个属性。（我们可以通过 watch 来响应数据的变化）。
组件data：组件中的data必须是个函数，因此每个实例可以维护一份被返回对象的独立的拷贝。
:class的写法：

<div :class="{active:isActive}"></div>  
<div :class="[ isActive ? 'active' : ' ' ]"></div>   //或者
<div :class="[{active:isActive}]"></div>      //或者

data:{
    isActive:false;
  }

v-text：v-text和{{}}的作用相同，且在网速慢或JS报错时v-text直接不显示，可以避免尴尬。

<p id="test" v-text="'我叫'+student.name+'，今年'+student.age+'岁啦'"></p>
<!--解析结果 - START-->
<p>我叫11，今年24岁啦</p>
<!--解析结果 - END-->
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {
　　　　　　student : {
　　　　　　　　name : "11",
　　　　　　　　age : 24
　　　　　　}
　　　　}
　　});
</script>

v-html指令，传递HTML标签：

<div id="test">
　　<p v-text="student.name"></p>
　　<p v-text="student.image"></p>
　　<p v-html="student.name"></p>
　　<p v-html="student.image"></p>
</div>
<!--解析结果 - START-->
<div>
　　<p>傻屌</p>
　　<p><img src='shadiao.jpg'/></p><!--原样输出了文字-->
　　<p>傻屌</p>
　　<p>图片</p><!--正确显示了图片-->
</div>
<!--解析结果 - END-->
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {
　　　　　　student : {
　　　　　　　　name : "傻屌",
　　　　　　　　image : "<img src='shadiao.jpg'/>"
　　　　　　}
　　　　}
　　});
</script>

v-pre指令：跳过某元素和他的子元素的编译，可以用来显示原始Mustache标签。
v-cloak指令：使某元素保持某种指定行为，直到与该元素相关的实例编译结束。
v-once指令：只渲染元素和组件一次，之后重新渲染，该元素和组件均会被视作静态内容跳过。

<style type="text/css">
　　[v-cloak]{display:none;}
</style>
<div id="test">
　　<p v-pre>{{one}}</p><!--直接显示：{{one}}-->
　　<p v-cloak>{{two}}</p><!--obj编译完成后才显示：二号-->
　　<p v-once>{{three}}</p><!--始终显示：三号-->
</div>
<script type="text/javascript">
　　var obj = new Vue({
　　　　el : "#test",
　　　　data : {
　　　　　　one : "一",
　　　　　　two : "二",
　　　　　　three : "三"
　　　　}
　　});
　　setTimeout("obj.three = '变一下'",1000);
</script>

参考：https://www.cnblogs.com/lynshxs/p/9890770.html

vue日常指令总结

猜你喜欢

热点阅读