一起从头学习 vue（未完待整理）

最新推荐文章于 2024-04-12 09:44:40 发布

半生过往

最新推荐文章于 2024-04-12 09:44:40 发布

阅读量240

点赞数 1

分类专栏： vue 文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/estrusKing/article/details/123024819

版权

vue 专栏收录该内容

24 篇文章 2 订阅

订阅专栏

Vue指令

指令：就是以 v-指令=‘表达式’

模板语法 - 表达式
1. 作用：获取vue数据显示视图模板语法来声明式地将数据渲染进 DOM
2. 语法：{{ js表达式 }}
v-html=‘表达式’
插入HTML数据解析html代码识别标签注意:不安全
1. 作用：输出真正的 HTML，你需要使用 v-html 指令 (innerHTML)
2. 语法：
  <span v-html="变量"></span>
v-text=‘表达式’
1. 作用：渲染视图 innerText
2. 语法:
  <span v-text="变量"></span>
v-if=’ 表达式’ 条件渲染
1. 作用：是否显示元素 —— true 显示 / false 隐藏
2. 语法：
  <span v-if="boolean表达式"></span>
3. 特点：
  v-if=‘’ 控制元素是否渲染或者销毁
v-else
1. 作用：是对 v-if=''的结果取反
2. 语法：
  <span v-if="boolean表达式"></span>
  <span v-else>xxxx </span>
v-else-if
1. 作用：是否显示元素与v-if v-else-if 多语句判断
2. 语法：
  <span v-if="boolean表达式"></span>
  <span v-else-if="boolean表达式"></span>
  <span v-else>xxxx </span>

v-show='表达式 ’

作用：是否显示元素 —— true 显示 / false 隐藏
语法：
<span v-if="boolean表达式"></span>
特点：
控制元素的 display:block/none
4. v-if与v-show区别？
    v-if: 控制元素的渲染或者销毁
    v-show:控制元素的 display:block/none
   <font color=red size=3>场景：</font>
      -  频繁切换： v-show 
      - 初次渲染优化：v-if

v-for=’ ’ - 列表渲染
1. 作用：遍历数组或者对象
2. 语法：
  <li v-for="(item,index) in arr" :key="">
  {{ item }}
  </li>
```
3. 属性
   1. item 第一个元素 表示数组的每一项内容
   2. index 第二个元素 表示数组的下标 0 1 ... 
   3. arr  数组数据
```
1. v-bind:属性=’ ‘ 绑定属性 key=’ ’
  1. 作用：做当前数据的唯一标识一般写的是id 不推荐 index
  2. 语法：
    <div v-bind:key=''></div>
    简写： <div :key=''></div>
```
5. 遍历对象：   
    `<div v-for="(value, key, index) in object">`
   &nbsp; &nbsp; &nbsp; &nbsp;   ` {{ index }}. {{ key }}: {{ value }}`
    `</div>`
```
value 对象的值 key 对象的键名 index 下标0 1 ... 6. v-for 与 v-if 一同使用 1. 注意我们不推荐在同一元素上使用 v-if 和 v-for 、v-for 的优先级比 v-if 更高 2. 解决方法： ```javascript
- {{ item.fruit }}
```
v-bind:属性=‘’ 动态绑定属性
1. 作用：给标签元素绑定一个动态属性
2. 语法：
  <div v-bind:class='demo'>点击</div>
  简写： <div :class='demo'>点击</div>
v-on:事件名=‘函数名’
1. 绑定事件简写: @事件名=‘函数名’
2. 点击
3. 事件-修饰符
  
  见下
v-model=‘’
1. 表单操作获取数据 — 双向数据绑定
2. 语法: <input v-model='msg' />
3. 实现原理:
```
<input :value='val' @input='val=$event.target.value' />
```
v-slot=‘’
1. 显示插槽内容
2. 语法:
  <template v-slot:插槽名字=‘数据’>
v-pre
1. 不需要表达式跳过这个元素和它的子元素的编译过程 – 不编译vue语法直接输出内容
2. <div v-pre>{{ msg }}</div>
v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时，这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
```
[v-cloak] {
	display: none;
}
<div v-cloak>
	{{ message }}
</div>
```
v-once
1. 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。
2. 可以用于优化更新性能
3. 语法: <div v-once>一定不修改:{{ msg }}</div>

Vue 事件

