当前位置：首页 > 前端开发 > Vue 入门到精通（持续更新）

Vue 入门到精通（持续更新）

7个月前 (05-21)53

第一部分：Vue入门

                                    VUE学习思路

什么是Vue：
是一套用于构建用户界面的渐进式框架。
与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。
Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

			第一步：引入
<script src="./js/vue.js"></script>
			第二步：利用插入表达式的形式，进行渲染
<div id="app">
         {
    {msg}}   //1.可以将数据填充到HTML标签中，  2. 支持基本的计算操作  //
</div>
			第三步：创建实例对象
var vm = new Vue({
     el:'#app',      el:挂载元素，值可以是CSS选择器（一般为ID选择器） 
     data:{            data:数据模型  （值是一个对象）
    msg:'你好，第一个VUE'
   }
})

前端渲染： 把数据填充到HTML标签之中

渲染的方式： 原生JS拼接字符串
缺点：不同的开发人员的编写代码风格不同，后期维护性困难
使用模板引擎：
缺点：缺少专门的事件机制

使用框架的模板语法： 便于后期的维护

第二部分：模板语法

模板语法的分类：
1-插值表达式 2-指令 3-事件绑定 4-属性绑定 5-样式绑定 6-分支循环结构

1-插值表达式：
{ {msg}}

2-指令：

		什么是指令：指令的本质就是自定义属性 指令的格式：以v-XX 开始（比如:v-cloak）

1-v-cloak
2-v-html
3-v-text
4-v-bind
5-v-show
6-v-model
7-v-for
8-v-if v-else-if v-else
9-v-pre

一： v-clock 解决插值表达式闪动的问题
解决原理：先隐藏，替换好值之后再显示最终的值

二：数据绑定指令

1 v-text 填充纯文本比插值表达式更加的简洁（没有了闪动的问题）

2 v-html 填充html片段 存在安全问题本网站内数据可以使用，第三方的数据不可以用，容易遭到XSS攻击

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

三:响应式数据

如何理解响应式：

1.h5中的响应式   （屏幕尺寸的变化导致样式的变化）
2.数据的响应式   （数据的变化导致页面内容的变化）

什么是数据绑定：将数据填充到标签中
v-once 显示内容之后不再具备响应式功能【显示一次之后不用再修改，可以提高性能】

四：双向数据绑定

v-model： 修改数据或者修改页面内容都会同步的修改

v-model的底层原理就是 v-bind和v-model的共同使用

五:事件绑定

v-on:click=‘XX’ 事件绑定简写形式 @click=‘XX’
事件函数的调用方式：

  <button @click="btnHandle">方法里的+1</button>
  <button @click="btnHandle（ ）">方法里的+1</button>

事件函数的参数传递：

注意
- 只要是事件发生，就会有事件对象event/e
- event.target：获取到当前的事件源对象，发生事件的元素对象
总结
- 不加小括号：如果事件直接绑定函数名称，那么默认会传递事件对象作为事件函数的第一个参数
- 加小括号：如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且事件对象的名称必须是$event

普通参数和事件对象
<button @click="btnHandle（’参数‘ ， $event）">方法里的+1</button>
$event事件对象
event.target.tagName（触发事件的标签名称）
event.target.innerHTML（触发事件的内容）

	参数的传递：
1如果事件直接绑定函数的名称，那么默认会传递事件对象作为事件函数的第一个参数
2如果事件绑定函数调用，那么事件对象必须作为最后一个参数显示传递，并且对象的名称必须是$event

六：事件修饰符

事件修饰符
.stop 阻止冒泡 .prevent阻止默认行为 .self只阻止本身的行为

使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。
因此，用 v-on:click.prevent.self 会阻止所有的点击，
而 v-on:click.self.prevent 只会阻止对元素自身的点击

官网：修饰符

按键修饰符
keyup.enter 回车键 keyup.delete删除键

自定义按键修饰符
vue.config.keyCodes.f1=112

六:属性绑定

属性绑定，就是将元素的属性值与数据绑定起来
v-bind 指令进行属性的绑定

绑定之后，数据发生变化之后，元素的属性值跟着一起变化
想要修改属性值，那么就修改数据属性即可
想要获取属性值，那么就直接获取数据属性即可
元素的属性值，很多时候都是动态的，要根据后台返回的数据来变化的，这时候就需要使用属性绑定

七：样式绑定

	对象语法：<div v-bind:class="{active: isActive,error: isError}">

	数组语法：<div v-bind:class='[activeClass, errorClass]'>测试样式</div>

样式绑定的细节用法：
1-对象绑定和数组绑定可以结合使用

 答：<div v-bind:class='[activeClass, errorClass, {test: isTest}]'>测试样式</div>

2-class绑定的值可以简化操作？
答：可以把多个类名抽离出来到data中，变成一个数组变量或者式对象变量

3-默认的class如何处理？
答：默认的class会被保留

