Vue基本语法与数据绑定（单向，双向）

Vue的语法

1.插值语法

格式：

{{xxx}},xxx是js表达式，可以直接读取到data中的所有区域

代码示例:

    
    
    



    插值语法的基本使用：{{val}}

2.指令语法

注意： vue中的所有指令都是以“v-”开头的

代码示例：

    
    
    


指令语法的使用



    点我跳转，我是百度
    

    点我跳转，我是搜狗
    

    点我跳转,我是bing
    

 

数据绑定

Vue有两种数据绑定方式：
1. 单向绑定： v-bind 数据只能从data流向⻚面。
2. 双向绑定： v-model数据不仅能从data流向⻚面，也能从⻚面流向data。
 

单向绑定代码示例：

    
    
    



    
    单向绑定：
    


    
    单向绑定：
    

使用vue插件改变值看看：

值改变了，数据驱动视图

我们在看看视图能否驱动数据：

 可以明显看到单向数据绑定，视图驱动不了数据 ，但是数据能够驱动视图

现在我们看一下双向绑定：

代码示例：

    
    
    



    
    双向绑定：
    

    
    双向绑定：
    

使用vue插件调试看看：

数据驱动视图：

视图驱动数据：

• 双向绑定一般都应用在表单类元素上(如:input、select等)
• v-model:value可以简写为v-model，因为v-model默认收集的就是value值。