介绍
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
定义事件
语法：<div v-on:事件名='dosomething'></div>
函数dosomething定义的位置：
要求定义mothds属性中
事件：1. this指向 2. 事件传递参数 3. 事件对象event
1. 事件的this指向当前组件实例对象
2. 事件传递参数 v-on:click='canshu(1,2)'
3. 事件对象event
  1. 函数不带参数第一个参数默认是事件对象 event
  2. 函数带参数事件对象需要手动传递 $event
    v-on:事件名=‘函数’
    简写：
    @事件名=‘函数’
事件修饰符

.stop *
.prevent *
.capture
.self
.once
.passive
按键修饰符

.enter *
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
系统修饰键

.ctrl
.alt
.shift
.meta
鼠标按钮修饰符

.left
.right
.middle

Vue中key属性的作用（考点）

作用：key的作用主要是为了高效的更新虚拟DOM
高效的Diff算法

数组更新检测

说明：在列表渲染中，如果遍历是数组，当数组数据发生改变时，页面什么时候能自动更新(页面重新渲染)
实现数组视图同步更新
1. 变更方法（修改了原数组）
  
  push()
  pop()
  shift()
  unshift()
  splice()
  sort()
  reverse()
2. 替换数组（修改后返回新的数组原数据不修改视图想同步更新覆盖原数组）
  
  filter()
  concat()
  slice()

对象更新检测

说明：对象修改后视图同步更新视图 – 内存：栈内存堆内存

实现对象视图同步更新

 	1. Vue.set( target, propertyName/index, value )
 	     参数：
 	         {Object | Array} target
 	         {string | number} propertyName/index
 	         {any} value
 	         返回值：设置的值。
 	     用法：
 	         向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新 property，因为 Vue 无法探测普通的新增 property (比如 this.myObject.newProperty = 'hi')
 	
 	2. 代码演示
 			addAttribute(){
 				// this.obj.love='女'
 				// console.log('obj',this.obj);
 				//问题：vue认为 obj没有修改
 				//1. ...  
 				// this.obj ={...this.obj};
 				//2. es6: 合并对象  Object.assign({},{},{}) 
 				// this.obj=Object.assign({},this.obj)
 				
 				//3. vue官网解决方法：
 				//向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。
 				// this.$set(this.obj,'love','女')
 				Vue.set(this.obj,'learn','学习')
 				
 				//删除 同步视图 删除对象的 property。如果对象是响应式的，确保删除能触发更新视图。
 				Vue.delete(this.obj,'age')
 			}

Class 与 Style 绑定

介绍：动态的添加class或者是style样式
绑定 HTML Class
1. 直接绑定变量
  <div v-bind:class='变量'></div>
2. 对象语法 ***
  <div v-bind:class="{类名: 表达式-true显示类名、false隐藏 ,类名:boolean}"></div>
3. 数组语法
  <div v-bind:class="[变量1,变量2, {类名：boolean}]"></div>
绑定内联样式
v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case，记得用引号括起来) 来命名
1. 对象语法
  <div v-bind:style="{css样式:变量,... }"></div>
2. 数组语法
  <div v-bind:style="[baseStyles, overridingStyles]"></div>
3. 直接变量
```
<div v-bind:style="styleObject"></div>
    data: {
        styleObject: {
            color: 'red',
            fontSize: '13px'
        }
    }
```

表单输入绑定

介绍
你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定
通过指令 v-model=‘’ 获取表单输入的信息数据实现双向数据绑定

语法:

<input type='text' v-model='变量' />
   data(){
       return{
           msg:''
       }
   }

修饰符

.lazy 只有当input失去焦点时才更新数据
.number 把input标签中输入的内容转成数字，调用是parseFloat (Nunber())
.trim 去除左右空格

v-model实现原理

 v-model只不过是一个语法糖而已,真正的实现靠的还是
     v-bind:绑定响应式数据
     触发oninput 事件并传递数据

 v-model 是:语法糖 :value + @input。还要分为两种情况

  <input v-model="val">
   <!-- 基本等价于，因为内部还有一些其他的处理 -->
   $event是事件对象，$event.target.value表示input框中的输入值
   <input :value="val" @input="val = $event.target.value">

计算属性和侦听器

一. 计算属性

介绍: 处理数据后把数据缓存起来使用数据的时候使用的缓存的数据,但是如果原数据修改了重新计算

语法

computed:{
    msg2(){
        console.log('计算属性: 对数据进行加工处理  缓存数据');
        return this.msg.split('').reverse().join('');
    }
}

3. 使用计算属性  
   1. 直接获取名字 不加 () 
   2. {{ msg2 }}

二. 侦听器

介绍: Vue 通过 watch 选项提供了一个更通用的方法，来响应数据的变化

语法:

