Vue入门

Vue入门

• Vue入门
  • 1.0、简介
  • 1.1、开发工具
  • 1.2、第一个Vue程序
  • 1.3、v-bind指令
  • 1.4、v-if指令
  • 1.5、v-for
  • 1.6、v-on
  • 1.7、数据双向绑定

1.0、简介

Vue的七大对象

1. el：Vue通过el绑定开始解析

2. data:将view（视图）中的数据抽象出来放在data中，里面一般是对象

3. template：用来设置模板，会替换页面元素

4. methods:逻辑处理，里面一般是Js方法

5. render：创建真正的Virtual Dom

6. computed：用于计算

7. watch：监听

   watch:function(new,old){}

   • 监听data中数据变化
   • 两个参数，一个返回新值，一个返回旧值

Vue是MVVM模式的实现者

• Model：模型层，指代JavaScriptpt对象
• View视图层，指dom
• ViewModel连接视图和数据的中间层

Vue的核心就是实现了DOM监听与数据绑定，所有的东西都是响应式的，控制台操作对象属性可以进行视图层的更新。

1.1、开发工具

Vscode

Hublider

Sublime

WebStrom

IDEA

1.2、第一个Vue程序

  
    
    
    
    
    
    
  
  
      
    
{{message}}
    
  

VM(ViewModle)双向绑定视图层和模型层![双向数据绑定]

1.3、v-bind指令

v-bind就是绑定一个元素

v-bind : 绑定对象 = "绑定对象的值"

    
    
    
    
    


    

        
        bilibili
    
    

1.4、v-if指令

v-if = "绑定元素"

  
    
    
    
    
    
  
  
    

      
YES
      
NO
    
    
  

v-if="元素名称===判断值"

  
    
    
    
    
    
  
  
    

      
张三
      
李四
      
王五不在家
    
    
  

1.5、v-for

v-for循环遍历数组元素

{{数组对象.数组元素名}}

    
    
    
    
    

    
    

        
        

            
            {{item.message}}
        
    
    

可以同时遍历出index

    
    
    
    
     


    

        
        
{{item.message}}--{{index}}　
    
    

1.6、v-on

v-on用于绑定事件

绑定事件

事件有哪些？

查询事件分类JQuery官网,在这里有庞大的JavaScript事件库

v-on：click = "方法名"

  
    
    
    
    
 
  
  
    

      click
    
    
  

@click = "方法名"

  
    
    
    
    
    
  
  
    

      click
    
    
  

1.7、数据双向绑定

v-model可以实时的获取数据，实现数据双向绑定

  
    
    
    
    
    
  
  
    

        输入文本：{{message}}
    
    
  

v-model事件实现选项

-

  
    
    
    
    
     
    
  
  
    

      A赏
      B赏
      
      
你选择了{{chose}}
      

          
          

      
    
    
  

v-model实现下拉框
---

  
    
    
    
    
    
  
  
    

      
      
        --人物选择--
        小月
        小红
        小雅
      
      
你选中了{{selectX}}

      
      
        
        none
        go
        back
        stay
      
      
      执行
    
    
  

注意：不设置value时，vue会自动绑定值value

如果有帮助到您可以收藏订阅哦~！