文章目录
Vue指令
指令:就是以 v-指令=‘表达式’
-
模板语法 - 表达式
- 作用:获取vue数据 显示视图 模板语法来声明式地将数据渲染进 DOM
- 语法:{{ js表达式 }}
-
v-html=‘表达式’
插入HTML数据 解析html代码 识别标签 注意:不安全
- 作用:输出真正的 HTML,你需要使用 v-html 指令 (innerHTML)
- 语法:
<span v-html="变量"></span>
-
v-text=‘表达式’
- 作用:渲染视图 innerText
- 语法:
<span v-text="变量"></span>
-
v-if=’ 表达式’ 条件渲染
- 作用:是否显示元素 —— true 显示 / false 隐藏
- 语法:
<span v-if="boolean表达式"></span>
- 特点:
v-if=‘’ 控制元素是否渲染 或者 销毁
-
v-else
- 作用:是对 v-if=''的结果取反
- 语法:
<span v-if="boolean表达式"></span>
<span v-else>xxxx </span>
-
v-else-if
- 作用:是否显示元素 与v-if v-else-if 多语句判断
- 语法:
<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=’ ’ - 列表渲染
- 作用:遍历数组或者对象
- 语法:
<li v-for="(item,index) in arr" :key="">
{{ item }}
</li>
3. 属性 1. item 第一个元素 表示数组的每一项内容 2. index 第二个元素 表示数组的下标 0 1 ... 3. arr 数组数据
- v-bind:属性=’ ‘ 绑定属性 key=’ ’
- 作用:做当前数据的唯一标识 一般写的是id 不推荐 index
- 语法:
<div v-bind:key=''></div>
简写:<div :key=''></div>
value 对象的值 key 对象的键名 index 下标0 1 ... 6. v-for 与 v-if 一同使用 1. 注意我们不推荐在同一元素上使用 v-if 和 v-for 、v-for 的优先级比 v-if 更高 2. 解决方法: ```javascript5. 遍历对象: `<div v-for="(value, key, index) in object">` ` {{ index }}. {{ key }}: {{ value }}` `</div>`
- {{ item.fruit }}
-
v-bind:属性=‘’ 动态绑定属性
- 作用:给标签元素 绑定一个动态属性
- 语法:
<div v-bind:class='demo'>点击</div>
简写:<div :class='demo'>点击</div>
-
v-on:事件名=‘函数名’
- 绑定事件 简写: @事件名=‘函数名’
-
点击
- 事件-修饰符
见下
-
v-model=‘’
-
表单操作 获取数据 — 双向数据绑定
-
语法:
<input v-model='msg' />
-
实现原理:
<input :value='val' @input='val=$event.target.value' />
-
-
v-slot=‘’
- 显示插槽内容
- 语法:
<template v-slot:插槽名字=‘数据’>
-
v-pre
- 不需要表达式 跳过这个元素和它的子元素的编译过程 – 不编译vue语法 直接输出内容
<div v-pre>{{ msg }}</div>
-
v-cloak
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。[v-cloak] { display: none; } <div v-cloak> {{ message }} </div>
-
v-once
- 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。
- 可以用于优化更新性能
- 语法:
<div v-once>一定不修改:{{ msg }}</div>
Vue 事件
-
介绍
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码 -
定义事件
语法:<div v-on:事件名='dosomething'></div>
函数dosomething定义的位置:
要求定义mothds
属性中 -
事件:1. this指向 2. 事件传递参数 3. 事件对象event
- 事件的this指向 当前组件实例对象
- 事件传递参数
v-on:click='canshu(1,2)'
- 事件对象event
- 函数不带参数 第一个参数默认是事件对象 event
- 函数带参数 事件对象需要手动传递 $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算法
数组更新检测
- 说明:在列表渲染中,如果遍历是数组,当数组数据发生改变时,页面什么时候能自动更新(页面重新渲染)
- 实现数组视图同步更新
-
变更方法 (修改了原数组)
push()
pop()
shift()
unshift()
splice()
sort()
reverse() -
替换数组(修改后返回新的数组 原数据不修改 视图想同步更新 覆盖原数组)
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
-
直接绑定变量
<div v-bind:class='变量'></div>
-
对象语法 ***
<div v-bind:class="{类名: 表达式-true显示类名、false隐藏 ,类名:boolean}"></div>
-
数组语法
<div v-bind:class="[变量1,变量2, {类名:boolean}]"></div>
-
-
绑定内联样式
v-bind:style 的对象语法十分直观——看着非常像 CSS,但其实是一个 JavaScript 对象。CSS property 名可以用驼峰式 (camelCase) 或短横线分隔 (kebab-case,记得用引号括起来) 来命名-
对象语法
<div v-bind:style="{css样式:变量,... }"></div>
-
数组语法
<div v-bind:style="[baseStyles, overridingStyles]"></div>
-
直接变量
<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 运行时
四. 补充一个知识点
-
组件的视图模板组成
<template>
标签- template 属性使用
- render() render函数渲染 – react
-
优先级问题
<template>
标签 > render() > template (修改vue.js)
Prop传递数据
-
作用:实现组件之前数据传递- 父传子
-
语法
-
父组件:
<子组件 msg='hello' :info='' ></子组件>
-
子组件:
数组接收: props:['msg','info'] 对象接收方式: props:{ msg:数据类型 info:{ type:String, default:'默认值' }, ... 如下-prop验证 }
-
子组件使用父组件数据 直接当data里面的数据 使用
{{ msg }}
-
-
注意:
- prop传递数据时正向传递 父串子 数据时响应式的 父组件数据修改了 子组件同步更新
- 子组件不能直接修改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传递函数
- prop传递的是一个函数名 <子组件 :fun=‘函数名’ />
- 子组件接受 props:[‘fun’]
- 子组件调用 父组件传递的函数名 fun this.fun() fun()
插槽
-
说明:Vue 实现了一套内容分发的 API,定义时不知道具体要显示什么,只是留出来显示的位置,在组件调用时写具体内容,能展现在预留的位置上。
-
定义:
使用 标签预留位置 -
调用组件时
写具体的要呈现的内容,要显示在标签中
<组件> xxx </组件> -
匿名插槽 (常用的)
// 定义时: <slot name='default'></slot> / <slot></slot>
-
具名插槽 (常用的)
-
定义插槽的时候 有名字name属性
<slot name='header'></slot> <slot name='footer'></slot>
-
使用
<template v-slot:footer> 底部区域 </template>
-
注意:使用的时候 有名字的 在具名插槽里面显示 没有名字找匿名插槽
-
-
作用域插槽
-
作用: 让插槽内容能够访问子组件中才有的数据 (插槽提供数据)
-
语法:
<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组件之间数据传递
-
Prop
父传子 -
自定义事件 子传父
this.$emit('自定义事件名','传参')
-
访问根实例 $root
new Vue({ data:{ } })
- js:
this.$root.xx
template:{{ $root.xx }}
-
访问父级组件实例 $parent
this.$parent.xxx
{{ $parent.xx }}
-
获取子组件实例
this.$children[0]
-
访问子组件实例或子元素–$ref -操作DOM元素
-
获取DOM元素:
<div ref='xx'></div>
this.$refs.xx 获取div-dom元素 -
获取子组件实例
<Son ref='xx'/>
this.$refs.xx
-
-
原型链
Vue.prototype.$user='admin'
-
MVVM设计模式 (理解)
- MVC MVVM
- M model 数据-模型
- V view 视图
- VM viewmodel 视图和数据的链接
- 为什么要使用MVVM
- 低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候,View也可以不变。
- 可复用:可以把一些视图逻辑放到一个ViewModel里面,让很多View重用这段视图逻辑。
- 独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
生命周期函数【 最常用标识 ★ 】
- 生命周期:vue从创建vue实例到组件销毁的过程 自动创建的函数
-每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数 - 生命周期函数:
beforeCreate
new vue实例后 创建之前 ——· 获取不到data methods 和数据等。- created ★
创建之后——最早网络请求(性能会更好)【最早可以操作data中 数据 或者 调用methods中的方法】 beforeMount
挂载之前,函数执时,模版已在内存中编译好,但未挂载到页面,此时页面还是旧的未更新。- mounted ★
挂载完毕 – 初次获取DOM元素【操作DOM元素】
执行完mounted,表示vue实例初始化完成 beforeUpdate
更新之前 数据更新了 视图是旧的- updated ★
更新之后 数据和视图 同步 beforeDestory
销毁之前 什么都可以用destory
销毁之后 清空数据 或者时计时器等activated
keep-alive 组件激活时调用。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 切换。-
v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。
-
v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。
-
v-enter-to:2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除),在过渡/动画完成之后移除。
-
v-leave:定义离开过渡的开始状态。在离开过渡被触发时立刻生效,下一帧被移除。
-
v-leave-active:定义离开过渡生效时的状态。在整个离开过渡的阶段中应用,在离开过渡被触发时立刻生效,在过渡/动画完成之后移除。这个类可以被用来定义离开过渡的过程时间,延迟和曲线函数。
-
v-leave-to:2.1.8 版及以上定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除),在过渡/动画完成之后移除。
-
-
自定义过渡的类名 – 与三方库 Animate.css
-
写法1:animate.css@3.5.1
-
引入在线的cdn的库 或者是下载到本地 引入本地静态css文件
引入在style
@import url(“https://cdn.jsdelivr.net/npm/animate.css@3.5.1”); -
安装:npm i animate.css@3.x -S
-
-
写法2:animate.css@4.x
- 引入在线的cdn的库 或者是下载到本地 引入本地静态css文件
- 安装:npm i animate.css -S
- 引入:import ‘animate.css’;
-
初始渲染的过渡
<transition appear> <!-- ... --> </transition>
-
多个元素的过渡
- 当有相同标签名的元素切换时,需要通过 key attribute 设置唯一的值来标记以让 Vue 区分它们,否则 Vue 为了效率只会替换相同标签内部的内容
- key
-
过渡模式
-
语法:
<transition name="fade" mode="out-in"> <!-- ... the buttons ... --> </transition>
-
属性:
- in-out:新元素先进行过渡,完成之后当前元素过渡离开。
- 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);如下图 - 用法代码演示
-
属性说明:
-
钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):- bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
- update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
-
钩子函数参数
指令钩子函数会被传入以下参数:- el:指令所绑定的元素,可以用来直接操作 DOM。
- binding:一个对象,包含以下 property:
- name:指令名,不包括 v- 前缀。
- value:指令的绑定值,例如:v-my-directive=“1 + 1” 中,绑定值为 2。
- 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 - 三方
- 原生 xhr
-
url 地址格式有哪些
传统的url
协议+域名+端口号+/a/b-路径/?query-参数
query-参数 = ?xx=xx&xx=xxRestful形式的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. })
-
请求方式
- get 查询请求
- post 添加请求
- put 修改请求
- 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-跨域
- 跨域问题: 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 【方法二】
- 安装项目的时候选择 router
- 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
- fullPath 路由路径的全地址
- matched 数组格式 包含当前的路由路径 以及 父组件路由路径
- name 路由名称
- params {} 路由动态参数 定义路由:/user/:uname 接收值:params={uname:xx}
- path 路由路径走向
- 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)
-
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)
-
在浏览器记录中前进一步,等同于 history.forward()
router.go(1)后退一步记录,等同于 history.back()
router.go(-1)前进 3 步记录
router.go(3)
-
- router.push()——会向history添加一个新的记录,带有返回功能
-
访问
注意:在 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' } ] })