<script>
export default {
    data(){
        return{
            inp:'',
            arr:[]
        }
    },
    //侦听器--数据变化
    watch:{
        inp:function(n,o){
            console.log('新值:',n ,'旧值:',o);
            //业务逻辑 
            //模糊查询
            
        }
    }
}
</script>

computed和watch区别（考点）

相同：computed和watch都是观察页面的数据变化的。

不同：

  computed：是计算属性，依赖其它属性值:
      1. 支持缓存，只有依赖数据发生改变，才会重新进行计算
      2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化
  watch：没有缓存性，更多的是「观察」的作用，类似于某些数据的监听回调 ，每当监听的数据变化时都会执行回调进行后续操作；
      1. 不支持缓存，数据变，直接会触发相应的操作；
      2. watch支持异步；

组件注册

一. 局部组件

创建一个组件.vue
引入：import Mycomp from './components/Mycomp.vue'

注册组件

 export default {
    name: 'App',
    components: {
        Mycomp
    }
   }

4. 使用组件

	```javascript
	 <Mycomp></Mycomp> 
	```

二. 组件组成

template 视图
script 逻辑
style 样式

三. 全局组件

注册全局组件在Vue对象身上有个Vue.component() 注册全局组件在所有的组件中不需要引入可以直接使用

语法：

  Vue.component('my-component-name', {
        // ... 选项 ...
    })

3. 代码演示

    ```javascript
        // import Vue from 'vue'//运行时：vue.runtime.js 
        import Vue from 'vue/dist/vue'
   
        /注册全局组件
        // Vue.component('组件名称',{内容配置})
        Vue.component('my-comp',{
            //视图 template :template作为属性使用 必须vue.js （完整版的vue.js）  默认引入-运行时-vue.runtime.js 
            template:'<div> <h2>我是一个全局组件</h2> <p>{{ msg }}</p></div>',
            //数据
            data(){
                return {
                    msg:'hello vue全局组件'
                }
            },
            //方法
            methods:{
   
            }
        })
    ```

4. 全局组件--可以挂载创建好的局部组件 注册全局
	```javascript
	  import MyBanner from './components/MyBanner.vue'
	    // Vue.component('MyBanner',MyBanner)
	    Vue.component(MyBanner.name,MyBanner)
	```

5. vue 不同构建版本
   1. vue.js 完整版 --编译器+ 运行时 
   2. vue.runtime.js  运行时

四. 补充一个知识点

组件的视图模板组成
1. <template> 标签
2. template 属性使用
3. render() render函数渲染 – react
优先级问题

<template> 标签 > render() > template (修改vue.js)

Prop传递数据

作用：实现组件之前数据传递- 父传子

语法

父组件：

  <子组件 msg='hello'  :info='' ></子组件>

子组件：

  数组接收:
      props:['msg','info']

  对象接收方式:
      props:{
          msg:数据类型
          info:{
              type:String,
              default:'默认值'
          },
          ... 如下-prop验证
      }

子组件使用父组件数据直接当data里面的数据使用
{{ msg }}

注意:
1. prop传递数据时正向传递父串子数据时响应式的父组件数据修改了子组件同步更新
2. 子组件不能直接修改prop传递的数据

prop验证

props: {
    // 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
        type: String,
        required: true
    },
    // 带有默认值的数字
    propD: {
        type: Number,
        default: 100
    },
    // 带有默认值的对象
    propE: {
        type: Object,
        // 对象或数组默认值必须从一个工厂函数获取
        default: function () {
         return { message: 'hello' }
        }
    },
}

自定义事件 – 子传父

作用:把子组件的数据传递给父组件通过自定义事件

语法

子组件定义事件
```
 this.$emit('getData',this.msg)
```

父组件-调用子组件上面接受自定义事件
<子组件 @自定义事件名='函数名'/>

 methods:{
        函数名(val){
            this.xx = val;
        }
    }

特殊的prop传递函数
1. prop传递的是一个函数名 <子组件 :fun=‘函数名’ />
2. 子组件接受 props:[‘fun’]
3. 子组件调用父组件传递的函数名 fun this.fun() fun()

插槽

说明：Vue 实现了一套内容分发的 API,定义时不知道具体要显示什么，只是留出来显示的位置，在组件调用时写具体内容，能展现在预留的位置上。
定义：
使用标签预留位置
调用组件时
写具体的要呈现的内容，要显示在标签中
<组件> xxx </组件>

匿名插槽 (常用的)

// 定义时：
<slot name='default'></slot> / <slot></slot>

