什么都不会的学习之路——vue

第一章Vue核心

1.1Vue简介

​ 一套用于构建用户界面的渐进式JavaScript框架

1.1.1Vue特点：

1. 采用组件化模式，提高代码复用率，且让代码更好维护
2. 声明式编码，让编码人员无需直接操作DOM，提高开发效率
3. 使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

1.1.2学习Vue之前要掌握的Js基础知识

​ ES6语法规范、ES6模块化、包管理器、原型、原型链、数组常用方法、axios、promise。。。

1.2初识Vue

1. 想让vue工作：创建一个Vue实例+配置对象（data）
2. root容器里的代码依然符合html规范，只不过加入了一些Vue语法
3. root容器里的代码被称为【Vue模板】
4. Vue实例和容器是一一对应的
5. 真实开发中只有一个Vue实例，它有许多帮手
6. {{xxx}}中的 xxx 只能是表达式，且xxx可以自动读取到data中的所有属性
7. data中的数据如果改变，页面中也会改

    
    

        
Hello.{{name}}
        
他.{{age}}岁
    
    

注意区分：js表达式 和 js代码（语句）

1. 表达式：一个表达式会产生一个值，可以放在任何需要值的地方：

   ​ （1）a

   ​ （2）a+b

   ​ （3）demo（1）

2. js代码（语句）

   ​ （1）if(){}

   ​ （2）for(){}

1.3模板语法

1.3.1.插值语法

​ 功能：用于解析标签体内容

​ 写法：{{xxx}}. xxx 是js的表达式，且xxx可以自动读取到data中的所有属性

1.3.2.指令语法

​ 功能：用于解析标签（包括：标签属性，标签体内容，绑定事件…）

​ 举例：v-bind:href=“xxx” 可以简写成 :href=“xxx” xxx要写成js表达式，且xxx可以自动读取到data中的所有属性

​ 备注：Vue中有很多的指令，且形式都是：v-???，此处只是用v-bind举了个例子

​ 如果有多个name的话 建立一个 子.name

插值语法
你好.{{name}}

指令语法
点我去{{children.name}}

1.4数据绑定

1.4.1单向数据绑定

​ v-bind: 数据只能从data–>页面

1.4.2双向数据绑定

​ v-model: 数据能从data<–>页面

​ 备注：一般用在表单类元素上

​ v-model:value可简写为v-model，因为v-model默认收集的是value值

 单向数据绑定

 双向数据绑定

 双向数据绑定

1.5 el与data的两种写法

1.5.1el的两种写法

​ （1）new Vue时候配置el属性。

​ el:‘#root’

    new Vue({
        el:'#root',
        data:{
            name:'尚硅谷一',
        }
    })

​ （2）先创建Vue实例，随后再通过vm.$mount(‘#root’)指定el的值

​ v.$mount(‘#root’)

    const v =  new Vue({
        data:{
            name:'尚硅谷二'
        }
    })
    console.log(v)
    v.$mount('#root')

1.5.2 data的两种写法

​ （1）对象式

	data: {
    	 name: '尚硅谷'
        }

​ （2）函数式：组件必须用函数式

 		data:function(){
                    return{
                        name:'尚硅谷'
                    } 
                }

注：由Vue管理的函数，一定不要写箭头函数，否则，this就不再是Vue实例了。

1.6 MVVM

Model-View-ViewModel

• M：模型：deta数据
• V：视图：模板代码
• VM：视图模型：vue实例

data中的所有属性，最后都到了vm

vm中的所有属性，都可以体现在vue实例中

    
姓名：{{name}}
    
地址：{{address}}
    
测试1：{{1+1}}
    
测试2：{{$options}}

1.7数据代理

1.回顾Object.defineProperty

对象的定义与赋值

Object.defineProperty(person,'age',{
    value:18,
    enumerable:true,   //控制属性是否可以枚举，默认值false
    writable:true,     //控制属性修改，默认值false
    condigurable:true  //删除，false
})

2.何为数据代理

数据代理：通过一个对象代理对另一个对象中属性的操作

3.Vue中的数据代理

1.Vue中的数据代理:

​ 通过vm对象来代理data对象中属性的操作（读/写）

2.Vue中数据代理的好处：

​ 更加方便的操作data中的数据

3.基本原理：

​ 通过Object.defineProperty（）把data对象中所有属性添加到vm上

​ 为每一个添加到vm上的属性，都指定一个getter/setter

​ 在getter/setter内部去操作（读/写）data中对应的属性

    

        
名称:{{name}}
        
地址:{{address}}
    
    

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-niN3wOKo-1650547834650)(C:\Users\86151\AppData\Roaming\Typora\typora-user-images\image-20220207170509539.png)]

1.8事件处理

1.事件的基本使用

1.使用 v-on:xxx 或 @xxx 绑定事件。xxx是事件名

2.事件的回调需要配置在methods对象中，最终会在vm上

3.methods中配置的函数，不要用箭头函数，否则this就不是vm了

