精华内容
下载资源
问答
  • 深入理解vue 修饰符sync【 vue sync修饰符示例】 _littleTank_关注 在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync ...

    深入理解vue 修饰符sync【 vue sync修饰符示例】

    _littleTank_关注

    在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中,我们发现 .sync 还是有其适用之处,比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
    示例代码如下:

    <comp :foo.sync="bar"></comp>
    

    会被扩展为:

    <comp :foo="bar" @update:foo="val => bar = val"></comp>
    

    当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:

    this.$emit('update:foo', newValue)
    

    猛一看不明白,下边我么通过一个实例(弹窗的关闭事件)来说明这个代码到底是怎么运用的。

    <template>
        <div class="details">
            <myComponent :show.sync='valueChild' style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"></myComponent>
            <button @click="changeValue">toggle</button>
        </div>
    </template>
    <script>
    import Vue from 'vue'
    Vue.component('myComponent', {
          template: `<div v-if="show">
                        <p>默认初始值是{{show}},所以是显示的</p>
                        <button @click.stop="closeDiv">关闭</button>
                     </div>`,
          props:['show'],
          methods: {
            closeDiv() {
              this.$emit('update:show', false); //触发 input 事件,并传入新值
            }
          }
    })
    export default{
        data(){
            return{
                valueChild:true,
            }
        },
        methods:{
            changeValue(){
                this.valueChild = !this.valueChild
            }
        }
    }
    </script>
    

    动态效果如下:

     

    GIF.gif

     

    vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。如果我们不用.sync,我们想做上面的那个弹窗功能,我们也可以props传初始值,然后事件监听,实现起来也不算复杂。这里用sync实现,只是给大家提供一个思路,让其明白他的实现原理,可能有其它复杂的功能适用sync。

    这只是一个简单的例子,看完这个不知你是不觉得有个指令跟这个很相似,v-model?对,就是v-model在组件上使用的时候。
    具体的可以查看:vue 自定义组件使用v-model,可以实现同样的功能。也是以这个弹窗事件做演示的

    展开全文
  • vue 修饰符

    2021-06-24 22:38:49
    事件修饰符 .native父组件中为子组件绑定一个原生事件 当给子组件添加事件时事件无法直接执行 (会被认为是自定义事件,子传父) 让这个事件执行 1:在子组件中使用$emit() 2:使用 .native 修饰符 但这个事件...

    事件修饰符

      .native 父组件中为子组件绑定一个原生事件

    当给子组件添加事件时事件无法直接执行 (会被认为是自定义事件,子传父)

    让这个事件执行

        1:在子组件中使用$emit()

        2:使用 .native 修饰符  但这个事件必须是原生事件

    属性修饰符

    .sync   实现父子组件间的双向绑定 

               与 v-model 类似  但可以有多个

    v-model的原理

    // 父组件的子组件标签
    
    <com1 v-model="num"></com1>
     
    // 等价于 传递给子组件一个值 子组件通过input事件回传值
    
    <com1 :value="num" @input="(val)=>this.num=val"></com1>

    .sync 的原理

    // 正常父传子: 
    <com1 :a="num" :b="num2"></com1>
    
    // 加上sync之后父传子: 
    <com1 :a.sync="num" .b.sync="num2"></com1> 
    
    // 它等价于
    
    <com1 
      :a="num" @update:a="val=>num=val"
      :b="num2" @update:b="val=>num2=val"></com1> 
    
    // 相当于子组件添加事件监听,
    // 事件名是update:a, 通过这个事件回传值

    展开全文
  • Vue修饰符sync详解

    2021-01-06 16:44:53
    在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中,我们发现 .sync 还是有其适用之处...

    首先官方文档
    没看懂?不急,我们来举个详细讲讲吧
    在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中,我们发现 .sync 还是有其适用之处,比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起我们重新引入了 .sync 修饰符,但是这次它只是作为一个编译时的语法糖存在。它会被扩展为一个自动更新父组件属性的 v-on 监听器。
    示例代码如下:

    <comp :foo.sync="bar"></comp>
    

    会被扩展为:

    <comp :foo="bar" @update:foo="val => bar = val"></comp>
    

    当子组件需要更新 foo 的值时,它需要显式地触发一个更新事件:

    this.$emit('update:foo', newValue)
    

    猛一看不明白,下边我么通过一个实例(弹窗的关闭事件)来说明这个代码到底是怎么运用的。

    <template>
      <div class="details">
        <mySync
          :show.sync="valueChild"
          style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"
        ></mySync>
        <button @click="changeValue">toggle</button>
      </div>
    </template>
    <script>
    //import Vue from "vue";用这个会报错
    import Vue from "vue/dist/vue.esm.js";//最后把main.js里也换成了这个方法就可以了
    
    export default {
      data() {
        return {
          valueChild: true,
        };
      },
      created() {
        Vue.component("mySync", {
          template: `<div v-if="show">
                        <p>默认初始值是{{show}},所以是显示的</p>
                        <button @click.stop="closeDiv">关闭</button>
                     </div>`,
          props: ["show"],
          name: "mySync",
          methods: {
            closeDiv() {
              this.$emit("update:show", false); //触发 input 事件,并传入新值
            },
          },
        });
      },
      methods: {
        changeValue() {
          this.valueChild = !this.valueChild;
        },
      },
    };
    </script>
    
    

    动态效果如下:

    在这里插入图片描述

    vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。如果我们不用.sync,我们想做上面的那个弹窗功能,我们也可以props传初始值,然后事件监听,实现起来也不算复杂。这里用sync实现,只是给大家提供一个思路,让其明白他的实现原理,可能有其它复杂的功能适用sync。
    如果不用.sync,用传统的子传递给方法也是可以的:

    <template>
      <div class="details">
        <mySync
          :show="valueChild"
          @show="changeValue"
          style="padding: 30px 20px 30px 5px;border:1px solid #ddd;margin-bottom: 10px;"
        ></mySync>
        <button @click="changeValue">toggle</button>
      </div>
    </template>
    <script>
    //import Vue from "vue";
    import Vue from "vue/dist/vue.esm.js";
    
    export default {
      data() {
        return {
          valueChild: true,
        };
      },
      created() {
        Vue.component("mySync", {
          template: `<div v-if="show">
                        <p>默认初始值是{{show}},所以是显示的</p>
                        <button @click.stop="closeDiv">关闭</button>
                     </div>`,
          props: ["show"],
          name: "mySync",
          methods: {
            closeDiv() {
              this.$emit("show"); //触发 input 事件,并传入新值
            },
          },
        });
      },
      methods: {
        changeValue() {
          this.valueChild = !this.valueChild;
        },
      },
    };
    </script>
    

    再来一个例子
    syncFather.vue:

    <template>
      <div class="hello">
        <!-- //input实时改变wrd的值, 并且会实时改变box里的内容 -->
        <input type="text" v-model="wrd" />
        <hr />
        这是name---{{ sname }}
        <!-- 不写sync不更新父组件数据,变成了单向的父组件传值给子组件的写法 -->
        <box :word.sync="wrd" :sname.sync="sname"></box>
      </div>
    </template>
    
    <script>
    import box from "./syncChild.vue"; //引入box子组件
    export default {
      name: "HelloWorld",
      data() {
        return {
          wrd: "",
          sname: "zs",
          age: 12,
        };
      },
      components: {
        box,
      },
    };
    </script>
    

    syncChild.vue

    <template>
      <div class="hello">
        <div class="ipt">
          <hr />
          ---------------------------------------------
          <br />
          <input type="text" v-model="str" />
        </div>
    
        //word是父元素传过来的
        <br />
        <h2>{{ word }}</h2>
        <br />
        //sname也是
        <br />
        <h2>{{ sname }}</h2>
      </div>
    </template>
    
    <script>
    export default {
      name: "box",
      data() {
        return {
          str: "",
        };
      },
      props: {
        word: {
          type: String,
          default: "",
        },
        sname: {
          type: String,
          default: "ls",
        },
      },
      watch: {
        str: function(newValue, oldValue) {
          //每当str的值改变则发送事件update:sname , 并且把值传过去,这时会修改父组件的data值
          this.$emit("update:sname", newValue);
          //如果多个值又不想用object,可以多次emit
          this.$emit("update:word", newValue + "1");
          console.log(oldValue);
        },
      },
    };
    </script>
    
    展开全文
  • vue修饰符总结及积累

    2018-12-11 16:01:59
    连接修饰符名称来调用修饰符,下面是对vue中的修饰符的总结及积累: 一、v-model的修饰符 v-model是用于在表单表单元素上创建双向数据绑定的指令。在 &amp;amp;lt;input&amp;amp;gt;和 &amp;amp;lt;...

    在vue中v-model、v-on除了常规用法,这些指令也支持特殊方式绑定方法,以修饰符的方式实现,通过在指令后面用小数点 .连接修饰符名称来调用修饰符,下面是对vue中的修饰符的总结及积累:

    一、v-model的修饰符

    v-model是用于在表单表单元素上创建双向数据绑定的指令。在 <input><textarea>上,默认通过监听元素的 input 事件来更新绑定的属性值。
    1、.lazy 修饰符
    .lazy:在改变后才触发,也就是说当input或者textarea失去焦点时,它所绑定的值才会改变,如:

    <!-- html部分 -->
    <!-- 若不使用 .lazy 修饰符,则在输入的过程中,haha 的值时不断变化的 -->
    <input type="text" v-model.lazy="haha">
    <p>输入的内容为:{{ haha }}</p>
    

    2、.number 修饰符
    .number:用来将输入的内容转换成数值,但如果输入的是字符串,则输出的也是字符串;
    用于type='text'

     <!-- html部分 -->
    <input type="text" v-model.number="haha">
    <p>输入的内容为:{{ haha }}</p>
    <!-- 
      输出的值及为input失去焦点后的value值,即haha的值与input中显示的值最终会保持一致
      有下面几种情况:
      	1. 输入:123ebca154	输出:123		number类型
      	2. 输入:+123456		输出:123456		number类型
      	3. 输入:12e			输出:12			number类型
      	4. 输入:12.36e		输出:12.36		number类型
      	5. 输入:12.3.4.5		输出:12.3		number类型
      	6. 输入:-+1231abc	输出:-+1231abc	string类型
      	7. 输入:abc			输出:abc		string类型
      	8. 输入:+			输出:+			string类型
      	9. 输入:-			输出:-			string类型
    -->
    

    用于type='number'

      <!-- html部分 -->
    <input type="number" v-model.number="haha">
    <p>输入的内容为:{{ haha }}</p>
    <!-- 
       输出的值及为input的value值,当非法输入时,input最终展示的内容为输入的内容
       有下面几种情况:
       	1. 输入:-.35		输出:-0.35		number类型
       	2. 输入:+-123e	不输出		非法输入,string类型
       	3. 输入:12e		不输出		非法输入,string类型
       	4.输入:+-..25		不输出		非法输入,string类型
    -->
    

    无论是用在text中还是用在number中,都需要再进行处理:
    用在text中:

    <script>
     // 对haha监听,如下:
    watch: {
       haha (newVal, oldVal) {
       	this.hh = typeof newVal === 'string' && newVal !== '-' ? newVal.slice(0, newVal.length - 1) : newVal
       }
    }
    </script>
    

    用在number中:

    <script>
    // 给input绑定blur事件
    methods: {
      inputBlurFunc (newVal, oldVal) {
      	this.hh = typeof newVal === 'string' && newVal !== '-' ? newVal.slice(0, newVal.length - 1) : newVal
      }
    }
    </script>
    

    3、.trim 修饰符
    .trim:自动过滤字符串前后的空格

    <!-- html部分 -->
    <input type="text" v-model.trim="haha">
    <p>输入的内容为:{{ haha }}</p>
    

    二、v-on的修饰符

    1、.stop 修饰符
    .stop:该修饰符将阻止事件向上冒泡。同理于调用 event.stopPropagation()方法

     <!-- html部分 -->
     <div @click='clickDivFunc'>
    	<button @click.stop='clickBtnFunc'>点我</button>
     <div>
    

    2、.prevent 修饰符
    .prevent:该修饰符会阻止当前事件的默认行为。同理于调用 event.preventDefault()方法

    <!-- html部分 -->
    <form @submit.prevent='clickBtnFunc'></form>
    

    3、.self 修饰符
    .self:只有该元素本身能触发此事件,它的子元素无法触发它的事件;所以,当点击了它的子元素,按照冒泡原理,父元素的事件应当被触发,但是因为事件的触发源并不是它,所以它的事件不会被触发;如下:

    <!-- html部分 -->
    <!-- 点击按钮时是不会触发div上的事件 -->
    <div @click.self='clickDivFunc'>
       <button @click='clickBtnFunc'>点我</button>
    <div>
    

    4、.once 修饰符
    .once:该修饰符表示绑定的事件只会被触发一次

    <!-- html部分 -->
    <button @click.once='clickBtnFunc'>点我</button>
    

    5、.native 修饰符
    .native:给某个组件的根元素上添加事件,需要添加该修饰符来使事件有效;使用在普通根元素上,改修饰符是无效的;如下:

    <my-component v-on:click.native="clickFun"></my-component>
    

    修饰符可以串联,如:
    <a v-on:click.stop.prevent="hahaFunc"></a>

    三、按键修饰符

    Vue 允许为 v-on 在绑定键盘事件时添加按键修饰符,通过 keyup.keyCode的方式来监听键盘特定按键的事件。也可以通过按键名称来监听,如下:

    <!-- 通过keyCode的方式监听 -->
    <input type='text' @keyup.13='submitFunc'>
    <!-- 通过按键名称的方式监听 -->
    <input  type='text' @keyup.enter="submit">
    

    所有的按键别名:

    • enter
    • tab
    • delete (捕获 “删除” 和 “退格” 键)
    • esc
    • space
    • up
    • down
    • left
    • right

    自定义按键修饰符
    通过config.keyCodes对象来自定义按键修饰符别名,如:
    Vue.config.keyCodes.f1 = 112

    四、v-bing的修饰符

    1、.sync 修饰符
    .sync:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定,即在子组件中修改父组件的属性值;该修饰符会被扩展为一个自动更新父组件属性的v-on监听器,如下:

    <comp :foo.sync="bar"></comp>
    

    扩展为:

    <comp :foo="bar" @update:foo="val => bar = val"></comp>
    

    当子组件需要更新foo的值时,它需要显式的触发更新事件,如下:

    this.emit('update:foo', newValue)
    
    展开全文
  • 在说vue 修饰符sync前,我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中,我们发现 .sync 还是有其适用之处...
  • vue修饰符学习

    2019-11-05 18:05:04
    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>修饰符</title> <style> *{margin: ...
  • 深入解读Vue修饰符sync

    2020-09-23 21:18:29
      在vue 1.x 中的 .sync 修饰符所提供的功能。当一个子组件改变了一个带 .sync 的prop的值时,这个变化也会同步到父组件中所绑定的值。   这很方便,但也会导致问题,因为它破坏了单向数据流。(数据自上而下流,...
  • 理解vue 修饰符sync

    2019-04-28 16:42:00
    我们先看下官方文档:vue .sync 修饰符,里面说vue .sync 修饰符以前存在于vue1.0版本里,但是在在 2.0 中移除了 .sync 。但是在 2.0 发布之后的实际应用中, 我们发现 .sync 还是有其适用之处,比如在开发可复用的...
  • vue 修饰符 整理

    2018-12-24 15:41:00
    事件修饰符 .stop <!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> .prevent <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent=...
  • vue修饰符.sync的作用

    2019-11-15 18:11:04
    我们在传递一个属性到子组件时,正常情况下,子组件不能直接修改这个属性,修改了控制台会发出警告,这个vue的单项数据流原则,为了就是维护的问题,如果其他子组件也用到了这个属性,就会带来不必要的麻烦,但是在...
  • Vue修饰符 里面有这么三种属性: .lazy .number .trim 1. lazy 在默认情况下,v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。你可以添加 lazy 修饰符,从而转为...
  • vue sync修饰符

    2018-12-21 14:29:19
    我们先看下官方文档 vue 修饰符sync vue 在 2.0 发布之后的实际应用中,我们发现 .sync 还是有其适用之处,比如在开发可复用的组件库时。我们需要做的只是让子组件改变父组件状态的代码更容易被区分。从 2.3.0 起...
  • Vue 按键修饰符

    2020-06-29 14:38:53
    Vue 监听的键盘修饰符:enter、detete、tab、esc、up、down、left、right、单个字母 <input @keydown.enter="showDialog1" placeholder="请输入名称" type="text" v-model="name" /> 添加.enter修饰符,...
  • vue 事件修饰符

    2021-07-14 14:32:29
    vue事件修饰符前三个常见后三个不怎么用 阻止事件冒泡 只触发一次 使用事件的捕获模式 比如该两个方法处于嵌套的情况下由于没有加阻止冒泡事件,所以点击了box2也会触发box1 先进行捕获再进行冒泡,...
  • vue修饰符

    2021-05-15 19:28:24
    事件修饰符 v-on 简写为 @ .stop--阻止单击事件继续传播 ,即阻止冒泡 <li @click="done"> //加上.stop可以阻止冒泡事件执行 <a v-on:click.stop="doThis"></a> </li> ....
  • vue事件修饰符详解

    2019-03-31 20:11:09
    Vue中,事件修饰符处理了许多DOM事件的细节,让我们不再需要花大量的时间去处理这些烦恼的事情,而能有更多的精力专注于程序的逻辑处理。在Vue中事件修饰符主要有: .stop:等同于JavaScript中的event....
  • vue sync修饰符的理解

    千次阅读 2018-06-07 14:26:04
    vue 修饰符sync的功能是:当一个子组件改变了一个 prop 的值时,这个变化也会同步到父组件中所绑定。如果我们不用.sync,我们想做上面的那个弹窗功能,我们也可以props传初始值,然后事件监听,实现起来也不算复杂。...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,187
精华内容 1,674
关键字:

vue修饰符原理

vue 订阅