vue lass 与 Style 绑定

Posted 2021-09-12 用心

Class 与 Style 绑定

法一：

<h1 :class="{color: isColor, size: true}">{{title}}</h1>

法二：

h1 :class="font">{{title}}</h1>

法三：

<h1 :class="[{color: isColor}, \'style\']">{{title}}</h1>

法四：

<h1 :class="\'style\'" class="color">{{title}}</h1>

---

<h2 :style="style">{{title}}</h2>

data: {
        title: \'hello\',
        isColor: true,
        font: {
          color: true,
          size: false
        },
        style: {
          fontSize: \'100px\',
          color: \'greenyellow\'
        }
      },

v-if补充

v-if与v-else中间不能有其他标签。
v-if与v-else-if与v-else等同。

<div id="root">
    <h1 v-if="num < 0">
      {{title}}
    </h1>
    <!-- 不能有第三者 -->
    <!-- <div>我是第三者</div> -->
    <h2 v-else-if=" num === 9">
      {{title + \' !!!\'}}
    </h2>
    <h3 v-else>
      {{title + \' !!!!!!\'}}
    </h3>
</div>

vue内置组件：template

<!-- template： Vue内置组件 -->
    <template v-if="show">
      <div>{{title}}</div>
      <p>{{title}}</p>
    </template>

v-if与v-for同时修饰一个元素，优先级问题

• 在vue2中v-for优先级高;
• 在vue3中v-if优先级高.

v-show与v-for区别

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

官方文档：https://cn.vuejs.org/v2/guide...

在Vue中，for-in，for-of都帮我们抹平了差异。

事件修饰符events

<button @click="handleClick(100, $event)">click</button>

methods: {
        handleClick(num, e) {
          console.log(e)
        }
}

passive:
https://segmentfault.com/a/11...

按键修饰符

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">

表单输入绑定

官网：https://cn.vuejs.org/v2/guide...

组件基础

官网：
https://cn.vuejs.org/v2/guide...

<component :is="currentComp"></component>

Vue.component(\'m-home\', {
      template: `
        <div>home</div>
      `,
      destroyed() {
        console.log(\'home\')
      },
    })
    Vue.component(\'m-category\', {
      template: `
        <div>category</div>
      `,
      destroyed() {
        console.log(\'m-category\')
      },
    })
    Vue.component(\'m-profile\', {
      template: `
        <div>profile</div>
      `,
      destroyed() {
        console.log(\'m-profile\')
      },
    })

解析DOM模板时的注意事项

is
有些 html 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
官网：
https://cn.vuejs.org/v2/guide...