乐趣区

关于vue.js:vue-lass-与-Style-绑定

jiezi

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…

退出移动版