Vue全家桶入门基础教程

顺亿

2026-10-28 • 👁 0人浏览过

目录 1. Vue概述 2. Vue的基本使用 2.1 传统开发模式对比 2.2 Vue.js之HelloWorld基本步骤 2.3 Vue.js之HelloWorld细节分析 3. Vue 模板语法 3.1 模板语法概述 3.2 指令 3.3 双向数据绑定案例解析: 3.4 事件绑定 3.5 属性绑定 3.6 样式绑定 3.7 分支循环结构 3.8 v-model、v-on、v-bind使用说明 4. 基础案例:Tab选项卡 5. Vue常用特性 5.1 常用特性概览 5.2 表单操作 5.3 自定义指令 5.4 计算属性 5.5 侦听器 5.6 过滤器 5.7 Vue生命周期 6.综合案例:图书管理案例:补充知识 1. Vue概述 Vue (读音 /vjuː/，类似于 view ) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。 渐进式 : 声明式渲染→组件系统→客户端路由→集中式状态管理→项目构建可以使用其中的一个或者多个 优点 : 易用：熟悉HTML，CSS.JavaScript知识后，可快速上手Vue 灵活：在一个库和一套完整框架之间自如伸缩高效：20kB运行大小，超快虚拟DOM 2. Vue的基本使用 2.1 传统开发模式对比


//原生JS


//jQuery

2.2 Vue.js之HelloWorld基本步骤引入Vue的方法: 1.下载Vue.js，然后在引入 2.使用CDN方法。 Vue的基本使用步骤 : 1、需要提供标签用于填充数据 2、引入Vue.js库文件 3、可以使用vue的语法做功能了 4、把vue提供的数据填充到标签里面


//1.HelloWorld.html




  
  



  
      //插值表达式
    {{num}} 
    
  
 //引入vue

2.3 Vue.js之HelloWorld细节分析 1. 实例参数分析 el：元素的挂载位置（值可以是CSS选择器或者DOM元素）关联起来 data：模型数据（值是一个对象） methods，该属性用于在Vue对象中定义方法。 2.插值表达式用法将数据填充到HTML标签中插值表达式支持基本的计算操作 3. Vue代码运行原理分析概述编译过程的概念（Vue语法经过Vue框架编译成原生JS语法,才能够被浏览器执行） 3. Vue 模板语法 3.1 模板语法概述 前端渲染 :把数据填充到HTML标签中 前端渲染方式 : 原生js拼接字符串使用前端模板引擎使用vue特有的模板语法(推荐) 原生js拼接字符串 基本上就是将数据以字符串的方式拼接到HTML标签中。缺点：不同开发人员的代码风格差别很大，随着业务的复杂，后期的维护变得逐渐困难起来。 使用前端模板引擎 是基于模板引擎art-template的一段代码，与拼接字符串相比，代码明显规范了很多，它拥有自己的一套模板语法规则。优点：大家都遵循同样的规则写代码，代码可读性明显提高了，方便后期的维护。缺点：没有专门提供事件机制。 插值表达式 {{变量}} 使用'mustache'语法 { { msg }}（双花括号） mustache 标签将会被替换为 data 对象上对应的 msg 属性的值。只要绑定的数据对象上的 msg 属性发生改变，插值内容也会随之更新。



      
       {{ msg }}

模板语法概述 插值表达式指令事件绑定属性绑定样式绑定分支循环结构 3.2 指令 1.什么是指令? 自定义属性：如在html5中定义，属性均可随意命名。指令的本质就是自定义属性指令的格式：以v-开始（比如：v-cloak） 2.v-cloak指令用法插值表达式存在的问题：“闪动” 如何解决该问题：使用v-cloak指令


v-cloak指令的用法
  1、提供样式
   属性选择器
    [v-cloak]{
      display: none;
    }
  2、在插值表达式所在的标签中添加v-cloak指令

背后的原理：先通过样式隐藏内容，然后在内存中进行值的替换，替换好之后再显示最终的结果


//02-指令v-cloak的用法.html



  
  Document
  


  
    {{msg}}

