初识Vue(3)

​
​

活动地址：CSDN21天学习挑战赛

1、过滤器的使用和定有

定义：过滤器就是要将需要显示的书进行特定的格式化后再显示（适合一些简单的逻辑处理）

定义一个过滤器有两种方式：局部过滤器，全局过滤器

1、全局过滤器的定义

<p>{{content | filter}}</p>

<script>
	Vue.filter("filterName",function(value){
    >逻辑处理...
    return 处理结果
})
const vm = newVue({})
</script>

2、局部过滤器的定义

const vm = newVue({
    filters:{
        mySlice:function(value){
            return value.slice(0,4)
        }
    }
})

// 插值语法实现
<p>{{content | filter}}</p>
//指令语法实现
<h1 v-bind:class="属性名 | mySlice"></h1>

注意：全局过滤器的配置必须在vm实例化之前创建，并且不会改变源数据，而是产生新的参数

使用：通过配合插值语法或者v-bind指令语法使用，其中 【 | 】的管道符 代表调用 过滤器；过滤器的返回值将会把插值语法中定义的内容全部替换

3、过滤器的串联：

多个过滤器可以串联使用，并且将会分层只有 执行完前面的过滤器才会再执行后面的内容

<p>{{content | filter | filter2}}</p>

过滤器执行时接收一个参数，用于操作数据。管道符前面的那个数据就会作为第一个参数

如果需要接收更多参数只需调用时在括号中写入,注意定义过滤器的地方也需要加上哦

<p>{{content | filter(value2)}}</p>

4、内容回顾-形参默认值

// 首先定义一个函数
function fn(value,value2=10){
    return value+value2
}
fn(5) // 调用定义好的函数 只传入一个参数
>>> 15 返回值
fn(5,5) // 再次调用 传入两个参数
>>> 10

在代码中我们连续调用 两次fn()函数，但是传入的参数个数不一样，但是依旧正常运行

引文使用了形参默认值，当形参接收到了传入的参数，则按照传入的参数执行代码，否则按照定义好的参数执行代码

2、内置指令

1、指令回顾

v-on 绑定点击事件
v-bind 单向绑定属性
v-model 双向绑定数据
v-if-else-if 条件渲染
v-show 条件渲染
v-for 列表遍历

2、v-text指令

<p v-text="newContent"> 
    原本的内容
</p>

data{
	newContent:"新的内容"
}

作用：向其所在的文本节点中渲染文本

注意：使用该指令获取到的新内容将会替换掉使用标签的旧文本，而插值语法不会

3、v-html指令

<p v-html="newContent"> 
    原本的内容
</p>

data{
	newContent:"<h1>你好</h1>"
}

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

与插值语法的区别:

• v-html和v-text类似会替换掉节点中的其他内容 而插值语法不会
• v-html可以识别html结构

严重注意：

v-html 存在安全问题

• 1、在网站中动态渲染html是非常危险的，容易导致xss攻击
• 一定要在可行的内容上使用v-html，永远不要用在用户提交模块上

4、v-cloak指令

该指令是一个特殊指令 他是不存在值的

当Vue实例创建将完毕并接管容器后，会将该指令删除

可以配合css样式的属性选择器：搭配display:none可以解决网速慢时请求script标签时间过长 页面展出 {{xxx}} 的问题

属性选择器

[v-cloak]{} 通过[] 选定即可

5、v-once指令

该指令与v-cloak类似是一个特殊指令:不存在值的

v-once所在节点的数据动态渲染后，便会视为静态类容

以后的数据改变都不会引起v-once所在的结构发生变化，可用于优化性能

<p v-once>n值的初识值为:{{n}}</p>
<p>n当前值为:{{n}}</p>
<button v-on:click="n++">点我n++</button>

6、v-pre指令

该指令也时一个特殊指令 不存在值

该指令需要慎用 ：使用之后他会使当前节点跳过vue的模板解析，用户输入什么样子它就是什么样子

改指令可以用于没有使用指令语法和插值语法的标签，从而加快Vue编译速度

3、自定义指令

自定义指令通过 vm下的directives属性进行定义

1、简写版自定义指令

directives:{
	big(elememt,binding){
		 element.innerText=binding.value*10
	}
}

参数解析：

重要参数有两个

element 该参数时调用该指令节点的真实的DOM元素=当前节点的html标签

binding 该参数为一个对象 为调用该指令时传入的值

因此我们可以直接操纵 节点的DOM元素改变器内容

指令什么时候进行调用呢?

指令和值第一次成功建立关系 进行绑定时会进行第一次调用

模板一旦进行重新解析 指令就会重新调用

2、完整版自定义指令

directives{
	//对象式_自定义函数
    flbind:{
        // 在内存编译时自动调用
        bind (el, binding, vnode) {
          el.value=binding.value
        },
        // 编译完成后 将内容渲染到页面时自动调用
        inserted (el, binding, vnode) {
            el.focus() //使当前节点获取焦点
        },
        // 重新解析模板时 自动调用
        update (el, binding, vnode, oldVnode) {
            el.value=binding.value
            el.focus() //使当前节点获取焦点
        },  
    }
}

完整版自定义指令中,一个指令中存在三个方法

bind : 在内存中编译 时调用

inserted : 编译完成 渲染到页面时调用

update : 每次重新解析模板时调用

2、全局自定义指令

首先内容回顾 全局过滤器

Vue.filter("过滤器的名字",function(value){逻辑})

注意过滤器中处理逻辑的返回值就是 渲染在页面中的内容

通过观察过滤器（ filters ）和自定义指令（ directives ）可以发现

在局部定义时 他们的名值最后都存在 " s " 代表一次性可以定义多个内容

而全局定义中的名称没有s也代表着一次性只能定义一个，

全局自定义指令的定义——简写版本

Vue.directive("fbind",function(){"处理逻辑"})

全局自定义指令的定义——完整版本

Vue.directive("fbind",{
    bind(){处理逻辑},
    inserted(){处理逻辑},
    update(){处理逻辑} })

3、自定义指令注意事项

1、指令在directives属性中定义时 不用加 " v- ",但是在使用时需要加

2、如果指令的组成由多个单词组成，那么不管在定义时还是使用时都需要加上 ’ - ’ 进行单词之间的连接，不要用 "nameClass"这种命名

​