Vue全家桶之Vue基础

Vue全家桶之Vue基础

一、Vue概述

Vue:渐进式JavaScript框架

声明式渲染-组建系统-客户端路由-集中式状态管理-项目构建

二、Vue基本使用

1.传统开发模式

原生JS

jQuery

2.Vue.js之Hello World基本步骤

   

{{msg}}

new Vue({

    el : '#app',

    data : {

        msg : 'HelloWorld'

    }

})

3.Vue.js之Hello World细节分析

实例参数分析

  el: 元素的挂载位置(值可以是css选择器或者dom元素)

  data:模型数据(值是一个对象)

插值表达式用法

将数据填充到HTML标签中

插值表达式支持基本的计算操作

Vue代码运行原理分析

概述编译过程的概念(Vue语法-原生语法)

三、Vue模板语法

1.模板语法概述

如何理解前端渲染?

把数据填充到HTML标签中。

前端的渲染方式:

原生js拼接字符串

使用前端模板引擎

使用vue特有的模板语法

原生jd拼接字符串:

基本上就是将数据以字符串的方式拼接到HTML标签中。

使用前端模板引擎:

基于art-template的一段代码，与拼接字符串相比，代码明显规范了很多，它拥有自己的一套模板语法规则。

模板语法概览:

插值表达式

指令:

v-text

v-html

v-show

v-if

v-else

v-else-if

v-for

v-on

v-bind

v-model  双向绑定

v-slot

v-pre

v-cloak  解决闪动问题

v-once

事件绑定

属性绑定

样式绑定

分支循环结构

2.指令

什么是指令?-什么是自定义属性、指令的本质就是自定义属性、指令的格式:以v-开始

①v-cloak指令用法

插值表达式存在闪动问题，使用v-cloak指令可以解决

解决原理:先隐藏，替换好值之后再显示最终的值。

示例:

提供样式

[v-cloak] {

    display :none;

}

在表达式所在标签添加v-cloak指令

 

      {{msg}}

②数据绑定-将数据填充到标签

v-text 填充纯文本，无闪动

   

v-html  填充html片段，存在安全问题

   

v-pre  填充原始信息，显示原始信息，跳过编译过程

    {{msg}}

③数据响应式

v-once  只编译一次，显示内容之后不再具有响应式功能，应用场景:如果显示的信息后续不需要修改，可使用v-once,可提高性能。

3.数据双向绑定指令

v-model指令

限制input  select  textarea  components

MVVM设计思想,model-view-view,model

4.事件绑定

Vue如何处理事件?

v-on指令，简写@

事件函数的调用方式:

直接绑定函数名

调用函数

事件函数参数传递:

普通参数和事件对象

事件修饰符:

.stop阻止冒泡

跳转

.prevent阻止默认行为

跳转

按键修饰符:

.enter回车键

.esc退出键

自定义按键修饰符:

全局config.keyCodes对象

Vue.config.keyCodes.f1 = 112

规则:自定义按键修饰符名字是自定义的，但是对应的值必须是按键对应的event.keyCode值。

5.属性绑定

①Vue如何动态处理属性?

v-bind指令用法,简写:

跳转

缩写跳转

②v-model的底层实现原理分析

6.样式绑定

①class样式处理

对象语法

数组语法

②style样式处理

对象语法

数组语法

7.分支循环结构

①分支结构

v-if

v-else

v-else-if

v-show

②v-if 和v-show区别

v-if控制元素是否渲染到页面

v-show控制元素是否显示(已经渲染到了页面)

③循环结构

v-for遍历数组

{{item}}

{{item}}+{{index}}

key的作用:帮助Vue区分不同的元素，从而提高性能

{{item}}+{{index}}

v-for遍历对象

v-if和v-for结合使用

四、基础案例

Tab选项卡

五、Vue常用特性

1.常用特性概览

表单操作

自定义指令

计算属性

侦听器

过滤器

声明周期

2.表单操作

①基于Vue的表单操作

