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

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

v-if
v-bind
- 执行运算
- 执行函数等
v-show
v-for
- component lists rendered with v-for should have explicit keys
Vue 中的 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]
    }
  }
}

也可以用of代替in做为分隔符，因为它是接近JavaScript迭代器的语法

<ul id="exp1">
    <li v-for="value in object">
        {{value}}
    </li>
</ul>

↑

component lists rendered with v-for should have explicit keys †[edit]

缺少 :key="index"

<el-row :gutter="20" v-for="(item, index) in data" :key="index">
  <el-col :md="8">
    <span> {{ item.id }}</span>
  </el-col>
  <el-col :md="8">
    <span> {{ item.name }}</span>
  </el-col>
  <el-col :md="8">
    <span> {{ item.age }}</span>
  </el-col>
</el-row>

↑

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

↑

v-model 所需要绑定的值，需要经过加工后才可以绑定使用的情况 †[edit]

在 data 里面定义一个临时值，例如下面的 temp

data: {
   return {
     temp: [], //为了对绑定源数据加工，做的临时变量
     bindingSource: [], //绑定源数据
   }
}

在 watch 里面对绑定值进行加工

watch: {
  temp: {
    handler(newVal, oldVal) {
      var result;
      //在这里对 bindingSource 进行任意的加工后，用 temp 的返回
      return result;
    },
    // 立即处理 进入页面就触发
    immediate: true,
    // 深度监听 属性的变化
    deep: true,
  }

html里面绑定

<el-form-item label="生产工序">
        <el-checkbox-group v-model="temp" ....

↑

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.9)