具名插槽 (常用的)
1. 定义插槽的时候有名字name属性
```
   <slot name='header'></slot> 
   <slot name='footer'></slot> 
```
2. 使用
```
  <template v-slot:footer>
       底部区域
  </template>
```
3. 注意:使用的时候有名字的在具名插槽里面显示没有名字找匿名插槽

作用域插槽

作用: 让插槽内容能够访问子组件中才有的数据 (插槽提供数据)

语法:

<slot name="footer" :msg="msg" :num='num'></slot>

使用插槽

<template v-slot:footer='data'>
	底部区域
</template>
// 注意:data一个对象 data={ msg:'',num:'',...}

具名插槽的缩写
v-slot:header可以被重写为 #header
后备内容
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。
默认值

动态插槽名

作用:在调用插槽的时候定义插槽的名字

语法:

<template v-slot:[varName]>我是具名插槽-{{varName}}</template> 

data(){
	return {
		varName:'header'
	}
}

动态组件

作用：实现组件的动态切换加载哪个组件

语法：

<component :is='加载的组件名称'></component>
data(){
	return{
		加载的组件名称：注册的组件名 
	}
}

特点：
通过组件销毁和重建过程实现组件切换【跟v-if类似】

在动态组件上使用 keep-alive – 失活了——将之前的数据进行缓存

<keep-alive>
    <component :is='加载的组件名称'></component>
</keep-alive>

keep-alive
Props：
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。

使用：

include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示：

exclude优先级大于 include

 <!-- 逗号分隔字符串 -->
 <keep-alive include="a,b">
 <component :is="view"></component>
 </keep-alive>

 <!-- 正则表达式 (使用 `v-bind`进行双向绑定) -->
 <keep-alive :include="/a|b/">
 <component :is="view"></component>
 </keep-alive>

 <!-- 数组 (使用 `v-bind`) -->
 <keep-alive :include="['a', 'b']">
 <component :is="view"></component>
 </keep-alive>

匹配首先检查组件自身的 name 选项，如果 name 选项不可用，则匹配它的局部注册名称 (父组件 components 选项的键值)。匿名组件不能被匹配。

max— 2.5.0 新增
最多可以缓存多少组件实例。一旦这个数字达到了，在新实例被创建之前，已缓存组件中最久没有被访问的实例会被销毁掉。
```
 <keep-alive :max="10">
 <component :is="view"></component>
 </keep-alive>
```

异步组件

说明：使用组件的时候再去加载这个组件，提高代码执行速度

默认引入组件：
提前加载组件

import CompA from "./CompA.vue"; 
import CompB from "./CompB.vue";

