一 Vue简介

• 基于JavaScript框架
• 简化DOM操作
• 响应式数据驱动

Vue学习的前提：掌握HTML、Css、JavaScript

二 Vue基础

第一个Vue程序

官方文档 https://cn.vuejs.org/

1、编写一个.html文件，引入vue.js

或者

2、Html代码

    
    


    

        {{ message }}
    

el：挂载点

• 类型：string | Element

• 限制：只在由new创建的实例中遵守

• 详细：提供一个在页面上已存在的DOM元素作为Vue实例的挂载目标。可以是CSS选择器，也可以是一个HTMLElement实例。

• Vue实例的作用范围：Vue会管理el选项命中的元素及其内部的后代

• 选择器的使用：可以使用其他选择器，但是建议使用ID选择器

• 可以设置的BOM元素：可以使用其他的双标签，但是不能使用HTML和BODY

data：数据对象

• Vue中用到的数据定义在data中
• data中可以写复杂类型的数据
• 渲染复杂类型数据时，遵守js的语法即可
• 实例代码

    

        {{ message }}
        
{{school.name}}  {{school.ip}}
        

            
{{city[0]}}
            
{{city[1]}}
            
{{city[2]}}
            
        
    
   

• 页面效果
  

三 本地应用

• 使用Vue开发常用的页面效果

• 使用Vue指令获取元素，操控元素

内容绑定，事件绑定

• v-text指令：
  • 设置标签的文本值（textContent）
  • 默认写法会替代全部内容，使用差值表达式{{}}替代指定内容

    
    

	
        
        
海南

        
        
海南    {{message+'!!'}}
    


       

• v-html指令
  • 设置标签的innerHTML
  • 内容中有html结构会被解析为标签
  • v-text指令无论内容是什么，只会解析为文本
  • 解析文本使用v-text，需要解析html结构使用v-html

• v-on指令
  • 为元素绑定事件
  • 事件名不需要写on
  • 指令可以简写为@
  • 绑定的方法定义在methods属性中
  • 方法内部通过this关键字可以访问定义在data中的数据
  • 常用事件可以参考：

    

        
        
        
        
{{study}}
    
	
    

• 计数器案例

    

        -
        {{sum}}
        +
    

小结：

1. 创建vue计数器示例时：el(挂载点)、data(数据)、methods(方法)
2. v-on指令的作用是绑定事件，简写为@
3. 方法中通过this，关键字获取data中的数据
4. v-text指令的作用是：设置元素的文本值，简写为{{}}

显示切换，属性绑定

• v-show指令
  • 作用：根据真假切换元素的显示状态
  • 原理：修改元素的display，实现显示隐藏（操纵的是样式）
  • 指令后面的内容，最终都会解析为布尔值
  • 值为true元素显示，值为false元素隐藏

• v-if指令
  • 作用：根据表达式的真假切换元素的显示状态
  • 本质：通过操纵dom元素来切换显示状态
  • 表达式的值为true，元素存在于dom树中，为false，从dom树中移除
  • 频繁的切换使用v-show，反之用v-if，前者的切换消耗小

    

        v-if演示
        
v-if演示
        
v-shows 演示
        
v-if 表达式演示
      
    

• v-bind
  • 作用：为元素绑定属性（比如：src,title,calss）
  • 用法：v-bind:属性名
  • 简写的话可以省略v-bind，只保留:属性名
  • 需要动态的增删class，建议使用对象的方式

• 图片切换案例

    

        
        上一张
        下一张      
    

列表循环，表单元素绑定

• v-for指令
  • 作用：根据数据生成列表结构
  • 语法：(item,index) in 数据，item表示每一项数据，index表示索引，这两个名字可以自定义
  • 数组经常和v-for结合使用
  • item和index可以结合其他指令一起使用
  • 数组长度的更新会同步到页面上，是响应式的

    

        添加数据
        移除数据
        

            

                {{index+1}}海南各地：{{item}}
            
        
        
{{item.name}}
    

• v-on补充
  • 事件绑定大的方法写成函数调用的形式，可以传入自定义参数
  • 定义方法时需要定义形参来接收传入的实参
  • 事件的后面跟上.修饰符可以对事件进行限制
  • 如.enter可以限制触发的按键为回车
  • 事件修饰符有很多种
  • 可以参考文档 https://cn.vuejs.org/v2/api/#v-on

• v-model指令
  • v-model指令的作用是便捷的设置和获取表单元素的值
  • 绑定的数据会和表单元素值相关联
  • 绑定的数据和表单元素的值是双向绑定的

    

         
       
       
{{ message }}
    
    
    
    

• 记事本小案例
  • 实现增、删、清空、统计、隐藏

    
    

        
        

            
记事本小案例
            
        
        
        

            

                

                    {{index + 1}}.
                    {{item}}
                    x
                
            
        
        
    
    
    
    

页面效果