八：分支结构
v-if v-else-if v-else 进行判断，是否显示
v-show 进行判断，是否显示

v-if和v-show的区别： 👇👇👇👇👇👇👇👇👇👇👇

v-show进行判断后，条件成立不成立都会在dom节点种存在（条件成立的才会被渲染）

v-if 进行判断后，条件成立显示不成立不渲染（符合条件才会渲染）

如何使用：
1 ：如果判断条件的执行次数很少，基本上一次，那么使用v-if这种判断，比如：页面的数据都来自接口【如果接口的数据一场，那么整个页面都不可用了，也就没有办法进行后面的操作】

2 ：如果判断的条件会频繁的触发，就使用v-show 比如：tab页的切换，如果这种条件使用v-if ，dom节点的频繁的销毁和生成会导致性能的极大的消耗

v-for
基于源数据多次渲染元素或模板块。此指令之值，必须使用特定语法 alias in expression，为当前遍历的元素提供别名：
第一个参数表示数据项，通用名为item
第二个参数表示数据项的索引

<div v-for="item in items">
  {
     {
      item.text }}
</div>
另外也可以为数组索引指定别名 (或者用于对象的键)：

<div v-for="(item, index) in items"></div>
<div v-for="(val, key) in object"></div>    //键值都可以获取到
<div v-for="(val, name, index) in object"></div>
v-for 的默认行为会尝试原地修改元素而不是移动它们。要强制其重新排序元素，你需要用特殊 attribute key 来提供一个排序提示：

item是数组中的每一项(值)，index是数组中的索引
- item数组的value，index是数组的key
- 顺序不能颠倒，一个是value，第二个是key
- 变量名item，index可以改，但是顺序是固定的
:key是v-bind:key的简写
只要是遍历li，就添加key属性的绑定，绑定的值是唯一值
如果item没有id属性，那就用index即可
只是vue内部在执行v-for的时候会看我们指定没指定key，如果指定了那么有助于vue的性能提升

九：表单的操作

表单的操作：（用户数据的交互）
input 单行文本
textarea 多行文本
select 下拉多选
radio 单选框
checkbox 多选框

表单域修饰符：

表单域修饰符，可以用在text和textarea通过v-model双向数据绑定的时候
表单域修饰符与按键修饰符的用法一样
number 转化为数值（类似parseInt）当遇到第一个非数值型的值后停止转换

<input v-model.number = "age" type="number">

trim 去掉开始和结尾的空格【变化时触发，默认的不会改变】

<input v-model.trim = "info" type="number">

lazy 将input转化为change事件(内容变化后失去焦点后触发)

<input v-model.lazy = "info" type="number">

.lazy：懒惰

input事件，文本框内容改变就会触发
change事件，文本框失去焦点才会触发
change相对于input来说，change更晚一点，更懒lazy一点
lazy将input事件改为change事件，就意味着更懒惰了

第三部分：自定义指令

自定义指令出现的原因:内置指令不再可以满足要求的时候

自定义指令的语法规则（获取元素的焦点）：

Vue.directive('focus' {
     
        inserted：fuction(el){
     
	//获取元素的焦点
 	el.focus();
}
})

1-自定义指令定义之后的用法：
<input type= "text" v-focus>
- directive：指令

第一个参数：自定义指令名称(如：focus)
第二个参数：描述自定义指令的业务逻辑 (如：inserted)
第二个参数中的固定属性：inserted(插入的)：自定义指令插入父元素中，指令的钩子函数（下边介绍）
el：指令所绑定的元素。当inserted函数被调用时，系统会将当前元素对象作为参数传入
使用指令：v-自定义指令名

2-自定义指令的语法规则（获取元素的焦点）：

Vue.directive('color' {
     
        inserted：fuction(el,binding){
     
	//获取元素的焦点
 	el.style.backgroundColor = binding.value.color;
}
})
用法：
<input type = "text" v-color={
     color:"orange"}>

定义指令时：
- 构造函数中增加一个形参binding（捆绑，参数捆绑着指令传递进来，binding可改名字，但一般都用binding）
- 通过binding.value可以获取到使用指令时，传递的参数（等号右侧引号中的值）
- 传递是一个对象{color:“blue”}，所以binding.value就是这个对象
- 通过binding.value.color获取到“blue”
使用指令时，指令后跟的值，是作为参数进行传递的，传递给binding

3-局部指令(相当于把全局的拉到了VUE实例中)

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

在Vue实例中增加选项directives，与methods同级
directives是一个对象，对象中可以有多个自定义指令
对象的key就是自定义指令的名字（字符串），与之前的Vue.directive方法第一个参数相同
对象的value就是指令的业务逻辑（对象），与之前的Vue.directive方法第二个参数相同
```
  											局部指令
```

									全局指令

第四部分：计算属性computed 【常用】

