参数(Arguments) の変更点

• 追加された行はこの色です。
• 削除された行はこの色です。
• +Vue+参数(Arguments) へ行く。
• +Vue+参数(Arguments) の差分を削除

#author("2022-05-12T10:12:35+08:00","default:Admin","Admin")
#author("2022-05-12T10:13:43+08:00","default:Admin","Admin")
[[Vue]]

&color(red){※前提条件：本情報はVue 2.0を基づいて説明してる};

#contents

一些指令能够接收一个“参数”，在指令名称之后以 : 表示。例如，v-bind 指令可以用于响应式地更新 HTML 属性：

#codeprettify{{
<a v-bind:href="url"> ... </a>

<div v-bind:class="activeClass?'myclass':''" v-bind:style="activeStyle?'font-size:20px':''">请看颜色的变化</div>
}}

#codeprettify{{
<script>
    new Vue({
        el:"#box",
        data:{
            activeClass:false,
            activeStyle:false,
            url:'http://www.baidu.com'
        }
    })
</script>
}}

这里 href 是参数，告知 v-bind 指令将元素的 href 属性与表达式 url 的值绑定在一起。

另一个示例是 v-on 指令，用于监听 DOM 事件：

#codeprettify{{
<a v-on:click="doSomething"> ... </a>

<button v-on:mouseover="overColor" v-on:mouseout="outColor" v-bind:style="color">鼠标经过</button>
}}

#codeprettify{{
<script>
    new Vue({
        el:"#box",
        data:{
            message:"hello,vue",
            color:'color:blue;'
        },
        methods:{
            reverseMessage:function(){
                this.message=this.message.split('').reverse().join('');
            },
            overColor:function(){
                this.color="color:green";
            },
            outColor:function(){
                this.color="color:blue";
            }
        }
    })
</script>
}}

这里，参数是要监听事件的名称。稍后我们会详细地讨论事件处理。

* Vue 中的 v-model 和 ：model 的区别 [#r8249532]

** v-model [#x388c58c]

是 vue 中的 双向数据绑定 指令， 是负责监听用户输入事件以更新数据多用于input 标签，用于表单之外的标签是不起作用的。(即只对表单控件标签的数据双向绑定有效)。

- v-model 在内部为不同的输入元素使用不同的属性并抛出不同的事件：
- text 和 textarea 元素使用 value 属性和 input 事件；
- checkbox 和 radio 使用 checked 属性和 change 事件；
- select 字段将 value 作为 prop 并将 change 作为事件。

** :model [#m7bdee14]

 : model 是 v-bind：model 的 简写

除引用类型外 都是单向数据传递 ， 父组件传递到了子组件。

引用类型（funcrtion ,array, object ）:子组件改变引用类型的数据的话，父组件也会改变的。


#hr();
コメント：
#comment_kcaptcha