2020-06-16 Vue

vue是什么

官网地址： https://cn.vuejs.org/
官方解释：渐进式javascript框架

区别前端技术叫法：

• 库
  • 提供了可调用的API，自己组织功能代码，调用API实现功能。例如：jquery zepto
• 插件
  • 基于js或者基于jquery来实现某一个特定专项的功能。例如：jquery.color.js
• ui框架
  • 关注于用户界面功能，有一套自己的样式风格，提供了很多网站开发常用的功能控件（下拉框，对话框，分页...）。例如：bootstrap，layer，layui，easyui... 基于jquery的。
• js框架
  • js框架约定好了开发的套路，使用框架提供的规则来进行开发。例如：vue react angular

总结：vue是一个js框架，提供了一套开发规则，按照这个开发规则可提高开发效率。

补充：渐进式意思是，vue.js本身功能局限，一旦配合其他的工具可以增加其能力。

• vue-router
• vuex
• axios
• nuxt

vue做什么

区分下项目类型：

• 传统类型项目

  • 前后端在一个项目中，然后网站场景的切换通过页面跳转来实现。
  • 例如：阿里百秀 大事件

• SPA类型的项目（前后端分离）

  • single page application 单页面应用程序
  • 大白话：把一个网站的所有功能在一个页面中实现，没有真正的页面跳转。
  • 例如：
    • https://music.163.com/ 网易云音乐
    • http://zhoushugang.gitee.io/hm-toutiao-pc-93/ 黑马头条
  • 这种类型的项目业务复杂度非常高，所以会使用js框架来实现。

总结：vue适用于开发SPA类型的系统。

vue的核心

• 数据驱动视图（页面）

以前：根据数据和模板解析成html格式的代码，自己手动的渲染到对应的位置。需要大量的操作dom。

现在：你只需要修改绑定的数据（页面上依赖数据），就能对应的更新视图（页面），极大的解放了操作dom的工作，提供开发效率。

• MVVM模式
  • M 数据模型 model
  • V 视图（页面）view
  • VM 数据模型和视图的控制器 viewmodel
  • 数据双向绑定

image.png

• 组件化开发

image.png

• 把页面按照界面功能（导航，侧边栏，下拉框）拆分业务，每一个组件时一个独立的功能，提高代码可维护性，和复用度。

总结：vue的核心功能，数据驱动视图，双向数据绑定（MVVM）,组件化开发。

vue的安装

通过script引入

• 本地下载
  • https://cn.vuejs.org/js/vue.js 下载地址
  • 放在本地项目，script引入即可
• cdn的方式

通过npm安装

• 下载 npm i vue
• 导入 const Vue = require('vue') import Vue from 'vue'
• 注意 前端开发，在浏览器运行不行。
• 需要借助一些工具才能支持 以上写法。

总结：在基础学习阶段，建议大家使用本地下载引入的方式。

体验vue

例子代码：

  
  
  


  
  
  

    
{{msg}}
    
  
  
  
  

和mvvm联系起来

image.png

★选项-el

作用：为实例化好的vm对象（vue实例）指定它管理的容器（标签）视图。

如何指定(el可以写什么)：

• 选择器 #app
• dom对象 document.getElementById('app')

  
  
  


  
  

    
{{msg}}
  
  
  

    
{{msg}}
  
  
  

注意：el不能使用body和html标签作为视图容器

总结：el指定vue实例管理哪个容器（视图）

★选项-data

作用：在模板（视图）中需要使用的数据必须在data当中声明，任何格式数据都可以。

特点：data中显性声明的数据都是响应式数据（当数据发生变化的时候，使用数据的视图也自动更新）

演示数据驱动视图，就需要去改数据

• const vm = new Vue() 在全局变量中 vm 对象就是vue的实例
• 通过vue的实例，可以去访问数据，可以去修改数据
• 通过 vm.$data 可访问当选项data传入给Vue构造函数的数据，传入的data挂载到$data.
• 使用 vm.$data.msg = '10086' 修改msg数据，数据驱动视图的更新。
• 但是每次 vm.$data 才能访问到数据和修改数据，略显的麻烦。
• vue把vm.$data上的每一项数据代理在vm对象上（vue实例上），所以直接通过vm即可访问
  • 在实例化的对象中有this就是vm就是vue实例，在对象内部访问数据直接使用this即可。
• 所以 修改数据 vm.msg = 10010 即可

注意：如果想声明成响应式数据，一定要是显性的声明。

data: {
    msg: '123'
    user: {
        // 没有声明任何字段
        // 但是将来  vm.user = {name:'tom'}
        // name字段就不是显性声明
    }
}

  
  
  


  

    
{{msg}}
    {{user.name}}
  
  
  

总结：

• data中声明的数据是响应式数据
• 如果模板中使用的字段，建议在data中提前声明（显示声明）
• 在模板中如果使用 {{字段名称}} 即可输出字段对应的数据

★选项-methods

作用：在vue程序中，vue实例中，需要使用的函数统一在methods进行定义。

大白话：你需要的业务函数都写在methods选项中，类型是对象可以写很多函数。

使用：

• 在模板中可以使用定的函数
• 在vue实例中也可以使用函数

  
    
    
    
  
  
    

      {{say()}}
      

      {{say2()}}
      

      {{say3()}}
      

      {{say4()}}
    
    
    
  

总结：