4.methods中配置的函数，都是被Vue所管理的函数。this的指向是vm或组件实例对象

5.@click=“demo” 和 @click=“demo($event)” 效果一致。但后者可以传参

        
欢迎大家来到{{name}}
        点击这里进入1(无参)
        点击这里进入2(有参)
    
    

2.事件的修饰符

常用：

1. prevent：阻止默认事件
2. stop：阻止事件冒泡
3. once：事件只触发一次

不常用：

1. capture：使用事件的捕获模式

2. self：只有event.target是当前操作的元素时才能触发事件

3. passive：时间的默认行为立即执行，无需等待事件回调执行完毕

可以连用：@click.stop.prevent=“”

        
        阻止默认事件

        
        

            阻止事件冒泡
        
        
        事件只触发一次
        
        

            div1
            

                div2
            
        
        
        

            event.target是当前操作的元素时才能触发事件
        
        
        
        

            
1
            
2
            
3
            
4
        
    

3.键盘事件

1. Vue中常用的按键
   1. 回车------enter
   2. 删除------delete（删除和退格）
   3. 退出-----esc
   4. 空格------space
   5. 换行------tab
   6. 上-------up
   7. 下------down
   8. 左------left
   9. 右------right
2. Vue未提供的可以用按键原始key值去绑定，两个大写字母要转换为kebab-case
3. 系统修饰键：ctrl、alt、shift、meta
   1. @keyup：按下键的同时，按下其他键，释放其他键，事件才触发。
   2. @keydown：正常触发事件。

@keyup.ctrl.y="showInfo"       //按下ctrl+y触发事件

1. 使用keyCode（键码）去指定按键（不推荐，不一致）
2. Vue.config.keyCodes.自定义键名 = 键码。（自定义按键别名）

@keyup.enter=""       //按下、抬起触发
@keydown.enter=""     //按下触发

1.9计算属性与监视

1.计算属性

computed:{}

get()、set()

 computed:{
    fullname:{
        get(){
            return this.firstname + '-' +this.lastname
        },
        set(value){
            const arr = value.split('-')
            this.firstname = arr[0]
            this.lastname = arr[1]
         }
     }
 }

简写模式：

​ 条件：只有在只读不改下可以简写，计算属性较methods 具有缓存机制，更高效

computed:{
    fullname(){
       return this.firstname + '-' +this.lastname
     }
}

2.监视属性

watch:{}

1. 当被监视属性变化时，回调函数自动调用，进行相关操作

2. 监视的属性必须存在

3. 监视的两种写法：

   new Vue时传入watch配置

   通过vm.$watch监视

   watch:{
   	Isappear:{
   		handler(newValue,oldValue){
   			console.log('Isappear被修改了',newValue,oldValue)
   		}
   	}
   }
           
           
   

   
   vm.$watch('Isappear',{
           immediate:true,
           deep:true,
           handler(newValue,oldValue){
               console.log('Isappear被修改了',newValue,oldValue)
           }
       })  
    
   

   简写

Isappear(newValue,oldValue){
     console.log('Isappear被修改了',newValue,oldValue)
}

vm.$watch('Isappear',function(newValue,oldValue){
    console.log('Isappear被修改了',newValue,oldValue)
})

3.深度监视

1. Vue中watch默认不检测对象内部（一层）

2. deep:true可以检测对象内部值改变（多层）

3. 备注：

   Vue自身可以检测对象内部值的改变，但是watch默认不可以

   使用watch随机应变，决定是否采用深度监视

1.10绑定样式

1.基础

1. 正常的样式正常写： class=“basic normal”
2. 需要变化的样式： :class=“a” （提供一个数据a:‘normal’）

{{name}}
 

3. style样式：

   :style="{fontSize:x}"   //xxx为动态值
   :style="[a,b]"   //a,b为样式对象
   

2.绑定样式

1. class

   1. 字符串写法：:class=“mood” 适用于类名、名字不确定，动态改变
   2. 数组写法：:class=“classArr” 适用于绑定样式个数、名字不确定
   3. 对象写法：:class=“classObj” 适用于绑定样式个数、名字确定 需要动态指示

2. style

   1. 数组写法：:style=“styleArr”
   2. 对象写style法：:style=“styleObj”

1.11 条件渲染

1. v-show

   适用于：切换频率较高的场景

   不展示的DOM元素不被移除，仅隐藏掉

   今日我们学{{name}}
   

2. v-if

   适用于：切换频率较低的场景

   不展示的DOM元素被移除

   v-if和v-else-if 一起使用时，不能被打断

今日我们学{{name}}
        
1
        
2
        
3

1.12列表渲染

1.基础列表

1. 遍历数组

   v-for=" x in xxx"

   
      
   
         {{p.name}}-{{p.age}}
      
   
   
   persons:[
       {id:'001',name:'张三',age:18},
       {id:'002',name:'李四',age:19},
       {id:'003',name:'王五',age:20}
   ],
   