export default {
	  	components: {
	       	CompA,
	       	CompB,
	  	}

异步组件写法：–局部

方法一

const CompA = ()=>import('./CompA.vue')
const CompB = ()=>import('./CompB.vue')

export default {
	components: {
     	CompA,
     	CompB,
	}
}

方法二

export default {
	components: {
		//异步
         CompB:()=>import('./CompB.vue'),
         CompC:()=>import('./CompA.vue'),
        //...
    }
}

处理边界情况

介绍：
访问元素 & 组件 – vue组件之间数据传递获取数据
vue组件之间数据传递
1. Prop 父传子
2. 自定义事件子传父 this.$emit('自定义事件名','传参')
3. 访问根实例 $root
  1. new Vue({ data:{ } })
  2. js：this.$root.xx
    template: {{ $root.xx }}
4. 访问父级组件实例 $parent
  1. this.$parent.xxx
  2. {{ $parent.xx }}
5. 获取子组件实例
  this.$children[0]
6. 访问子组件实例或子元素–$ref -操作DOM元素
  1. 获取DOM元素：
    <div ref='xx'></div>
    this.$refs.xx 获取div-dom元素
  2. 获取子组件实例
    <Son ref='xx'/>
    this.$refs.xx
7. 原型链
  Vue.prototype.$user='admin'

MVVM设计模式（理解）

MVC MVVM
1. M model 数据-模型
2. V view 视图
3. VM viewmodel 视图和数据的链接
为什么要使用MVVM
1. 低耦合：视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的View上，当View变化的时候Model可以不变，当Model变化的时候，View也可以不变。
2. 可复用：可以把一些视图逻辑放到一个ViewModel里面，让很多View重用这段视图逻辑。
3. 独立开发：开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

生命周期函数【最常用标识 ^★ 】

生命周期：vue从创建vue实例到组件销毁的过程自动创建的函数
-每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数
生命周期函数：
1. beforeCreate
  new vue实例后创建之前 ——· 获取不到data methods 和数据等。
2. created ^★
  创建之后——最早网络请求（性能会更好）【最早可以操作data中数据或者调用methods中的方法】
3. beforeMount
  挂载之前，函数执时，模版已在内存中编译好，但未挂载到页面，此时页面还是旧的未更新。
4. mounted ^★
  挂载完毕 – 初次获取DOM元素【操作DOM元素】
  执行完mounted，表示vue实例初始化完成
5. beforeUpdate
  更新之前数据更新了视图是旧的
6. updated ^★
  更新之后数据和视图同步
7. beforeDestory
  销毁之前什么都可以用
8. destory
  销毁之后清空数据或者时计时器等
9. activated
  keep-alive 组件激活时调用。
10. deactivated
  keep-alive 组件停用时调用。

在这里插入图片描述

过渡 (理解-了解)

Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。包括以下工具：
在 CSS 过渡和动画中自动应用 class
可以配合使用第三方 CSS 动画库，如 Animate.css

语法： transition

   <transition name="fade">
	    <p v-if="show">hello</p>
   </transition>

自定义动画 v = name
在进入/离开的过渡中，会有 6 个 class 切换。
1. v-enter：定义进入过渡的开始状态。在元素被插入之前生效，在元素被插入之后的下一帧移除。
2. v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间，延迟和曲线函数。
3. v-enter-to：2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
4. v-leave：定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
5. v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间，延迟和曲线函数。
6. v-leave-to：2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
自定义过渡的类名 – 与三方库 Animate.css
1. 写法1：animate.css@3.5.1
  1. 引入在线的cdn的库或者是下载到本地引入本地静态css文件
    引入在style
    @import url(“https://cdn.jsdelivr.net/npm/animate.css@3.5.1”);
  2. 安装：npm i animate.css@3.x -S
2. 写法2：animate.css@4.x
  1. 引入在线的cdn的库或者是下载到本地引入本地静态css文件
  2. 安装：npm i animate.css -S
  3. 引入：import ‘animate.css’;
3. 初始渲染的过渡
```
<transition appear>
    
</transition>
```
4. 多个元素的过渡
  1. 当有相同标签名的元素切换时，需要通过 key attribute 设置唯一的值来标记以让 Vue 区分它们，否则 Vue 为了效率只会替换相同标签内部的内容
  2. key
5. 过渡模式
  1. 语法：
```
<transition name="fade" mode="out-in">
        
</transition>
```
  2. 属性：
    1. in-out：新元素先进行过渡，完成之后当前元素过渡离开。
    2. out-in：当前元素先进行过渡，完成之后新元素过渡进入。

Provide/ inject

说明：
vue组件之间的数据传递深层数据传递顶级向子代传递数据【例如：父组件->孙子父组件->曾孙子】
语法
提供数据：provide：Object | () => Object
接受数据：inject：Array<string> | { [key: string]: string | Symbol | Object }

基础使用

父组件：

data(){

},
//provide传递数据
//写法1：对象写法  (不经常用)
// provide:{
//     info:'我是-provide传递数据'
// },
//写法2：函数形式 返回对象（读取data中的数据）
provide(){
    //加工处理数据--- 
    return {
        info:'我是-provide传递数据---'+this.count,
        msg:this.msg
    }
},

后代组件：

inject:['msg']
//接受数据--顶层
//写法1：数组--推荐（注意变量要一致且不可以重名）
// inject:['info','msg'],
//写法2:对象
inject:{
    aa:{
        from: 'info',//来源--真实的字段名称 
        default: '默认值'  //设置默认值 
     },
     bb:'msg',
}

提示：provide 和 inject 绑定并不是可响应的。这是刻意为之的

自定义指令

介绍
vue提供的是内置指令 v-for v-if… 自定义指令：自己创建指令-- 指令可以实现特定的功能

注册一个全局自定义指令语法：

注册一个全局自定义指令

Vue.directive('指令名称', {
  //提供函数方法 可以操作元素
     inserted: function (el) {

     }
})

使用： v-指令名称

代码：

//注册全局指令 -- 自动获取焦点 使用：v-focus
Vue.directive('focus',{
    inserted(el){//element当前的指令的元素  <div></div> <input/>
        //el：指令所绑定的元素，可以用来直接操作 DOM。
        el.focus();
    }
})

注册局部指令写法（ directives选项）

用法代码演示

<!-- 定义指令： v-red  字体变红色-->
<h4 v-red>测试指令v-red</h4>
<h4 v-red>测试指令v-red</h4>

<!-- 定义指令： v-color='变量' -->
<h5 v-color='aa'>测试v-color</h5>    // aa 定义的变量

data(){
    return {
                aa:'yellow'
            }
        },
//局部指令
directives: {
    //指令名称：{指令配置功能}
    red:{
        inserted(el){
            el.style.color='red';
        }
    },
    color:{//v-color
        bind(el,binding){
            //el：指令所绑定的元素，可以用来直接操作 DOM
            //binding：一个对象  name：指令名，不包括 v- 前缀 / value：指令的绑定值
            // console.log(el);
            // console.log(binding);
            el.style.color = binding.value;
        }
    }

},

自定义指令带变量打印 ~~console.log(el，binding);~~ 如下图在这里插入图片描述

属性说明：
1. 钩子函数
  一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
  1. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  2. inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  3. update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
2. 钩子函数参数
  指令钩子函数会被传入以下参数：
  1. el：指令所绑定的元素，可以用来直接操作 DOM。
  2. binding：一个对象，包含以下 property：
  3. name：指令名，不包括 v- 前缀。
  4. value：指令的绑定值，例如：v-my-directive=“1 + 1” 中，绑定值为 2。
  5. oldValue：指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用。无论值是否改变都可用。

过滤器

介绍:
Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。
过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号指示：

语法：

 <!-- 在双花括号中 -->
   {{ message | capitalize }}

   <!-- 在 `v-bind` 中 -->
   <div v-bind:id="rawId | formatId"></div>

全局过滤器

 Vue.filter('过滤器名字',function(val){
       //处理val 处理成你想要的数据格式 
           return val+’元'
   })

举例：人民币换算美元

//在main.js文件
	//money 过滤器接受参数变量  第一个是处理的源数据 ,后面的参数就是接受的参数
	Vue.filter('money',function(value,num){
	  num = num || 2;//设置num默认值2 
	  if (!value) return ''
	    //汇率：  value=1000 ---> 
	    //1美元=6.386人民币   1人民币 ≈ 0.1566美元
	    return '$'+(value*0.1566).toFixed(num);//保留位数
	
	})

//文件
	<template>
  <div>
      <h2>vue-过滤器</h2>
      <p>人民币：{{ num }}</p>
      <p>美元：{{ num | money }}</p>

      <!-- 过滤器 传递参数 {{ num | money(xx,xxx) }} -->
      <p>美元2：{{ num | money(4) }}</p>
  </div>
</template>

<script>
export default {
    data(){
        return {
            msg:'hello vue',
            num:800,
        }
    },
}
</script>

<style>
</style>

局部过滤器

作用于当前的组件内部使用

语法:

<script>
       export default {
           data(){
               return {
                   msg:'hello vue',
                   num:800,
                   phone:''
               }
           },
           //局部过滤器 --  过滤日期  年月日 
           filters:{
               //过滤器名称:function(vlaue){ retrun xxx }
               Guophone:function(value){
                   return '+86 '+value;
               }
           }
       }
   </script>

使用
{{ phone | Guophone}}

过滤器传递参数

 <!-- 过滤器 传递参数 {{ num | money(xx,xxx) }} -->
  <p>美元2：{{ num | money(4) }}</p>

前后端交互 – 网络请求

接口调用的方式有哪些
- 原生 xhr
  - 基于 jQuery的ajax
  - fetch - 升级版xhr 基于原生
  - axios - 三方
url 地址格式有哪些
传统的url
协议+域名+端口号+/a/b-路径/?query-参数
query-参数 = ?xx=xx&xx=xx

Restful形式的url
协议+域名+端口号+/a/b-路径/xx/xx
比如：
https://www.zhihu.com/question/493868950

fetch

Fetch API是新的ajax解决方案 Fetch会返回Promise
fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

语法：

  fetch(url, options).then()
   
   fetch(url, {
       body: JSON.stringify(data), // must match 'Content-Type' header
       headers: {
           'content-type': 'application/json'
       },
       method: 'POST', // *GET默认get请求, POST, PUT, DELETE, etc.
   })

请求方式
1. get 查询请求
2. post 添加请求
3. put 修改请求
4. delete 删除请求

fetch语法

get

 fetch('url地址')
 .then()

 fetch('url地址?id=123')
 .then()

post

fetch('url',{
   body:'key=value&key=value',
   headers:{
       'content-type':'application/x-www-form-urlencoded'
   }
})

axios

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
特点：
- 从浏览器中创建 XMLHttpRequests
- 从 node.js 创建 http 请求
- 支持 Promise API
- 拦截请求和响应

语法
安装：npm install axios -S

使用请求方式

get方式

// 为给定 ID 的 user 创建请求
    axios.get('/user?ID=12345')
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

    // 可选地，上面的请求可以这样做
    axios.get('/user', {
        params: {
        ID: 12345
        }
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });

post方式

axios.post('/login',qs.stringify({
           user:'xxx',
           pwd:'密码'
       }))
       .then(res=>{
           console.log(res);
           console.log(res.data);
       })

执行多个并发请求

function getUserAccount() {
    return axios.get('/user/12345');
}

function getUserPermissions() {
    return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
    .then(axios.spread(function (acct, perms) {
        // 两个请求现在都执行完成
}));

 //全局的 axios 默认值 
        axios.defaults.baseURL = '地址';//公共的请求基础地址
        axios.defaults.timeout = 5000; //在超时前，所有请求都会等待 5 秒

vue-跨域

vue.config.js跨域配置

跨域问题： proxy代理 vue-cli配置

创建一个根文件 vue.config.js

module.exports ={
   devServer: {
       // proxy: 'https://www.qyer.com'//缺点: 只能配置一个域名跨域
       proxy: {
           '/api': {
               target: 'https://www.qyer.com',
               ws: true,
               changeOrigin: true,
               pathRewrite:{//重写路径
                   '^/api':''
               }
           },
           // '/foo': {
           //   target: '<other_url>'
           // }
         }

     }
}

Vue三方库

vant

Vant 轻量、可靠的移动端 Vue 组件库

基础使用

安装：npm i vant -S

引入组件

方式一. 自动按需引入组件 (推荐)

npm i babel-plugin-import -D

// 对于使用 babel7 的用户，可以在 babel.config.js 中配置

module.exports = {
    plugins: [
        ['import', {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
        }, 'vant']
    ]
};

方式二. 导入所有组件
Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。
```
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);
```

element

安装：npm i element-ui -S

引入组件

完整引入
在 main.js 中写入以下内容：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

Ant Design of Vue

安装：npm i --save ant-design-vue

引入组件

完整引入【注意的是，样式文件需要单独引入。】
在 main.js 中写入以下内容：

import Vue from 'vue';
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/antd.css';
Vue.config.productionTip = false;

Vue.use(Antd);

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

局部导入组件

import Vue from 'vue';
import { Button, message } from 'ant-design-vue';
import App from './App';

Vue.config.productionTip = false;

/* v1.1.2 */
Vue.component(Button.name, Button);
Vue.component(Button.Group.name, Button.Group);

/* v1.1.3+ 自动注册Button下组件，如Button.Group */
Vue.use(Button);

Vue.prototype.$message = message;

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: { App },
  template: '<App/>',
});

路由

介绍
vue组件中实现页面的跳转配置路由–通过路由实现页面的跳转的

安装路由【方法一】

安装命令:npm install vue-router -S
引入路由插件-【直接在main.js中引入】【单独创建router→index.js文件，再把文件引入到main.js中推荐】
```
  import Vue from 'vue'
  import VueRouter from 'vue-router'
  Vue.use(VueRouter)
```

定义 (路由) 组件

  import Home from './Home.vue'
  import About from './About.vue'

定义路由 – 页面走向

  const routes = [
        { 
            path: '/', //path：地址栏的路径  /+字母
            component: Home  //跳转这个路径显示的组件：页面
        },
        ,
        {
            path:'/about',
            component:About,         //上方  import …… from……引入
            children:[
                {
                    path:'/my',
                    component:()=>(../views/my.vue)    // 上方不需要引入，直接在这儿引入
                }
            ]  
        }
]
    // 访问首页：http://localhost:8080/#/  --> Home
   // 访问新闻：http://localhost:8080/#/news  --> News

创建router实例

// 单独的js 文件 
const router = new VueRouter({
        routes:routes
})	

//  导出 
export default router

挂载路径

  new Vue({
       router:router,   //前后一样可以直接写成router
   })

显示路由出口
```
 <router-view></router-view>
```

路由导航

 <router-link to='/path'>首页</router-link>
 <router-link to='/'>首页</router-link>
 <router-link :to='{name:"Home",params:{}}'></router-link>

属性：
to=‘/+路径’ 路径-路由里面配置的path路径
exact 精准匹配
只有当首页 / 时匹配，其他带有 / 不会进行匹配
<router-link exact to='/'>首页</router-link>

安装路由 vue-cli 【方法二】
1. 安装项目的时候选择 router
2. vue create vue-router

动态路由匹配

介绍
路由传递参数如何给路由传递参数如何接受参数

语法：

 const router = new VueRouter({
        routes: [
            // 动态路径参数 以冒号开头，第一个为参数，第二个以后的为参数
            { path: '/user/:id', component: User }    //   路由地址解析为  ……/user/id
            
        ]
    })

动态路由传递参数

 const routes =[
            {
                path:'/',
                name:'Home',
                component:Home
            },
            {
                path:'/about/:id',//接受参数id
                name:'About',
                component:About,
            }
    ]

组件接受参数：

//页面调用
	<div>{{$route.params.id}}</div>
    <router-link to='/about/123'></router-link>
//方法中调用
    this.$route.params.id

$route
1. fullPath 路由路径的全地址
2. matched 数组格式包含当前的路由路径以及父组件路由路径
3. name 路由名称
4. params {} 路由动态参数定义路由：/user/:uname 接收值：params={uname:xx}
5. path 路由路径走向
6. query 地址栏参数 xx?aa=123

嵌套路由

介绍
路由的嵌套当前的路由下面包含一级或者多级路由导航

写法：

 const routes =[
            {
                path:'/about',
                component:About,
                children: [    //二级路由
                    {
                        path:'aa',//访问路由 /about/aa
                        component
                    },
                   {
                        path:'/bb',//访问路由 /bb,直接访问根路径
                        component
                    },
                ]  
            }
    ]
    })