3 .数据绑定指令 v-text填充纯文本用于将数据填充到标签中，作用于插值表达式类似，但是没有闪动问题 v-html填充HTML片段用于将HTML片段填充到标签中，但是可能有安全问题 v-pre填充原始信息显示原始信息，跳过编译过程（分析编译过程）


//03-数据填充相关3个指令用法.html



  
  Document


  
    {{msg}}
    
    
    {{msg}}

4.数据响应式如何理解响应式 html5中的响应式（屏幕尺寸的变化导致样式的变化）数据的响应式（数据的变化导致页面内容的变化）数据绑定：将数据填充到标签中,默认是响应式的 v-once只编译一次，显示内容之后不再具有响应式功能 v-once的应用场景：如果显示的信息后续不需要再修改，可以使用v-once提高性能。


//04-指令v-once的用法.html



  
  Document


  
    {{message}}
    {{message}}

3.3 双向数据绑定 1.什么是双向数据绑定？ 2.双向数据绑定分析 Vue中使用 v-mode l指令来实现 标签内容的绑定(双向绑定) .如表单元素和数据的双向绑定 v-model只能用于表单类型，就是输入性控件，其他控件不能用，用v-bind


//05.双向数据绑定.html
  
  
  
    
    Document
  
  
    
      {{msg}}

案例解析: 当我们在输入框输入内容时,因为input中的v-model绑定了msg，所以会实时将输入的内容传递给msg，msg发生改变。当msg发生改变时，因为上面我们使用Mustache语法，将msg的值插入到DOM中，所以DOM会发生响应的改变。 3.MVVM设计思想 MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开 View层：视图层在我们前端开发中，通常就是DOM层。主要的作用是给用户展示各种信息。 Model层：数据层数据可能是我们固定的死数据，更多的是来自我们服务器，从网络上请求下来的数据。 VueModel层：视图模型层视图模型层是View和Model沟通的桥梁。一方面它通过Data Binding（数据绑定），将Model的改变实时的反应到View中另一方面它通过DOM Listener（DOM监听），当DOM发生一些事件(点击、滚动、touch等)时，可以监听到，并在需要的情况下改变对应的Data。 3.4 事件绑定 1.Vue如何处理事件？ v-on指令用法: 用于绑定HTML事件 ,如鼠标点击事件当前button绑定鼠标点击事件，点击则调用doSomething方法在这里doSomething() 是一个函数,可以写在methods的方法中,供该标签调用.

v-on语法糖(简写形式)@


//06-事件基本用法.html




  
  Document



  
    {{num}}
    
        //4种都可以实现

2.事件函数的调用方式直接绑定函数名称

调用函数

3.事件函数参数传递事件函数参数传递


//07-事件函数传参.html




    
    Document



    
        {{num}}

4.事件修饰符 .stop 阻止冒泡


跳转

.prevent阻止默认行为


跳转


//08-事件修饰符.html




  
  Document



  
    {{num}}
    
      
    
    
      百度

未加事件修饰符: 加事件修饰符: 5.按键修饰符 .enter 回车键

.delete删除键


//09-按键修饰符.html



  
  Document


  
    
      
        用户名： 
      
      
        密码：

6.自定义按键修饰符全局config.keyCodes 对象规则：自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应event.keyCode值


Vue.config.keyCodes.f1 = 112


//10-自定义事件修饰符.html

案例:简单计算器 需求 ：实现简单的加法计算，分别输入数值a和数值，点击计算按钮，结果显示在下面。 步骤 : 通过v-model指令实现数值a和数值b的绑定给计算按钮绑定事件，实现计算逻辑将计算结果绑定到对应位置






  
  
  



  
    简单计算器
    数值A:
    数值B:
    
    计算结果:

3.5 属性绑定 1.Vue如何动态处理属性？ v-bind是处理HTML中的标签属性的 ，例如就是一个标签，也是一个标签，我们绑定上的src进行动态赋值。 v-bind指令用法


跳转

缩写形式


跳转


//12-属性绑定基本用法.html

 

 
   
   
 

 
   
     百度

