乐趣区

vue-指令

jiezi

v-text 只能渲染文本，不解析 HTML，会原样输出 HTML
v-html 可以渲染文本，也可以解析 HTML

v-once 只渲染元素和组件一次

<template>
  <div class="index-container">
    <div v-once>{{message}}</div>
    <div>{{message}}</div>
    <button @click="changeMessage"> 修改信息 </button>
  </div>
</template>
<script>
export default {data () {
    return {message: 'jdfjdl'}
  },
  methods: {changeMessage () {this.message = 'aaaaa'}
  }
}
</script>

点击按钮时，有 v -once 的值不会改变

v-bind绑定一个值给 HTML 的属性

<a v-bind:href="url"> 地址 </a>
<a :href="url"> 地址 </a>

可以绑定一个值，对象，数组..
<div v-bind=”{id: ‘divId’}”>dfdfd</div> 等价于
<div id=”divId”>dfdfd</div>

v-model 双向绑定
修饰符：

.lazy 取代 input 监听 change 事件
.number 输入字符串转为有效数字
.trim 输入首尾空格过滤

v-show
显示和隐藏元素，相当于 display: none;
v-show 不支持 <template> 元素，也没有 v -else
<template v-show=”message”>dfdfdfd</template>
并没有什么卵用，直接显示内容了
v-if
可以使用在 <template> 元素上，需要 key 值管理可复用的元素，而且可以高效的渲染

v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建
v-if 也是惰性的，如果在初始渲染时条件为 false 时，则什么也不做，直到条件第一次为 true 时，才会开始渲染条件块
v-show 相对要简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 的 display 属性进行切换
一般来说，v-if 有更高的切换开销，而 v -show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v -show 较好；如果在运行时条件很少改变，则使用 v -if 较好。

v-for
<div v-for=”(item, index) in items” :key=”index”></div>

v-on 监听事件
<button v-on:click=”doThis”></button>
v-on 用在普通元素上时，只能监听 原生 DOM 事件。用在自定义元素组件上时，也可以监听子组件触发的 自定义事件。

v-pre
可以跳过这个元素和他的子元素的编译过程，可以用来显示原始插值，跳过大量没有指令的节点可以加快编译

<div v-pre>{{message}}</div> // 显示在页面是 {{message}}

v-clock
保持在元素上直接到关联实例结束编译，和 css 规则如 [v-cloak] {display: none}一起用时，这个指令可以隐藏未编译的插值标签，直到实例准备完毕。

<div v-cloak>{{message}}</div>
[v-cloak] {display: none}

v-slot
单个插槽，具名插槽，作用域插槽

slotDemo.vue

<template>
  <div class="slot-container">
    <slot/>
  </div>
</template>
<script>
export default {name: 'SlotDemo'}
</script>

引用该组件

<slot-demo>
  <div class="box">
    <h1>slot demo</h1>
    <p>this is slot demo!</p>
  </div>
</slot-demo>

引用时组件内部书写的代码会被写入 slot 标签的位置

slot 还可以为其设置一个默认内容，在没有提供内容的时候被渲染，如果提供了内容则被替代。
具名插槽
<slot name=”header”>header 具名插槽 </slot>
默认显示 slot 内的内容

<slot-demo>
  <div class="box">
    <h1>slot demo</h1>
    <p>this is slot demo!</p>
  </div>
  <div slot="header"> 放到具名插槽内的内容 </div>
</slot-demo>

引用时添加属性 slot 对一个的值与组件内部 slot 中的那么一致就会被匹配
此时引用的这个内容会覆盖默认的文本
并且没有 slot 属性的会写到 slot 没有名字的插槽中有对应值的才会写到对应的具名插槽中

作用于插槽

<slot-demo :items="colors" title="Colors">
  <template scope="color">
    <div :style="{background:color.hex}">{{color.name}}</div>
  </template>
</slot-demo>
<script>
import SlotDemo from '../components/slot-demo'
export default {
  components: {SlotDemo},
  data () {
    return {
      colors: [{ name: 'Yellow', hex: '#F4D03F'},
        {name: 'Green', hex: '#229954'},
        {name: 'Purple', hex: '#9B59B6'}
      ]
    }
  }
}
</script>
<div class="color-list">
  <h2>{{title}}</h2>
  <div class="list">
    <div class="list-item" v-for="(item, index) in items" :key="index">
      <slot v-bind="item"></slot>
    </div>
  </div>
</div>
<script>
export default {
  name: 'SlotDemo',
  props: {
    title: {
      type: String,
      default: 'Colors'
    },
    items: {type: Array}
  }
}
</script>

v-slot 简写 #名字
引用的时候简写，并且只能在 template 标签中使用

<div slot="header"> 放到具名插槽内的内容 </div>
等同于
<template #header> 简写 </template>

自定义指令
全局指令：
一般在项目的 main.js 文件中使用 Vue.directive()来注册

Vue.directive('name', {// 自定义指令要做到事情})

局部注册自定义指令：

import MyCustomDirective from './directives/my-custom-directive.js' export default {
    name: 'App',
    directives: {'my-custom-directive': MyCustomDirective}
}
退出移动版