Vue学习（11）指令

常用内置指令

v-text

更新元素的 textContent。如果要更新部分的 textContent，需要使用 {{ Mustache }} 插值。

• 示例：

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

v-html

更新元素的 innerHTML。注意：内容按普通 HTML 插入 – 不会作为 Vue 模板进行编译。如果试图使用 v-html 组合模板，可以重新考虑是否通过使用组件来替代。

• 示例：

<div id="app">
    <div v-html="html"></div>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            html:'<a href="http://www.baidu.com">百度</a>'
        }
    })
</script>

v-show

根据表达式之真假值，切换元素的 display CSS property。

v-if

根据表达式的值的 truthiness 来有条件地渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。如果元素是

v-for

基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：

<div v-for="item in items">
  {{ item.text }}
</div>

v-on

• 缩写：@
  绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。
• 示例：

<button v-on:click="doThis"></button>

<!-- 缩写 -->
<button @click="doThis"></button>

v-bind

• 缩写：:
• 用法：
  动态地绑定一个或多个 attribute，或一个组件 prop 到表达式。
• 示例：

<!-- 绑定一个 attribute -->
<img v-bind:src="imageSrc">

<!-- 缩写 -->
<img :src="imageSrc">

<!-- 内联字符串拼接 -->
<img :src="'/path/to/images/' + fileName">

<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">

<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>

v-model

• 用法：
  在表单控件或者组件上创建双向绑定。

ref

ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件实例。

• 示例：
  点击按钮显示输入框中的信息

<div id="app">
    <input type="text" ref="input">
    <button @click="showMsg">提示</button>
</div>
<script>
    new Vue({
        el: '#app',
        data: {
        },
        methods: {
            showMsg() {
                console.log(this.$refs.input.value)
            }
        }
    })
</script>

自定义指令

除了内置指令外，Vue 也允许注册自定义指令。

• 示例：
  将一个字符串显示为大写或小写形式。

<div id="app">
    <div v-text="msg"></div>
    <div v-upper-text="msg"></div>
    <div v-lower-text="msg"></div>
</div>
<script>
    //注册一个全局自定义指令 `v-upper-text`
    Vue.directive('upper-text',(el, binding)=>{
        el.innerText = binding.value.toUpperCase()
    })
    new Vue({
        el: '#app',
        data: {
            msg:'Hello,World',
        },
        //如果想注册局部指令，组件中也接受一个 directives 的选项
        directives:{
            'lower-text':(el, binding)=>{
                el.innerText = binding.value.toLowerCase()
            }
        }
    })
</script>

显示效果：

Hello,World
HELLO,WORLD
hello,world