2.v-model的低层实现原理分析不使用v-model也可以实现双向绑定


//13-指令v-model的本质.html



  
  Document


  
    {{msg}}

3.6 样式绑定 1. class样式处理对象语法

数组语法


//14-样式绑定之class绑定对象用法.html




  
  Document
  



  
    测试样式


//15-样式绑定之class绑定数组用法.html



  
  Document
  


  
    测试样式


//16-样式绑定之class绑定3个细节用法.html



  
  Document
  


  
    测试样式

2. style样式处理对象语法

数组语法


//17-样式绑定之style绑定用法.html




  
  Document

3.7 分支循环结构 1.分支结构 v-if v-else v-else-if v-show 2.v-if与v-show的区别 v-if控制元素是否渲染到页面 v-show控制元素是否显示（已经渲染到了页面） v-if当条件为false时，压根不会有对应的元素在DOM中。v-show当条件为false时，仅仅是将元素的display属性设置为none而已当需要在显示与隐藏之间切换很频繁时，使用v-show.当只有一次切换时，通过使用v-if


//18-分支结构.html



  
  Document
  


  
    优秀
    良好
    一般
    比较差
    测试v-show

3.循环结构 v-for遍历数组 v-for的语法类似于JavaScript中的for循环。格式如下：item in items的形式。其中item为自定义属性（改为abc都行）,items为需要遍历的数据,index为索引


{{item}}
{{item}} + '---' +{{index}}

key的作用：帮助Vue区分不同的元素对开发功能没有效果，仅仅帮助vue提高性能,要确保key的唯一性


{{item}} + '---' {{index}}


//19-循环结构-遍历数组.html



  
  Document
  


  
    水果列表
    
      {{item}}
      {{item + '---' + index}}
      
        {{item.ename}}
        -----
        {{item.cname}}

4. 循环结构 v-for遍历对象


 value值 key键 index索引

v-if和v-for结合使用






  
  Document




  
    {{value + '---' + key + '---' + index}}

3.8 v-model、v-on、v-bind使用说明 v-model v-model 指令来实现 表单标签内容的双向绑定 .如表单元素和数据的双向绑定 v-model只能用于表单类型，就是输入性控件，其他控件不能用，用v-bind 一个input标签绑定了msg这个变量，那么只要input输入发生改变，msg的值也就跟着改变，反过来也是一样，这种绑定是双向绑定

v-on v-on 指令用法: 用于绑定HTML事件 ,如鼠标点击事件当前button绑定鼠标点击事件，点击则调用doSomething方法

v-bind v-bind是处理HTML中的标签属性的 ，默认情况下标签自带属性的值是固定的，在为了能够动态的给这些属性添加值，可以使用v-bind 例如是一个标签，我们绑定上的src进行动态赋值。

4. 基础案例:Tab选项卡步骤: 1.实现静态UI效果用传统的方式实现标签结构和样式 2.基于数据重构UI效果将静态的结构和样式重构为基于Vue模板语法的形式处理事件绑定和js控制逻辑 3.声明式编程模板的结构和最终显示的效果基本一致


//21-选项卡案例.html




  
  Document
  



  
    
      
        
          {{item.title}}

5. Vue常用特性 5.1 常用特性概览表单操作自定义指令计算属性过滤器侦听器生命周期 5.2 表单操作 1.基于Vue的表单操作 Input单行文本 textarea多行文 select 下拉多选 radio 单选框 checkbox多选框


//01-表单基本操作.html


  
    
    Document
    
  
  
    
      
        
          姓名：
          
            
          
        
        
          性别：
          
            
            男
            
            女
          
        
        
          爱好：
          
          篮球
          
          唱歌
          
          写代码
        
        
          职业：
          
        
        
          个人简介：

2.表单域修饰符 number：表单输入的字符串转化为数值 trim：去掉开始和结尾的空格 lazy：将input事件切换为change事件 input事件立即触发 change事件失去焦点触发




//02-表单域修饰符用法.html




  
  Document



  
    
    
    
    {{msg}}
    
  
  
  




