Vue的基本使用

Vue的基本使用

Vue的指令与过滤器

指令的概念

指令（Directives）是vue为开发者提供的模板语法，用于辅助开发者渲染页面的基本结构。

指令的分类

vue中的指令按照不同的用途可以分为6大类：

• 内容渲染指令
• 属性绑定指定
• 事件绑定指令
• 双向绑定指令
• 条件渲染指令
• 列表渲染指令

指令是vue开发中最基础、最常用、最简单的知识点

内容渲染指令

内容渲染指令用来辅助开发者渲染DOM元素的文本内容。

常用的内容渲染指令有如下3个：

• v-text
• {{}}
• v-html

v-text

会覆盖标签中原有的内容

插值表达式

也就是{{}}

专门又来解决v-text会覆盖默认文本的问题

v-html

如果要把包含html标签的字符串渲染为页面的HTML元素，则需要用到v-html这个指令。

在 vue 提供的模板渲染语法中，除了支持绑定简单的数据值之外，还支持JavaScript表达式的运算。

{{ number + 1 }}

{{ ok ? 'YES' : 'NO' }}

{{ message.split('').reverse().join('') }}

属性绑定指令

插值表达是只能用在内容节点而不能用在属性节点。

如果需要为元素的属性动态绑定属性值，则需要用到v-bind属性绑定指令。

v-bind 可以简写为 :

绑定的内容如果需要拼接，则字符串的外面应该包裹单引号

v-bind会作为js表达式被解析

事件绑定指令

vue 提供了 v-on事件绑定指令，用来辅助程序员为 DOM 元素绑定事件监听。

在methods中定义事件处理函数，格式如下：

methods: {
    add: funtion() {
        
    }
}

其简写形式：

methods: {
    add() {}
}

在methods方法中，可以使用创建的实例对象（vm或this）来访问数据源。

在绑定事件处理函数的时候，可以使用()传递参数

v-on:可以简写为@

事件对象$event

事件修饰符

在事件处理函数中调用event.preventDefault()或event.stopPropagation()是非常常见的需求。因此，vue提供了时间修饰符的概念，来辅助程序员更方便地对事件的出发进行控制。

按键修饰符

在监听键盘事件时，我们经常需要判断详细的按键。此时，可以为键盘相关的事件添加按键修饰符。

双向数据绑定指令

vue提供了v-model双向数据绑定指令，用来辅助开发者不操作DOM的前提下，快速获取表单的数据。

v-model只能和一些表单元素使用才有意义

    
    
    
    


    

        
        
用户名：{{username}}
    

    
    
    

指令修饰符

为了方便对用户输入的内容进行处理，vue为v-model指令提供了3个修饰符，分别是：

    
    
    
    


    

        

            
.number
             +  = {{num1 + num2}}
        

        

            
.trim
            
            获取用户名
        

        

            
.lazy
            
data不会实时改变，当输入框失去焦点时，数据同步
            
        
    

    
    
    

条件渲染指令

v-if 会动态添加或删除元素

v-show 使用display: none来隐藏元素

v-if的配套指令

• v-else-if
• v-else

    
    
    
    


    

        

            
v-if和v-show的区别
            
v-if 的条件渲染
            
v-show 的条件渲染
        

        

            
v-if的配套语法
            
优秀
            
良好
            
一般
            
差
        
    

    
    
    

列表渲染指令

vue提供了v-for列表渲染指令，用来辅助开发者基于一个数组来循环渲染一个列表结构。

v-for指令需要使用item in items形式的特殊语法

    
    
    
    


    

        

            

                

                    
序号
                    
id
                    
姓名
                
            
            

                

                    
{{index + 1}}
                    
{{item.id}}
                    
{{item.name}}
                
            
        
    

    
    
    

官方简易：只要用到了v-for指令，那么一定要绑定一个:key属性。而且，尽量把id作为key的值。官方对key的值类型也是有要求的，只能是字符串或者数字类型。

过滤器

过滤器(Filters)是Vue为开发者提供的功能，常用于文本的格式化。过滤器可以用在两个地方：插值表达式和v-bind属性绑定

过滤器应该在JavaScript表达式的尾部，由“管道符”进行调用

私有过滤器

一般定义的，在filters节点下定义的过滤器都为私有过滤器

公有过滤器

独立于每个vm实例之外

Vue.filter()方法接收两个参数：

• 全局过滤器的名字
• 全局过滤器的处理函数

如果全局过滤器和私有过滤器名字重复，则按照就近原则，优先使用私有过滤器

连续调用多个过滤器

过滤器可以连续调用多个

过滤器传参

    {{message | filterA(arg1, arg2)}}


Vue.filter('filterA', (msg, arg1, arg2) => {
	// 过滤器代码逻辑
})

    
    
    
    


    

        
过滤器
        
原字符串：{{message}}
        
过滤后的字符串：{{message | capitalize}}
    

    

        
公有过滤器
        
原字符串：{{ message }}
        
过滤后的字符串：{{message | capitalize}}