java之学习记录 5 - 2 - vue.js基本的使用（上）

Vue.js 是什么 ?

• Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计 为可以自底向上逐层应用.
• Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一 方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
• 自底向上逐层应用：作为渐进式框架要实现的目标就是方便项目增量开发(即插即用)。

我的第一个vue代码：

    
    
    
    
    
    
    


    
    

        
        {{name}}

        {{school.name}} - {{school.mobile}}

        

            
{{names[0]}}
            
{{names[1]}}
            
{{names[2]}}
        
    

    

        {{name}}
    

{{}}: 插值表达式

 

1. 插值表达式的作用 ?

• 通常用来获取Vue实例中定义的数据(data)
• 属性节点中 不能够使用插值表达式

2. el: 挂载点

• 1. el的作用 ?
  • 定义 Vue实例挂载的元素节点,表示vue接管该区域
• 2. Vue的作用范围是什么 ?
  • Vue会管理el选项命中的元素,及其内部元素
• 3. el选择挂载点时,是否可以使用其他选择器 ?
  • 可以,但是建议使用 ID选择器

• 4. 是否可以设置其他的DOM元素进行关联 ?
  • 可以但是建议选择DIV, 不能使用HTML和Body标签

vue常用指令：

1. v-text 指令

• 作用: 获取data数据, 设置标签的内容.
• 注意: 默认写法会替换全部内容,使用插值表达式{{}}可以替换指定内容.

    
    
    
    


    

        
        
{{message}}学习java

        
        
学习java

        
        

        

    

2. v-html 指令

• 作用: 设置元素的 innerHTML (可以向元素中写入新的标签)

    
    
    
    
    


    

        {{message}}
        

        

        
        

    

3. v-on 指令

• 作用: 为元素绑定事件, 比如: v-on:click,可以简写为 @click="方法"
• 绑定的方法定义在 VUE实例的, method属性中

    
    
    
    


    

        
        
        
        
        
        
        
        
{{food}}
    

4. 计数器案例

• 1) 编码步骤
  • 1. data中定义数据: 比如 num 值为1
  • 2. methods中添加两个方法: 比如add(递增) ,sub(递减)
  • 3. 使用{{}} 将num设置给 span标签
  • 4. 使用v-on 将add,sub 分别绑定给 + ,- 按钮
  • 5. 累加到10 停止
  • 6. 递减到0 停止
• 2) 案例演示

    
    
    
    
    


    

        
        

            
            {{num}}
            
        
    

5. v-show 指令

• 作用: v-show指令, 根据真假值,切换元素的显示状态

6. v-if 指令

• 作用: 根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )

7. v-bind 指令

• 作用: 设置元素的属性 （比如:src,title,class）

    
    
    
    


    
    

        
        
        
        
        
        
        
v-bind指令
    

8. v-for 指令

• 作用: 根据数据生成列表结构

    
    
    
    


    
    

        
        
        

            
            

                {{index + 1}}城市：{{item}}
            
        
        
        

            {{p.name}}
        
    

9. v-on 指令补充

• 1. 传递自定义参数 : 函数调用传参
• 2. 事件修饰符: 对事件触发的方式进行限制

10. MVVM 模式

• MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式.
• MVVM模式将页面,分层了 M 、V、和VM ,解释为：
  • Model: 负责数据存储
  • View: 负责页面展示
  • View Model: 负责业务逻辑处理（比如Ajax请求等），对数据进行加工后交给视图展示

    
    
    
    


    
    

        
        
{{name}}
    

• 首先，我们将上图中的DOM Listeners和Data Bindings看作两个工具，它们是实现双向绑定的关键。
• 从View侧看，ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化，如果有变化，则更改Model中的数据；
• 从Model侧看，当我们更新Model中的数据时，Data Bindings工具会帮我们更新页面中的DOM元素。
• MVVM的思想,主要是为了让我们的开发更加的方便,因为MVVM提供了数据的双向绑定

11. v-mode 指令

 

作用 : 获取和设置表单元素的值 ( 实现双向数据绑定 )

• 双向数据绑定
  • 单向绑定: 就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。
  • 双向绑定: 用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定。
• 什么情况下用户可以更新View呢？
  • 填写表单就是一个最直接的例子。当用户填写表单时，View的状态就被更新了，如果此时MVVM框架可以自动更新Model的状态，那就相当于我们把Model和View做了双向绑定：

    
    
    
    


    
    

        
        
        

        
        
        
{{message}}