5.3 自定义指令
1.为何需要自定义指令?
内置指令不满足需求
2.自定义指令的语法规则(获取元素焦点)

//注册一个全局自定义指令'v-focus' 
//focus为指令名称  调用时加v-
Vue.directive('focus'{
    //当被绑定非的元素插入到DOM中时调用
	inserted:function(el){
	//获取元素的焦点
	el.focus()
	}
})
3.自定义指令用法


一个指令定义对象可以提供如下几个
钩子函数
（均为可选）：
bind：只调用一次，指令第一次绑定到元素时调用，在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用（仅保证父节点存在，但不一定已被插入文档中）。
指令钩子函数会被传入以下参数：
e1：指令所绑定的元素，可以用来直接操作DOM.
binding：一个对象，包含以下属性：
name：指令名，不包括v-前缀。
value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2
oldvalue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否改变都可用。

//03-自定义指令基本用法.html




  
  Document



  
    
    
  
  
  




4.带参数的自定义指令(改变元素背景色)

Vue.directive('color',{
	inserted:function(el,binding){
		el.style.backgroundColor =binding.value.color;
	}
})
5.指令的用法



//04-带参数的自定义指令.html




  
  



  
    
  
  
  




6.局部指令:只能在本组件中使用

directives:{
	focus:{
	//指令的定义
	inserted:function(el){
	el.focus()
		}
	}
}




  
  Document


  
    
    
  
  
  



5.4 计算属性
1.为何需要计算属性?
Vue中的
computed
属性被称为计算属性,计算属性是写在实例的computed选项
表达式的计算逻辑可能会比较复杂,使用计算属性可以使模板内容更加简介
2.计算属性的用法

computed: {
        reverseString: function(){
          return this.msg.split('').reverse().join('');
        }
 }

//06-计算属性基本用法.html




  
  Document



  
    {{msg}}
    {{reverseString}}
  
  
  




3.计算属性和方法的区别
计算属性是基于它们的依赖进行缓存,如果多次使用时，计算属性只会调用一次,性能上计算属性明显比methods好,如果依赖改变则重新缓存
方法不缓存

//07-计算属性与方法的区别.html




  
  Document



  
    {{reverseString}}
    {{reverseString}}
    {{reverseMessage()}}
    {{reverseMessage()}}
  
  
  




5.5 侦听器

1. 侦听器的应用场景
数据变化时执行异步或开销较大(比较耗时)的操作
2.侦听器的用法

watch: {
        firstName: function (val) {
          this.fullName = val + ' ' + this.lastName;
        },
        LastName: function (val) {
          this.fullName = this.firstName + ' ' + val;
        },
    }

//08-侦听器基本用法.html




  
  Document



  
    
      名：
      
        
      
    
    
      姓：
      
        
      
    
    {{fullName}}
  
  
  




案例:验证用户名是否可用
需求：输入框中输入姓名，失去焦点时验证是否存在，如果已经存在，提示从新输入，如果不存在，提示可以用。
需求分析:
通过v-model实现数据绑定
需要提供提示信息
需要侦听器监听输入信息的变化
需要修改触发的事件
侦听器
1、采用侦听器监听用户名的变化
2、调用后台接口进行验证
3、根据验证的结果调整提示信息

//09-侦听器案例.html




  
  Document



  
    
      用户名：
      
        
      
      {{tip}}
    
  
  
  




5.6 过滤器
1.过滤器的作用是什么？
格式化数据
，比如将字符串格式化为首字母大写，将日期格式化为指定的格式等
2.全局过滤器

Vue.filter('过滤器名称',function(value){
//过滤器业务逻辑
})
3.过滤器的使用

{{msg |upper}}//upper为过滤器名称
{{msg |upper | lower}}//级联操作

4.局部过滤器

filters:{
	upper:function(val){
        return val.charAt(0).toUpperCase() + val.slice(1);
	}
}

//10-过滤器基本用法.html




  
  Document



  
    
    {{msg | upper}}
    {{msg | upper | lower}}
    测试数据
  
  
  




5.带参数的过滤器

