指令(Directives) の変更点

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

#author("2023-10-08T14:11:50+08:00","default:Admin","Admin")
#author("2024-01-25T14:24:14+08:00","default:Admin","Admin")
[[Vue]]

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

#contents

* 概要 [#p03a7fc5]

下面的各标签属性，可以使用模板字符串的方式进行标签属性数据的拼接

例：

 <img :src="baseUrl + imgUrl">

* v-if [#f3b0d28b]

可以控制 br 标签是否显示。
#codeprettify{{
<br v-if="total == 0" />
}}

#codeprettify{{
<p v-if="true">Now you see me</p>
}}

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


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

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

* v-bind [#b67028d4]

用于绑定 html 属性

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

#codeprettify{{
<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'
    }
});
}}

** 执行运算 [#u67eda75]

#codeprettify{{
<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'
    }
});
}}

** 执行函数等 [#he4e91a0]

#codeprettify{{
<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 [#bb47cd34]

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

&color(red){v-show的机制是加载后，根据条件判断是否显示};

#codeprettify{{
<p v-show="true">Now you see me</p>
}}

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

* v-for [#c0acddd2]

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

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

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

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

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

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


** img标签动态绑定src [#b1ca6685]
#codeprettify{{
<ul v-for="i in product" class="clear">
	<li>
		<img :src="i.src"/>
	</li>
	<li>
	       <button>立即购买</button>
	</li>
        <br />

</ul>
}}

注意：此处的绑定，数据写成 :src="｛｛i.src｝｝",是错误的做法。

** component lists rendered with v-for should have explicit keys [#r5998003]

缺少 :key="index"

#codeprettify{{
<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 的区别 [#r8249532]

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

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

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

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

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

html里面绑定

#codeprettify{{
<el-form-item label="生产工序">
        <el-checkbox-group v-model="temp" ....
}}
** 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