• mehtods选项声明函数，建议使用属性简写方式 say(){}
• 函数中的this就是vm实例（vue实例）
• 通过vm使用，通过this使用，在模块中省去this直接使用，会输出return的结果。

术语-插值表达式

作用：在模板中输入内容，把数据对应的值插入到模板当中（视图中）

语法：在被vue管理的视图中 {{ 任何js表达式 }}

可以使用任何js表达式

• 运算 1 + 1
• 三元表达式 10 > 100 ? '1':'2'
• 访问数据 msg
• 访问函数 say()
• ....

但是不能使用js语句

• if else 分支语句
• for() 循环语句
• var a = 10 声明变量

  
    
    
    
  
  
    

      
      {{1+1}}
      

      {{count>=10?'十位数':'个位数'}}
      

      {{count}}
      

      {{say()}}
      

      
      
      
    
    
    
  

总结：

• 在模板中的 {{}} 就是插值表单式
• 里面可以写任意js表达式，输出期结果到模板中
• 模板：el指定的容器，理解成是模板。

术语-指令

什么是指令：在标签上以 v- 开头的属性，在vue中称之为指令。例如：v-model

作用：vue通过指令的方式可以去扩展 标签 的功能。

• 比如：v-model 指令给表单元素扩展双向数据绑定功能
• 还可以扩展其他功能：
  • 通过数据控制标签的内容
  • 通过数据控制标签的属性值
  • 通过数据去控制标签的显示和隐藏
  • 条件渲染
  • 扩展标签的遍历功能
  • ...
  • vue提供了很多指令来实现这些功能。

总结：指令就是vue提供的v-开头的属性，用了扩展标签的原有功能的。

指令-v-text和v-html

作用：可以通过数据去控制标签的内容

两个指令可以实现：

• v-text
  • 在使用该指令的标签中更新替换所有标签的内容，格式是文本
  • innerText 作用相似
• v-html
  • 在使用该指令的标签中更新替换所有标签的内容，格式是HTML
  • innerHTML 作用相似

区别下插值表达式

• 指令会完全更新标签中的所有内容
• 但是插值表达式可以，局部替换对应的内容

案例代码：

  
    
    
    
  
  
    

      
内容：{{textStr}}
      
      
内容：
      
      

    
    
    
  

总结：

• v-text 更新替换标签的文本内容
• v-html 更新替换标签的html内容

指令-v-show和v-if

作用：控制标签的显示和隐藏(表象)

这个两个指令的区别：

• v-show 是通过控制样式 display:none 来实现 (频繁切换的时候建议使用)

• v-if 是通过 创建 和 移除 标签来实现，消耗性能多一些。

案例代码：

  
    
    
    
  
  
    

      
      
      
我是v-show
      
      
      
我是v-if
    
    
    
  

总结：

• v-show 在频繁切换元素显示隐藏
• v-if 在一次渲染，次数不多的情况下，切换元素的显示隐藏。

指令-v-on

作用：v-on在基于vue的程序中绑定事件

语法：

简写 @

代码：

  
    
    
    
  
  
    

      
      
      
      
      
      
      
      切换显示隐藏
      
我是一个div
    
    
    
  

补充：绑定函数的时候加不加（）这个问题

• 如果函数不需要自己传参，加不加都一样。
• 如果需要自己绑定事件的时候传入参数，必须加括号。
• 特殊情况需要事件对象，可以加可以不加，写法不同而已。

      
      
      按钮
      
      按钮
      
      按钮
      
      按钮 

          fn () {
            console.log('fn函数执行了')
          },
          fn2 (age) {
            console.log(`小明今年${age}岁了`)
          },
          fn3 (e) {
            // 绑定函数的时候如果不带括号，函数会有一个默认的参数，就是事件对象
            // e 事件对象
            console.log(e)
          },
          fn4 (e) {
            console.log(e)
          },

总结：

• 如果绑定事件 @事件名称="函数|js表达式"
• 函数带不带括号，分情况而论。

指令-v-bind

作用：动态的去绑定属性的值，说白了--->通过数据去改变属性的值。

语法：

简写 :

注意：有些属性的值不是简单的字符串，class style 属性以后单独讲解。

代码：

  
    
    
    
  
  
    

      
      
      
我是一个DIV
      改title
    
    
    
  

总结：

• v-bind动态绑定属性的值，可以简写 :

指令-v-for

作用：通过数据动态遍历标签

语法：

• 遍历4次
  i是从1开始序号
• 数组类型 list = [{},{},...]
  • item就是每次遍历的选项数据
  • item就是每次遍历的选项数据，i就是索引
• 对象类型 obj = {a:1,b:2}
  • v属性值，k属性名，i索引

规范：

• 在v-for指令使用的时候，需要带上一个属性 key 且指定唯一的标识
• 目的：给遍历的每一个元素加上唯一标识，提高操作的性能。
• 语法：v-for="" :key="唯一标识" 建议使用ID，不得已情况下才会使用索引。

代码：

  
    
    
    
  
  
    

      
      
      
第{{i}}个div
      

      
      
名字：{{item.name}}
      

      
      
名字：{{item.name}} 索引{{i}}
      
      
值：{{v}} 键：{{k}} 索引：{{i}}
    
    
    
  

总结：

• 今后的使用 'v-for' 配合 ‘：key’ 来进行遍历 。
• v-for不能和v-if同时使用。