Vue.filter('format',function(value,arg){
	//从arg开始接收参数
})
6.过滤器的使用

{{data | format('yyyy-MM-dd')}}
案例:使用过滤器格式化时期


//10-过滤器基本用法.html



  
  Document


  
    {{date | format('yyyy-MM-dd hh:mm:ss')}}
  
  
  



5.7 Vue生命周期
生命周期
:事物从诞生到消亡的整个过程
vue的生命周期
:每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是.beforeCreate()创建之前
生命周期钩子
：就是可以让你在页面生成的不同阶段执行动作的api，作用就是只要页面到了这个阶段就会触发这个对应钩子里的js
1.主要阶段
挂载（初始化相关属性）
beforeCreatecreatedbeforeMountmounted
更新（元素或组件的变更操作）
beforeUpdateupdated
销毁（销毁相关属性）
beforeDestroydestroyed
2.Vue实例的产生过程
eforeCreate在实例初始化之后，数据观测和事件配置之前被调用。
created在实例创建完成后被立即调用。
beforeMount在挂截开始之前被调用。
mounted el被新创建的vm.Sel替换，并挂载到实例上去之后调用该钩子。
beforeUpdate数据更新时调用，发生在虚拟DOM打补丁之前。
updated由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子
beforeDestroy实例销毁之前调用。
destroyed实例销段后调用。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-biZCGRVM-1620742265770)(Vue全家桶之Vue基础.assets/5.15.png)]
6.综合案例:图书管理
案例:图书管理

案例:补充知识
1.数组相关API:变异方法（修改数组）
push()
pop()末尾删除
shift()
unshift()
splice()删除指定元素
sort()排序
reverse()
2.数组相关API:替换数组(生成新的数组)
filter()
concat()
slice()从已有的数组中选定元素,返回一个新的数组
3.数组响应式变化:修改响应数据
Vue.set（vm.items，indexOfltem，newValue）
vm.$set（vm.items，indexOfltem，newValue）
参数一表示要处理的数组名称

参数二表示要处理的数组的索引/对象的属性名

参数三表示要处理的数组的值
1.图书列表
实现静态列表效果
基于数据实现模板效果
处理每行的操作按钮

2.添加图书
实现表单的静态效果
添加图书表单域数据绑定
添加按钮事件绑定
实现添加业务逻辑
3.修改图书
修改信息填充到表单
修改后重新提交表单
重用添加和修改的方法

4.删除图书
删除按钮绑定事件处理方法
实现删除业务逻辑

5.常用特性应用场景
过滤器（格式化日期）自定义指令（获取表单焦点）计算属性（统计图书总数）侦听器（验证图书存在性）生命周期（图书数据处理）





  
  Document
  
  



  
    
      
        图书管理
        
        
          
            
            
              编号：
            
            
            
              名称：
            
            
            
            
          
        
      
      
        图书总数：
        {{total}}
      
      
      
        
          
            编号
            名称
            时间
            操作
          
        
        
          
          
            {{item.id}}
            {{item.name}}
            
            {{item.date | format('yyyy-MM-dd hh:mm:ss')}}
            
              
              
              
              修改
              |
              
              
              删除
            
          
        
      
    
  
  
  




以上就是Vue全家桶入门基础教程的详细内容，更多关于Vue全家桶入门的资料请关注脚本之家其它相关文章！
您可能感兴趣的文章:
Vue全家桶实践项目总结(推荐)
一篇Vue、React重点详解大全
vue项目刷新当前页面的三种方式(重载当前页面数据)
vue跨窗口通信之新窗口调用父窗口方法实例
vue通过url方式展示PDF的几种方法
vue全家桶-vuex深入讲解

编号	名称	时间	操作
{{item.id}}	{{item.name}}	{{item.date \| format('yyyy-MM-dd hh:mm:ss')}}	修改 \| 删除



                            
                            

    
                                
                                    ‹
                                    
                                        上一篇
                                        jquery实现点击按钮显示与隐藏效果
                                    
                                
    


    
                                
                                    
                                        下一篇
                                        在Vue+webpack中详细讲解基础配置
                                    
                                    ›