一、Vue—基础知识(指令-事件)
主要内容
- Vue介绍
- Vue安装使用
- Vue常用命令
- Vue事件方法
1、Vue介绍
1.介绍
- 渐进式JavaScript框架(渐进式:项目中可以逐步使用vue框架 可以使用一部分 或者整个项目)
- 框架单页面的应用程序(vue项目入口:只有一个页面index.html)
- 跳转的页面由功能--路由(其他页面组件)
- 框架里面使用的是虚拟DOM 没有js BOM DOM
2.特点
1. 易用
2. 灵活
3. 高效
3.优缺点
1.优点:易用 灵活 高效 易于维护
2.缺点:
1.首页加载速度慢
2.不利于搜索引擎优化
2、Vue使用
1.使用vue(局部使用)
- 引入Vue的cnd网址或者下载到本地js文件 (类型:jquery.js)
- 创建vue实例
- 代码演示
<body>
<h2>普通的css布局实现的项目</h2>
<p>测试vue使用在项目中,不是整个项目用vue写的 局部使用</p>
<p id='ms'>ms--{{ msg }}</p>
<!-- 使用vue -->
<div id='app'>
<p>vue的区域了 app-- </p>
<p>获取vue数据:{{ msg }}</p>
<p>{{ arr }}</p>
</div>
<!-- 创建vue实例 -->
<script>
const vm = new Vue({
el:'#app',//获取element元素
data:{
msg:'hello 各位老板',
arr:[5,2,1]
}
})
</script>
</body>
- 搭建vue项目
-
兼容性
Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性。但它支持所有兼容 ECMAScript 5 的浏览器。 -
安装vue 命令行工具 (CLI)
-
介绍:Vue 提供了一个官方的 CLI,为单页面应用 (SPA) 快速搭建繁杂的脚手架。它为现代前端工作流提供了开箱即用的构建设置。
-
网址:https://cli.vuejs.org/zh/
-
版本:Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推荐 v10 以上)
-
先安装yarn: npm i yarn -g (推荐)
-
安装vue-cli:
npm install -g @vue/cli (下载模块:npm install 模块 )
或者
yarn global add @vue/cli (下载模块:yarn add 模块 )命令来检查其版本是否正确
vue --version
-
-
创建一个vue项目–通过脚手架vue-cli
-
创建vue项目: vue create vue-project
说明:vue项目名称最好是英文 不能包含驼峰命名法 -
按需项目需要的依赖配置
-
进入项目
cd 项目名称 -
启动项目
npm run serve
或者
yarn serve -
打包项目
npm run build
-
-
3、目录结构
vue-project
node_moudles 安装包依赖–模块
public 单页面入口-index.html
src 资源文件–前端
assets 静态文件资源-放置css js images
components 公共组件–组件化(样式 布局 效果)
App.vue 根组件
main.js 入口配置文件
.browserslistrc 浏览器配置
.gitignore 上传git仓库 忽略的文件配置
babel.config.js babel配置
package.json 项目配置文件(查看项目安装的依赖 版本 名称.....)
readme.md 项目说明文件
yarn.lock 配置信息 忽略
4、Vue组件组成
1、组成:三部分
- template 视图标签 (template标签不会被渲染 只是包裹作用) 必写
- script 逻辑代码
- style 样式
scope 样式作用域 当前作用域
2、创建组件
- xxx.vue 后缀.vue结尾
- 三部分组件 快捷键
3、组件使用
- 引入组件
- 注册组件
- 使用组件
<script>
//1. 引入组件
import Banner from './components/Banner.vue'
export default {
name: 'App',
//2. 注册组件
components: {
Banner,
}
}
</script>
<!-- 3. 使用组件 -->
<Banner></Banner>
5、Vue指令
指令:就是以 v-指令=‘js环境’ 具体特定的工具 ,指令。
-
模板语法 - 表达式
- 作用:获取vue数据 显示视图 模板语法来声明式地将数据渲染进 DOM
- 语法:{{ js表达式 }}
-
v-html=‘’ -原生HTML
- 作用:输出真正的 HTML,你需要使用 v-html 指令 (innerHTML)
- 语法:
-
v-text=‘’
- 作用:渲染视图 innerText
- 语法:
-
v-if=‘’ 条件渲染
- 作用:是否显示元素/ true 显示 false 隐藏
- 语法:
- 特点:
v-if=‘’ 控制元素是否渲染 或者 销毁
-
v-else
- 作用:是对 v-if=''的结果取反
- 语法:
xxxx
-
v-else-if
- 作用:是否显示元素 与v-if v-else-if 多语句判断
- 语法:
xxxx
-
v-show=‘’
-
作用:是否显示元素/ true 显示 false 隐藏
-
语法:
-
特点:
控制元素的 display:block/none -
v-if与v-show区别?
v-if: 控制元素的渲染或者销毁
v-show:控制元素的 display:block/none
场景:
频繁切换: v-show
初次渲染优化:v-if
-
-
v-for=‘’ - 列表渲染
-
作用:遍历数组或者对象
-
语法:
- {{ item }}
-
属性
- item 第一个元素 表示数组的每一项内容
- index 第二个元素 表示数组的下标 0 1 …
- arr 数组数据
-
v-bind:属性=‘’ 绑定属性 key=‘’
-
作用:做当前数据的唯一标识 一般写的是id 不推荐 index
-
语法:
简写:<div :key=''></div>
-
-
1. 遍历对象:
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }}: {{ value }}
</div>
value 对象的值
key 对象的键名
index 下标0 1 ...
2. v-for 与 v-if 一同使用
3. 注意我们不推荐在同一元素上使用 v-if 和 v-for 、v-for 的优先级比 v-if 更高
4. 解决方法:
```
<ul>
<template v-for="item in zaoshi">
<li :key="item.id" v-if="item.flag">
{{ item.fruit }}
</li>
</template>
</ul>
```
-
v-bind:属性=‘’ 动态绑定属性
-
作用:给标签元素 绑定一个动态属性
-
语法:
1. <div v-bind:key=''></div> 2. 简写: <div :key=''></div>
6、Vue事件
-
介绍
可以用 v-on 指令监听 DOM 事件,并在触发时运行一些 JavaScript 代码 -
定义事件
语法:<div v-on:事件名=‘dosomething’>
函数dosomething定义的位置:
要求定义mothds属性中 -
事件:1. this指向 2. 事件传递参数 3. 事件对象event
-
事件的this指向 当前组件实例对象
-
事件传递参数 v-on:click=‘canshu(1,2)’
-
事件对象event
- 函数不带参数 第一个参数默认是事件对象 event
- 函数带参数 事件对象需要手动传递 $event
v-on:事件名=‘函数’
简写:
@事件名=‘函数’
二、Vue-事件-计算属性-侦听器
1、Vue事件–下
- 绑定事件:<div v-on:事件名=“函数名”>
- 实现方法:
methods:{
函数名(){
}
} - 事件对象 event
1.无参数传递:第一个参数就是event
2.有参数传递:需要手动传递事件对象 - 事件修饰符
.stop *
.prevent *
.capture
.self
.once
.passive - 按键修饰符
.enter *
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right - 系统修饰符
.ctrl
.alt
.shift
.meta - 鼠标按键修饰符
.left
.right
.middle
2、Vue中key属性的作用(考点)
1、作用:key的作用主要是为了高效的更新虚拟DOM
2、高效的Diff算法
3、数组更新检测
1、说明:在列表渲染中,如果遍历是数组,当数组数据发生改变时,页面什么时候能自动更新(页面重新渲染)
2、实现数组视图同步更新
- 变更方法(修改了原数组)
push()
pop()
shift()
unshift()
splice()
sort()
reverse() - 替换数组(修改后返回的数组 原数据不修改 视图想同步更新 覆盖原数组) filter()、concat()和slice()
4、对象更新检测
1.说明:对象修改后 视图同步更新视图 – 内存:栈内存 堆内存
2. 实现对象视图同步更新
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')
}
6、Class与Style绑定
1.介绍:动态的添加class或者是style样式
2.绑定 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>
4、绑定内联样式
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'
}
}
7、Tabs切换
7.1 表单输入绑定
-
介绍
你可以用 v-model 指令在表单 input、textarea 及 select 元素上创建双向数据绑定
通过指令 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">
<基本等价于,因为内部还有一些其他的处理 >
e v e n t 是 事 件 对 象 , event是事件对象, event是事件对象,event.target.value表示input框中的输入值<input :value="val" @input="val = $event.target.value">
7.2 计算属性与侦听器
-
计算属性
- 介绍: 处理数据后把数据缓存起来 使用数据的时候使用的缓存的数据,但是如果原数据修改了 重新计算
- 语法
computed:{
msg2(){
console.log(‘计算属性: 对数据进行加工处理 缓存数据’);
return this.msg.split(‘’).reverse().join(‘’);
}
} - 使用计算属性
- 直接获取名字 不加()
- {{ 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组件
1、组件注册
-
局部组件
- 创建一个组件.vue
- 引入:import Mycomp from ‘./components/Mycomp.vue’
- 注册组件
export default {
name: ‘App’,
components: {
Mycomp
}
} - 使用组件
<Mycomp> </Mycomp>
-
组件组成
- template 视图
- script 逻辑
- style 样式
-
全局组件
-
注册全局组件 在Vue对象身上有个Vue.component() 注册全局组件 在所有的组件中 不需要引入 可以直接使用
-
语法:
Vue.component(‘my-component-name’, {
// … 选项 …
}) -
代码演示
// 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:{ } })
-
全局组件–可以挂载创建好的局部组件 注册全局
import MyBanner from ‘./components/MyBanner.vue’
// Vue.component(‘MyBanner’,MyBanner)
Vue.component(MyBanner.name,MyBanner) -
vue 不同构建版本
1. vue.js 完整版 --编译器+ 运行时
2. vue.runtime.js 运行时
-
4.补充一个知识点
1. 组件的视图模板组成
2. <template> 标签
3. template 属性使用
4. render() render函数渲染 -- react
5. 优先级问题
<template> 标签 > render() > template (修改vue.js)
2、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' } } }, }
3、自定义事件 – 子传父
-
作用:把子组件的数据传递给父组件 通过自定义事件
-
语法
-
子组件定义事件
this.$emit(‘getData’,this.msg) -
父组件-调用子组件上面接受自定义事件
<子组件 @自定义事件名=‘函数名’/>methods:{
函数名(val){
this.xx = val;
}
}
-
-
特殊的prop传递函数
- prop传递的是一个函数名 <子组件 :fun=‘函数名’ />
- 子组件接受props:[‘fun’]
- 子组件调用 父组件传递的函数名fun this.fun() fun()
4、总结所有vue指令
指令:v-指令=‘表达式’ / v-xx=‘js环境’
-
v-text=‘表达式’
插入字符串数据 -
v-html=‘表达式’
- 插入HTML数据 解析html代码 识别标签
- 注意:不安全
-
v-show=‘表达式’
- 是否显示 true显示 false隐藏
- 控制css属性:diplay:block/none
-
v-if=‘’
- 是否显示 true显示 false隐藏
- 控制元素的创建和销毁
-
v-else
-
v-else-if=‘’
-
v-for=‘’
-
遍历数组 和对象
-
语法:
{{ item }}{{ item }}
-
-
v-on:事件名=‘函数名’
-
绑定事件 简写: @事件名=‘函数名’
-
<div v-on:click='demo'>点击</div>
-
事件-修饰符
- .stop
- .prvent
- 键盘: .enter
-
-
v-bind:属性=‘’
- 动态绑定属性 简写: :属性=‘’
- 语法:
<div v-bind:class='demo'>点击</div>
-
v-model=‘’
- 表单操作 获取数据 — 双向数据绑定
- 语法:
<input v-model='msg' />
- 实现原理:``html <input :value=‘val’ @input=‘val=$event.target.value’ /> `
-
v-slot=‘’
-
显示插槽内容
-
语法:
<template v-slot:插槽名字='数据'></template>
-
-
v-pre
-
不需要表达式 跳过这个元素和它的子元素的编译过程 – 不编译vue语法 直接输出内容
-
<div v-pre>{{ msg }}</div>
-
-
v-cloak
-
这个指令保持在元素上直到关联实例结束编译。和 CSS 规则如 [v-cloak] { display: none } 一起用时,这个指令可以隐藏未编译的 Mustache 标签直到实例准备完毕。
-
[v-cloak] {
display: none;
}{{ message }}
-
-
v-once
- 只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。
- 可以用于优化更新性能
- 语法:
<div v-once>一定不修改:{{ msg }}</div>
四、Vue生命周期
1、动态组件
-
作用:实现组件的动态切换 加载哪个组件
-
语法:
-
特点:
通过组件销毁 和重建过程实现组件切换 -
在动态组件上使用 keep-alive – 失活了
<keep-alive> <component :is='加载的组件名称'></component> </keep-alive>
-
keep-alive
Props:
include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
max - 数字。最多可以缓存多少组件实例。使用:
include 和 exclude prop 允许组件有条件地缓存。二者都可以用逗号分隔字符串、正则表达式或一个数组来表示: <!-- 逗号分隔字符串 --> <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>
2、异步组件
- 说明:使用组件的时候再去加载这个组件,提高代码执行速度
- 默认引入组件:
提前加载组件
import CompA from “./CompA.vue”; - 异步组件写法:–局部
- const CompB = ()=>import(‘./CompB.vue’)
- 或者
components: {
CompA,
CompB,
// CompB:()=>import(‘./CompB.vue’),
// CompC:()=>import(‘./CompA.vue’),
//…
}
3、处理边界问题
-
介绍:
访问元素 & 组件 – 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’
-
4、MVVM设计模式 (理解)
-
MVC MVVM
- M model 数据-模型
- V view 视图
- VM viewmodel 视图和数据的链接
-
为什么要使用MVVM
低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候,View也可以不变。 可复用:可以把一些视图逻辑放到一个ViewModel里面,让很多View重用这段视图逻辑。 独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
5、生命周期函数
- 生命周期:vue从创建vue实例到组件销毁的过程 自动创建的函数
-每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数 - 生命周期函数:
- beforeCreate new vue实例后 创建之前 – 获取到data methods 和数据等。
- created *** 创建之后
- beforeMount 挂载之前
- mounted *** 挂载完毕 – 初次获取DOM元素的地方
- beforeUpdate 更新之前 数据更新了 视图时旧的
- updated *** 更新之后 数据和视图 同步
- beforeDestory 销毁之前 什么都可以用
- destory 销毁之后 清空数据 或者时计时器等
- activated keep-alive 组件激活时调用。
- deactivated keep-alive 组件停用时调用。
6、过渡 (理解-了解)
-
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:当前元素先进行过渡,完成之后新元素过渡进入。
-
五、Vue-网络请求
1、过滤器
-
介绍:
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+’元’
})
- Vue.filter(‘过滤器名字’,function(val){
-
局部过滤器
- 作用于当前的组件内部使用
- 语法:
<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>
2、前后端交互–网络请求
- 接口调用的方式有哪些
- 原生 xhr
- 基于 jQuery的ajax
- fetch - 升级版xhr 基于原生
- axios - 三方
-
url 地址格式有哪些
传统的url
协议+域名+端口号+/a/b-路径/?query-参数
query-参数 = ?xx=xx&xx=xxRestful形式的url
协议+域名+端口号+/a/b-路径/xx/xx
比如:
https://www.zhihu.com/question/493868950
2.1 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’
}
})
-
2.2 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) { // 两个请求现在都执行完成 }));
-
3、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>'
// }
}
}
}
4、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);
-
-
六、Vue-路由
1、路由
1.1、介绍
vue组件中实现页面的跳转 配置路由--通过路由实现页面的跳转的
1.2、安装路由
1、安装命令:npm install vue-router -S
2、引入路由插件--main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.user(VueRouter)
3、定义(路由)组件
import Home from './Home.vue'
import About from './About.vue'
4、定义路由---页面走向
const routes=[
{
path:'/' , // path: 地址栏的路径 /+字母
component: Home // 跳转这个路径显示的组件:页面
},
{ path:'/news/, component:News},
]
访问首页:http://localhost:8080/#/ --->Home
访问新闻:http://loaclhost:8080/#/news --News
5、创建router实例
const router=new VueRouter({
routes:routes
})
6、挂载路径
new Vue({
router:router,
})
7、显示路由出口
```<router-view></router-view>```
8、路由导航
```<router-link to='/path'>首页</router-link>```
```<router-link to='/'>首页</router-link>```
```<router-link to='/news'>新闻<router-link>```
1.3 安装路由 vue-cli
- 安装项目的时候选择router
- vue create vue-router
2、动态路由匹配
2.1. 介绍
路由传递参数 如何给路由传递参数 如何接受参数
2.2. 语法:
const router = new VueRouter({
routes: [
// 动态路径参数 以冒号开头
{ path: ‘/user/:id’, component: User }
]
})
2.3. 获取动态路由传递的参数
- this.$route.xxx
2.4. $route
- fullPath 路由路径的全地址
- matched 数组格式 包含当前的路由路径 以及 父组件路由路径
- name 路由名称
- params {} 路由动态参数 定义路由:/user/:uname params={uname:xx}
- path 路由路径走向
- query 地址栏参数 xx?aa=123
3、嵌套路由
3.1. 介绍
路由的嵌套 当前的路由下面包含一级或者多级路由导航
3.2. 写法:
const router = new VueRouter({
routes: [
{
path:'/zhinan',
component:Zhinan,
children:[//二级路由
{
path:'anzhuang',//访问地址: /zhinan/anzhuang -- 推荐写法
component:,
children:[//三级路由
]
},
{
path:'/base',//访问地址: /base
component:,
}
]
}
]
})
4、编程式的导航
4.1. 介绍
除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现
说明:跳转路由的两种方式
-
标签跳转路由
-
编程式-js跳转路由
-
router.push()
-
router.replace()
-
router.go(n)
-
这个方法的参数是一个整数,意思是在 history 记录中向前或者后退多少步,类似 window.history.go(n)
-
在浏览器记录中前进一步,等同于 history.forward()
router.go(1)后退一步记录,等同于 history.back()
router.go(-1)前进 3 步记录
router.go(3)
-
-
4.2. 访问
注意:在 Vue 实例内部,你可以通过 r o u t e r 访 问 路 由 实 例 。 因 此 你 可 以 调 用 t h i s . router 访问路由实例。因此你可以调用 this. router访问路由实例。因此你可以调用this.router.push
5、命名路由
5.1. 介绍
通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候
5.2. 功能
-
跳转路由 - 编程式跳转
this.$router.push({ name: ‘User’, params: { uname: 123,id:xx } }) -
router-link 的 to 属性传一个对象
User
6、重定向和别名
-
重定向也是通过 routes 配置来完成,下面例子是从 /a 重定向到 /b
const router = new VueRouter({
routes: [
{ path: ‘/a’, redirect: ‘/b’ }
]
}) -
别名
- 含义:小名 其他名称 都是一个人
- 语法:
const router = new VueRouter({
routes: [
{ path: ‘/a’, component: A, alias: ‘/b’ }
]
})