计算属性直接使用值了定义的名字，不需要想methods里的函数调用那样
特征：
1.只会在依赖的数据变化时才会执行
2.会依赖缓存，如果有依赖的数据没有发生变化会从上次结果的缓存中调用
【methods不存在缓存】
3.计算属性更能表达本意，我们要得到的是一个数据

使用场景：当我们某些数据，是由其他数据经过计算整合（转换）得到的,这种数据不要定义在data中，使用computed比methods性能更优

computed：计算
书写位置：与methods，data同级
里边定义的threename就是计算属性名，后边跟上一个匿名函数

第五部分：侦听器【常用】

watch的本质作用：观察数据的变化

watch的作用：
1-必须是已经在data中声明的数据
2-定义时，观察那个数据，就是用该数据的名字定义一个函数，函数的参数时这个数据变化后的新值
3-可以计算依赖该数据的数据（类似于计算属性）
4-发送异步请求获取业务数据
3-发送异步请求记录日志（打点，埋点），利用统计到的数据可以还原用户的使用轨迹

第六部分：组件、组件化开发

组件化规范：
web Compinents 通过创建封装好功能的定制元素解决HTML CSS JS 或多组件之间的冲突

组件化与模块化[重点]

**1 模块化：**按照功能进行分割，分割成不同的相互独立的模块，每个模块专门做一件事情，复杂的功能逻辑通过调用各个模块去实现。
好处：功能复用，代码解耦
**2 组件化：**组件化按照系统的关注点进行拆分比如系统使用下拉框 modal模态窗口警告提醒表格等
把这些常用的功能集合（含有HTML结构 CSS呈现 JS逻辑操作）进行封装，最用使用的时候
调用组件API就可以了
web Compinents 通过创建封装好功能的定制元素解决HTML CSS JS 或多组件之间的冲突

⭐全局组件⭐

Vue.component(组件名称,{
     
	data:组件数据,
	template:组件模板内容
})
1：data必须是函数（确保了为什么可以多次的复用，函数闭包，避免数据的污染）
2：template: 结构模板（可以使用模板字符串 ES6语法）

例：
//定义一个button-counter
Vue.component('button-counter',{
     
	data:function(){
     
	return{
     
	count:0
   }
 },
 temeplate:'<button-counter @click="count++">点击了{
     {count}}次</button-counter>'
})

组件的使用：
<div id='app'>
	<button-counter> </button-counter>
</div>
组件的命名方式： 短横线 或者 驼峰的方式

⭐局部组件⭐

局部组件只可以注册在它的父组件中使用
和el同级定义compinents

第六部分：过滤器

过滤器（moment处理事件的一个库）
格式化数据(处理数据)，比如字符，日期等

自定义过滤器：

Vue.filter('过滤器名称',function(value//参数：代表你要处理的数据){
     
	//业务处理逻辑
})

使用：

1-通过插值表达式  
    <div>{
     {
     msg | upper}}</div> <!--差值表达式绑定过滤器-->
    <div>{
     {
     msg | upper | lower}}</div><!--过滤器级联操作:多个过滤器同时可以使用-->
2-通过数据绑定
    <div v-bind:id='id | upper'></div> <!--差值表达式绑定过滤器-->

局部过滤器

filters:
'过滤器名称':{
     function(value//参数：代表你要处理的数据){
     
	//业务处理逻辑
}
}

带参数的过滤器

Vue.filter('过滤器名称',funciton(value,arg1){
     
	//value就是过滤器传递过来的参数
})

使用过滤器时：

 <div>{
     {
     msg | ''过滤器名称(参数arg1的具体内容)"}}</div> <!--差值表达式绑定过滤器-->

第七部分：生命周期

生命周期的各个过程

实例化vue实例对象
初始化事件和钩子函数，做准备工作
触发beforeCreate钩子
处理data中声明的数据，把他们变成响应式，同时关联的计算属性和侦听器都会被生成，【搞定数据】
触发created钩子，此时有数据了，可以依赖这些数据发起ajax请求
检查模板配置项，如果有render函数，使用它，否则找template项，有就使用这个配置项，否则找el配置项，优先级: render > template > el。【找到模板】
触发beforeMount
编译模板内容，把处理好的数据挂载(替换)到模板中，绑定其中的事件，把整个替换好数据的模板更新到页面上。【模板编译完成并挂载到页面上】
触发mounted，此时dom节点真正生成了，可以操作dom和触发事件了
触发事件更新数据，仅仅是数据变化了
触发beforeUpdate，此时数据虽然变化了，但是还没有更新到页面上，如果想修正数据，这里可以操作
数据变化引起页面更新
触发updated，如果有些需要在页面更新后做的事情，可以放在这里
触发了销毁组件的事件
触发beforeDestory，这里可以做一些清理工作，比如清理不再使用的数据，尤其是定时器
销毁组件，清除实例上的数据，计算属性、侦听器、绑定的事件、模板内容、子组件
触发destoryed