+Vue+指令(Directives) のバックアップ(No.5)

※前提条件：本情報はVue 2.0を基づいて説明してる

v-if
v-bind
- 执行运算
- 执行函数等
v-show
v-for
Vue 中的 v-model 和：model 的区别
- v-model
- :model

v-if †[edit]

<p v-if="true">Now you see me</p>

v-else是搭配v-if使用的，它必须紧跟在v-if或者v-else-if后面，否则不起作用。

<p v-if="true">Now you see me</p>
<p v-else>CanSee</p>

v-else-if充当v-if的else-if块，可以链式的使用多次。可以更加方便的实现switch语句。

↑

v-bind †[edit]

用于绑定 html 属性

:disabled 绑定的例子：他支持一个单一 JavaScript 表达式（v-for 除外）

<el-button
            class="filter-item"
            size="t1 + t2"
            type="primary"
            icon="el-icon-plus"
            :disabled="objSomething == null || canEdit === false"
            @click="doSomething"
            >add</el-button
          >
<div id="app">
    <p v-bind:title="title">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>
......
var vm = new Vue({
    el: '#app',
    data: {
        title: 'title content'
    }
});

↑

执行运算 †[edit]

<div id="app">
    <p v-bind:title="t1 + ' ' + t2">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>
......
var vm = new Vue({
    el: '#app',
    data: {
        t1: 'title1',
        t2: 'title2'
    }
});

↑

执行函数等 †[edit]

<div id="app">
    <p v-bind:title="getTitle()">html属性不能使用双大括号形式绑定，只能使用v-bind指令</p>
</div>
......
var vm = new Vue({
    el: '#app',
    data: {
        getTitle: function () {
            return 'title content';
        }
    }
});

↑

v-show †[edit]

如果v-if的值是false，则这个元素被销毁，不在dom中。但是v-show的元素会始终被渲染并保存在dom中，它只是简单的切换css的dispaly属性。

<p v-show="true">Now you see me</p>

注意：v-if有更高的切换开销
v-show有更高的初始渲染开销。
因此，如果要非常频繁的切换，则使用v-show较好；如果在运行时条件不太可能改变，则v-if较好

↑

v-for †[edit]

v-for 指令需要以 item in list 形式的特殊语法， list 是源数据数组并且 item 是数组元素迭代的别名。

<p v-for="(item,index) in list">Index:{{index}} - Item:{{item}}</p>

<ul>
 <li v-for="(item, index) in data">
 <slot :row="item" :$index="index"></slot>
 </li>
</ul>

export default {
  data () {
    return {
      list: [1,2,3]
    }
  }
}

↑

Vue 中的 v-model 和：model 的区别 †[edit]

↑

v-model †[edit]

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

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

↑

:model †[edit]

: model 是 v-bind：model 的 简写

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

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

コメント：

指令(Directives) のバックアップ(No.5)