// 页面中直接是使用
<router-link to='/about/aa'>1</router-link>
<router-link to='/bb'>2</router-link>
// 路由内容出口
<router-view> </router-view>

编程式的导航

介绍
除了使用创建 a 标签来定义导航链接，我们还可以借助 router 的实例方法，通过编写代码来实现
说明：跳转路由的两种方式

标签跳转路由

编程式-js跳转路由

router.push()——会向history添加一个新的记录，带有返回功能

字符串
```
 this.$router.push('/path路径')
```

对象

this.$router.push({
               path:'/xx/123'
           })

对象 name跳转

  this.$router.push({
               name:'命名路由',
               params:{
					传递的参数【路由定义式有参数必须传参】
               }
           })

带查询参数，路由地址的 / 会变成？

// 路由地址带 ？
  this.$router.push({
     path:'路由路经走向',
       query:{
			传递的参数【路由定义式有参数必须传参】
       }
   }) 
   // 地址输出   ： /路由路经走向?传递的参数
           
           
           
//路由地址不带？ 正常/
  this.$router.push({
     path:'路由路经走向/',   //  【直接路由拼接】例：path:'user/${userId}'
   })

router.replace() —— 与router.push（）用法一样，但是不会向history添加一个新的记录，而是直接替换掉
router.go(n)
1. 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n)
2. 在浏览器记录中前进一步，等同于 history.forward()
  router.go(1)
  
  后退一步记录，等同于 history.back()
  router.go(-1)
  
  前进 3 步记录
  router.go(3)