input 单行文本

textarea 多行文本

select 下拉多选

radio 单元框

checkbox 多选框

②表单域修饰符

number : 转化为数值

trim : 去掉开始和结尾的空格

lazy : 将input事件切换为change事件

3.自定义指令

①为何需要自定义指令?

内置指令不满足需求

②自定义指令的语法规则(获取元素焦点)

Vue.directive('focus' {

    inserted : function (el) {

      //获取元素的焦点

      el.focus();

    }

})

③自定义指令用法

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

Vue.directive('color', {

      inserted: function (el,binding) {

      el.style.backgroundColor = binding.value.color;

    }

})

⑤指令的用法

⑥局部指令，只能在本组件中使用，与data同级

directives:{

  focus : {

      inserted: function (el) {

          el.focus()

      }

  }

}

4.计算属性

①为何需要计算属性？

表达式的计算逻辑可能会比较复杂，使用计算属性可以使模板内容更加简洁。

②计算属性的用法:

computed: {

    reversedMessage: function () {

      return this.msg.split('').reverse().join('')

    }

}

③计算属性与方法的区别

计算属性是基于它们的依赖进行缓存的

方法不存在缓存

5.侦听器

①侦听器的应用场景

数据变化时执行异步或开销较大的操作

②侦听器的用法

watch:{

    firstName: function (val) {

      this.fullName = val + this.lastName;

    },

    lastName : function (val) {

      this.fullName = this.firstName + val;

    }

}

案例:验证用户名是否可用

需求:输入框输入姓名，失去焦点时验证是否存在，如果已经存在，提示从新输入，如果不存在，提示可以使用。

分析:

通过v-model实现数据绑定

需要提供提示信息

需要侦听器监听输入信息的变化

需要修改触发的事件

6.过滤器

①过滤器的作用

格式化数据，比如将字符串格式转化为首字母大写，将日期格式转化为指定的格式等。

②自定义过滤器

Vue.filter('过滤器名称'，function (value) {

    //过滤器业务逻辑

})

③过滤器的使用

{{msg|upper}}

{{msg|upper|lower}}

④局部过滤器

filters: {

    capitalize:function () {

}

⑤带参数的过滤器

Vue.filter('format'，function (value,arg1) {

    //value就是过滤器传递过来的参数

})

⑥过滤器的作用

{{date | format('yyyy-MM-dd')}}

案例:使用过滤器格式化日期

7.生命周期

①主要阶段

挂载(初始化相关属性)

    beforeCreate

    created

    beforeMount

    mounted

更新(元素或组件的变更操作)

    beforeUpdate

    updated

销毁(销毁相关属性)

  beforeDestroy

  destroyed

②Vue实例的产生过程

beforeCreate 在实例初始化之后，数据观测和事件配置之前被调用。

created 在实例创建完成后被立即调用。

beforeMount在挂载开始之前被调用。

mounted el 被新创建的vm.$el替换，并挂载到实例上去之后会调用该钩子。

beforeUpdate数据更新时调用，发生在虚拟DOM打补丁之前。

updated由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。

beforeDestroy实例销毁之前调用。

destroyed实例销毁后调用。

六、综合案例

图书管理

1.补充知识

①变异方法(修改原有数据)

push()  添加数组至末尾

pop()  删除最后一个元素

shift()  删除第一个元素

unshift()  添加元素至开头

splice()

sort()  排序

reverse()  反转数组

②替换数组(生成新数组)

filter() 

concat()  合并数组

slice()  拷贝数组

③修改响应式数据

Vue.set(vm.items,indexOfitem,newValue)

Vue.$set(vm.items,indexOfitem,newValue)

参数一表示要处理的数组名称

参数二表示要处理的数组索引

参数三表示要处理的数组的值

常用特性应用场景:

过滤器(格式化日期)

自定义指令(获取表单焦点)

计算属性(统计图书数量)

侦听器(验证图书存在性)

生命周期(图书数据处理)