Vue.js学习（八）- 过滤器和指令

过滤器

定义：对要显示的数据进行特点格式后显示(适用于一些简单的逻辑处理)
语法：
    1. 注册过滤器，Vue.filter(name, callback)或new Vue{filters:{}}
    2. 使用方式，{{xx | 过滤器名}} 或 v-bind:属性=“xx | 过滤器名”
备注：
     1. 过滤器默认会接收当前需要过滤的值，不管参数上写不写都接收。使用的时候 {{xx | filterName(xx, param)}} 与 {{xx | filterName(param)}}一样
     2. 多个过滤可以串联，{{xx | filterName1 | filterName2}}，xx传入filterName1中作为参数使用，filterName1的返回值作为filterName2的参数使用
     3. fliter过滤器并没有改变原数据，产生了新的数据

内置指令

指令名称	是否有指令值	简写	指令说明	示例
v-bind	是	:value=“xxx”	单向数据绑定，简写为:xxx	v-bind:value=“xxx” / :value=“xxx”
v-model	是	v-model=“xxx”	双向数据绑定，只能绑定可输入表单的value值	v-model:value=“xxx” / v-model=“xxx”
v-for=“(value, index) in object/arr/str/…”	是	无	遍历数据，直接在需要循环生成的html元素上添加，会自动根据遍历情况渲染表单	v-for=“(value, index) in object”
v-on	是	@xxx	绑定事件，简写为@	v-on:click=“xxx” \ @click=xxx
v-if/v-else-if/v-else	v-if和v-else-if有，v-else没有	无	条件渲染，动态判断节点是否存在，注意需要连用，中间不能存在没有使用该指令的元素打断	v-if=“条件语句”、v-else-if=“条件语句”、v-else
v-show	是	无	条件渲染，动态判断节点是否显示，使用display进行隐藏和显示	v-show=“条件语句”
v-text	是	无	替换节点中的内容（不支持html格式）	v-text=“内容”
v-html	是	无	替换节点中的内容（支持html格式），存在安全性问题，容易受到XSS攻击	v-html=“内容”
v-cloak	否	无	没有值，本质上是一个特殊属性，Vue实例创建完毕接管容器之后，会删除该属性，配合css样式可以解决网速慢时页面展示出{{xxx}}的问题
v-once	否	无	没有值，所在节点在初次渲染后，就视为静态内容。以后数据改变不会引起v-once所在结构更新，可用于优化性能
v-pre	否	无	没有值，跳过其所在节点的编译过程，可利用其跳过没有使用指令语法、插值语法的节点，会加快编译

<div id="root">
   <div v-text="name"></div>
   <div v-html="name"></div>
    <hr>
   <h1>v-once指令</h2>
   <h2 v-once>初始化n值是{{n}}</h2>
   <h2>当前的n值是{{n}}</h2>
   <button @click="n++">点我n+1</button>
   <hr>

   <h1 v-pre>v-pre指令</h1>
   <h2>当前的m值是{{m}}</h2>
   <button @click="m++">点我n+1</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    // 创建Vue实例
    new Vue({
        el: '#root',    // el用于定义当前Vue实例为哪个容器服务，值通常为css选择器
        data:{
            name: "<h3>尚硅谷</h3>",
            n: 1,
            m: 1
        }
    });
</script>

自定义指令

自定义指令需要自己封装操作dom指令

1. 定义语法：
   1. 局部指令

new Vue({directives: {指令名: {bind(element, binding){}, inserted(element, binding) {}, update(element, binding) {} }} })
或
new Vue({ directives: 指令名:回调函数})

2. 全局指令

Vue.directive("指令名", {bind(element, binding){}, inserted(element, binding) {}, update(element, binding) {} }); 
或
Vue.directive("指令名", 回调函数);

2. 说明：
   bind：指令与元素成功绑定时执行
   inserted：指令所在元素被插入页面时
   update：指令所在模板被重新解析时
3. 备注：
   1. 指令定义时不加v-，使用时需要加v-
   2. 指令名如果是多个单词，使用kebab-case命名方式，不使用camelCase命名方式

<div id="root">
   <h2>当前的n值是：<span v-text="n"></span></h2>
   <h2>发达10倍后的n值是：<span v-big="n"></span></h2>
   <button @click="n++">点我n+1</button>
   <hr>
   <input type="text" name="" id="" v-fbind:value="n">
</div>
<script type="text/javascript">
    Vue.config.productionTip = false;
    // 全局指令
    /* Vue.directive("fbind", {
        // 指令与元素成功绑定时
        bind(element, binding) {
            element.value = binding.value;
        },
        // 指令所在元素被插入页面时
        inserted(element, binding) {
            element.focus();
        },
        // 指令所在模板被重新解析时
        update(element, binding) {
            element.value = binding.value;
            element.focus();
        }
    }); */

    // 创建Vue实例
    new Vue({
        el: '#root',    // el用于定义当前Vue实例为哪个容器服务，值通常为css选择器
        data:{
            n: 1
        },
        // 定义指令
        directives: {
            // element 真实元素，binding 绑定对象 关注其中value
            // 指令和元素成功绑定成功时调用
            // 指令所在模板被重新解析时
            big(element, binding) {
                // 此处的this都是window
                element.innerText = binding.value * 10
            },
            fbind: {
                // 指令与元素成功绑定时
                bind(element, binding) {
                    element.value = binding.value;
                },
                // 指令所在元素被插入页面时
                inserted(element, binding) {
                    element.focus();
                },
                // 指令所在模板被重新解析时
                update(element, binding) {
                    element.value = binding.value;
                    element.focus();
                }
            }
            // fbind(element, binding) {
            //     element.value = binding.value;
            //     element.focus();
            // }
        }
    });
</script>