Vue3学习笔记（3.0）

表达式会在当前活动实例的数据作用域下作为JavaScript被解析。有个限制就是，每个绑定就是，每个绑定只能包含单个表达式，所以下面的实例不会生效：

{{var a = 1}}  //语句，不是表达式


{{if (ok) {return message }}}   //控制流，不是三元表达式

指令

指令是带有v-前缀的特殊属性。

指令用于在表达式的值改变时，将某些行为应用到DOM上。如下例子：

    
test文本

在该实例中，v-if指令将根据表达式seen的值（TRUE或false）来决定是否插入p元素

另外还有其他指令，每个都有特殊的功能。例如，v-for指令可以绑定数组的数据来渲染一个项目列表：

    
    
    
    
    


    

        

            

                {{test.city}}
            

        
    

    

参数

参数在指令后以冒号指明。例如，v-bind指令被用来相应的更新HTML属性：

    
测试文本

在这里href是参数，告知v-bind指令将该元素的href属性与表达式url的值绑定。

另一个实例是v-on指令，它用于监听DOM事件：

 ... 

 ... 

 ...

在这里参数是监听的事件名。

修饰符

修饰符是以半角句号.指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。例如，.prevent修饰符告诉v-on指令对于触发的事件调用event.preventDefault():

用户输入

在input输入框中我们可以使用v-model指令来实现双向数据绑定：

    
    
    
    
    


    

        
{{message}}
        
    

    

 v-model指令用来在input、select、textarea、CheckBox、radio等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素值。

按钮的时间我们可以使用v-on监听事件，并对用户的输入进行响应。

以下实例在用户电机按钮后对字符串进行反转操作：

    
    
    
    
    


    

        
{{message}}
        
        两级反转