2. 遍历对象

car:{
   name:'奥迪',
   price:'70万',
   color:'黑色'
}

2.key的原理

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aeRfF6Ul-1650547834652)(C:\Users\86151\AppData\Roaming\Typora\typora-user-images\image-20220304142702081.png)]

3.列表过滤

1. 计算属性监视属性都可，计算更好

computed:{
    filPersons(){
        return this.persons.filter((p)=>{
            return p.name.indexOf(this.keyWord)!==-1
        })
    }
}

4.列表排序

1.13手机表单数据

手机表单数据

1. text ： v-model收集的是value值，用户输入的就是value值

2. radio ： v-model收集的是value值，且要给标签配value值

3. checkbox ：要收集数组形式 [ ]

4. v-model的三个修饰符

   lazy：失去焦点再收集数据

   number：输入字符串转为有效数字

   trim：输入首尾空格过滤

第二章组件

1.模块与组件、模块化与组件化

Vue中使用组件的三大步骤：定义（创建）、注册、使用（写组件标签）

1. 如何定义

   使用Vue.extend({ })创建

   1. el不要写——最终组件要经过vm管理，由vm中的el决定服务那个容器
   2. data需写成函数——避免组件被复用时，数据出现引用关系
   3. 使用template可以配置组件结构

   // 第一步 创建组件
           const school = Vue.extend({
               //配置结构
               template:`
               
   
               
   学校名称:{{schoolName}}
   		    
   学校地址:{{address}}
               
               `,
               //注意：无el data函数形式
               data(){
                   return{
                       schoolName:'内农大',
                       address:'呼和浩特'
                   }
               }
               
           })
   

2. 如何注册

   局部注册：new Vue 中传入components选项

   全局注册：Vue.component(‘组件名’，组件)

   // 第二步 注册组件
           new Vue({
               el:'#root',
               components:{
                   school:school
               }
           })
   

3. 编写组件标签

   <组件>

2.几个注意点

1. 组件名

   一个单词：school/School

   多个单词：my-school/MySchool（需要Vue脚手架支持）

   注：要回避html已有元素名 可使用name配置项在开发者工具中呈现名字

2. 组件标签

   注：不使用脚手架时会导致后续组件不能渲染

3. 简写方式

   const school = Vue.extend({ }) =>const school = { }

第三章路由

1. 一级路由

第一步：安装vue-router，命令：npm i vue-router

第二步：在mian.js中应用插件：Vue.use(VueRouter)

第三步：创建pages文件夹存放路由组件

第四步：创建一个router文件夹存放index.js

// 引入VueRouter
import VueRouter from "vue-router";
//引入路由组件
import MeHealth from '../components/MeHealth'
import MyTodo from '../components/MeTodo'

//创建并暴露一个路由器
export default new VueRouter({
    router:[
        {
            path:'/MeHealth',
            component:MeHealth
        },
        {
            path:'/MyTodo',
            component:MyTodo
        }
    ]
})

第五步：实现切换（active-class配置高亮样式）

About

第六步：指定展示位置

2.二级路由（嵌套）

注：二级路由path后不需要加/

​ 中的to属性中需要带上一级

routers:[
	{
		path:/one,
		component:one,
		//二级嵌套
		children:[
			{
				path:two,//注意：这里不用加/
				component:two,
			}
		]
	}
]


二级路由

3.query参数

路由传参

点击内容

{{$route.query.id}}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D42o8GA2-1650547834652)(C:\Users\86151\AppData\Roaming\Typora\typora-user-images\image-20220318174303379.png)]

4.命名路由

简化路由的跳转

在index.js配置时 在routes:[ ]中加上name:‘luyou’ 在router-link中可直接找到

二级路由

5.params参数

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z61gINmp-1650547834653)(C:\Users\86151\AppData\Roaming\Typora\typora-user-images\image-20220318180158954.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jaXtBF5z-1650547834653)(C:\Users\86151\AppData\Roaming\Typora\typora-user-images\image-20220318180229338.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-oFCor6Ui-1650547834654)(C:\Users\86151\AppData\Roaming\Typora\typora-user-images\image-20220318180255103.png)]

er-view>

## 2.二级路由（嵌套）

注：二级路由path后不需要加/

​		中的to属性中需要带上一级

```web
routers:[
	{
		path:/one,
		component:one,
		//二级嵌套
		children:[
			{
				path:two,//注意：这里不用加/
				component:two,
			}
		]
	}
]


二级路由

3.query参数

路由传参

点击内容

{{$route.query.id}}

[外链图片转存中…(img-D42o8GA2-1650547834652)]

4.命名路由

简化路由的跳转

在index.js配置时 在routes:[ ]中加上name:‘luyou’ 在router-link中可直接找到

二级路由

5.params参数

[外链图片转存中…(img-z61gINmp-1650547834653)]

[外链图片转存中…(img-jaXtBF5z-1650547834653)]

[外链图片转存中…(img-oFCor6Ui-1650547834654)]