访问
注意：在 Vue 实例内部，你可以通过 $router 访问路由实例。因此你可以调用 this.$router.push

命名路由

介绍
通过一个名称来标识一个路由显得更方便一些，特别是在链接一个路由，或者是执行一些跳转的时候

功能

跳转路由 - 编程式跳转

 this.$router.push({ name: 'User', params: { uname: 123,id:xx } })

router-link 的 to 属性传一个对象

<router-link :to="{ name: 'user', params: { userId: 123 }}">User</router-link>

重定向和别名

重定向也是通过 routes 配置来完成，下面例子是从 /a 重定向到 /b

const router = new VueRouter({
    routes: [
        { path: '/a', redirect: '/b' }
    ]
})

不存在的路径进行重定向
```
{
	path:'/*',
	redirect:'/'  //首页路由地址
}
```
注意：一定放在所有路由配置的最后一项，当地址栏输入不存在的地址时，会自动跳到首页

别名

含义：小名其他名称都是一个人

语法：

   const router = new VueRouter({
        routes: [
            { path: '/a', component: A, alias: '/b' }
        ]
    })

半生过往

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
一起从头学习 vue（未完待整理）

文章目录Vue指令Vue 事件Vue中key属性的作用（考点）数组更新检测对象更新检测Class 与 Style 绑定表单输入绑定计算属性和侦听器组件注册Prop传递数据自定义事件 -- 子传父插槽Vue指令指令：就是以 v-指令=‘表达式’模板语法 - 表达式作用：获取vue数据显示视图模板语法来声明式地将数据渲染进 DOM语法：{{ js表达式 }}v-html=‘表达式’插入HTML数据解析html代码识别标签    &nbs
复制链接

扫一扫