##vue
- 用于构建用户界面的前端框架
- vue框架的两个特性
1 数据驱动视图
-
- 单向的数据绑定
-
- vue会监听数据变化,从而自动渲染页面结构
2 双向数据绑定
-
- 在网页中,表单负责采集数据,ajax负责提交数据
-
- 辅助开发者在不操作DOM的前提下,自动把用户填写的内容同步到数据源
MVVM
1. 实现数据驱动视图、双向数据绑定的核心原理
2. - model 表示当前页面渲染时所依赖的数据源
3. - view 表示当前页面所渲染的 DOM 结构
4. - viewmodel 表示vue的实例,是MVVM的核心
####基本使用步骤
1. 导入vue.js的script脚本文件
2. 在页面中声明一个将要被 vue 所控制的DOM区域
3. 创建vm实例对象
4. //创建 vue 实例对象
const vm = new Vue({
// el 属性是固定写法,表示当前vm实例要控制页面的哪个区域,接收的值是一个选择器
el: '#app',
// data 对象就是要渲染到页面上的数据
data: {
username: 'zs'
}
})
vue 指令
-
指令是vue为开发者提供的语法模板,用于辅助开发者渲染页面的基本结构
-
按用途可以分为六类
#####1. 内容渲染指令 -
v-text 指令 缺点:会覆盖元素内部原有的内容
-
{{}} 插值表达式,实际开发用的多,只是内容的占位符,不会覆盖原有的内容
-
v-html 指令的作用:可以把带有标签的字符串,渲染成真正的html内容
#####2. 属性绑定指令 -
注意: {{}} 插值表达式,只能用在元素的内容节点,不能用在元素的属性节点
-
v-bind 可以为元素的属性动态绑定值,简写是英文:
-
在使用v-bind期间,绑定内容如果需要进行动态拼接,则字符串外应该用单引号包裹,例如:
<div :title="'box' + index">只是一个div</div>
#####3. 事件绑定指令
-
v-on 可以简写为@
-
语法格式为:
<button v-on:click="sub">-1</button> methods: { //add: function() {} 可以简写为add() {} add(n) { // vm === this // vm.count +=1 this.count += n }, sub() { this.count -= 1 } }
- 的 应 用 场 景 : 如 果 默 认 的 事 件 对 象 e 被 覆 盖 了 , 则 可 以 手 动 传 递 一 个 的应用场景:如果默认的事件对象e被覆盖了,则可以手动传递一个 的应用场景:如果默认的事件对象e被覆盖了,则可以手动传递一个event,例如:
<button @click="add(2,$event)">+1</button>
methods: {
//add: function() {} 可以简写为add() {}
add(n,e) {
// vm === this
// vm.count +=1
this.count += n
if(this.count % 2 === 0 ) {
e.target.style.backgroundColor = 'blue'
} else {
e.target.style.backgroundColor = 'pink'
}
}
}
- 事件修饰符
-
.prevent
<a href="www.baidu.com" @click.prevent="show">跳到百度</a>
-
.stop 防止冒泡
<button @click.stop="btnclick">按钮</button>
-
-按键修饰符
#####4. 双向绑定指令
- v-model 指令,只能和表单元素使用
- input
- select
#####5. 条件渲染指令
- v-if 每次动态移除和创建元素
- 如果刚进入页面不需要展示,后来也不会用,偶然会用用这个
- v-else-if 必须配合 v-if 一起使用,不然不会被识别
- v-show 动态为元素添加或移除 display改为none
- 频繁的切换时使用
#####6. 列表渲染指令
- 频繁的切换时使用
- v-for
- 官方建议 用到 v-for 之后加一个 :key,并且将id作为key的值
- key的值类型 必须是 字符串或数字,且不允许重复
过滤器 本质是一个函数
- 应用于 插值表达式/v-bind属性绑定
- vue3 不可用
- | 管道符
- 过滤器函数,必须定义到 filters 节点之下,过滤器本质是函数
- 通过函数形参值获取 | 前面的那个值
- 如果全局过滤器和私有过滤器冲突,按就近原则,调用私有过滤器
-
全局过滤器
-
使用 Vue.filter() 定义全局过滤器
Vue.filter('capi', function(str) { const first = str.charAt(0).toUpperCase() const other = str.slice(1) return first + other + '~~~~' })
-
连续使用过滤器,每层过滤器进行加工
-
过滤器可以传参,第一个值永远是 | 前面的那个值
-
watch 侦听器
-
允许开发者监视数据的变化
-
方法格式的侦听器
- 缺点:1.无法在刚进入页面时自动触发
- 2.如果侦听的是一个对象,如果对象的属性发生了变化,不会触发侦听器
-
对象格式的侦听器
- 优点:1.可以通过 immediate 选项;让侦听器自动触发一次
- 2.可以通过 deep 选项,让侦听器深度侦听每个属性的变化
-
深度监听
- ‘info.username’(newVal) {
console.log(newVal);
}
- ‘info.username’(newVal) {
计算属性 ——通过一系列运算得到一个属性值
- 计算属性在定义的时候,要定义“方法格式”
- 使用的时候,当成普通的属性使用即可
- 优点
- 实现了代码的复用
- 只要计算属性中依赖的数据源变了,则计算属性会自动重新求值
axios 专注于网络请求的库
-
axios在请求到数据后,在真正的数据外,套了一层壳
- { config: {}, data: {真实的数据}, headers: {}, request: {}, status: xxx, statusText: "" - }
-
发起 GET 请求
// 1.调用 axios 方法得到的返回值是 promise 对象 axios({ // 请求方式 method: 'GET', url: 'http://www.liulongbin.top:3006/api/getbooks', // url 中的查询参数 params: {}, // 请求体参数 data: {} }).then(function(result) { console.log(result); })
vue-cli
-
1.管理员模式下运行 npm install -g @vue/cli
- 输入 vue -V 查看是否安装成功
- 成功会显示版本号
- 创建项目,指定目录下(用管理员模式创建,否则可能创建失败),地址栏cmd,输入命令
- vue create 项目名称(英文)
- 1 敲回车后新手选择第三个——手动选择
- 2 下一步选择css那一行,去掉Linter
- 3 选择版本2.x或者3.x
- 4 选择less
- 5 默认选择第一项
- 6 y是选择保存之前的选择,n是不保存
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sphclD5t-1652369871183)(image/create-vue.PNG)]
- 选择y后,输入自己的保存风格名称
- 开始下载后,鼠标在页面不能随便滑动,否则会停止下载
- 解决办法,单击窗口栏,ctrl+c
- 成功后切换到项目根目录下,npm run serve
- 如果命令行窗口不小心关掉,项目会停止,打开vscode,终端运行npm run serve即可
-
2.vue项目中src目录构成
- assets 存放静态资源文件,例如:图片,css样式表
- components 存放程序员封装的、可复用的组件
- main.js 项目的入口文件,整个项目的运行,要先运行 main.js
- App.vue 项目的根组件
-
3.vue 要做的事:通过 main.js 把 App.vue 渲染到 index.html 的指定区域中
vue 的组件
-
vue 组件的后缀名为.vue
-
.vue 组件由3部分构成
- template 组件的模板结构
- 只能有一个div
- script 组件的 JavaScript 行为
- style 组件的样式
- template 组件的模板结构
-
组件被封装好之后,彼此之间是相互独立的
-
在使用组件的时候,根据彼此的嵌套关系,才会形成父子、兄弟关系
-
使用组件的三个步骤:
- 1.在父组件中import需要的组件
- 2.使用components 节点注册组件
- 通过 components 注册的是私有子组件
- 3.以标签形式使用刚才注册的组件
-
注册全局组件
- 在vue项目的main.js入口文件中,通过Vue.component()方法,可以注册全局组件
- 代码示例
- // 导入需要的全局组件
- import Count from ‘@/components/Count.vue’
- Vue.component(‘MyCount’,Count)
- 在vue项目的main.js入口文件中,通过Vue.component()方法,可以注册全局组件
-
组件的 props
- // props 是自定义属性,允许使用者通过自定义属性,为当前组件指定初始值
- props:[‘init’],
- props 的default 默认值 没有传递init值时,默认值生效
- props 的type 选项 检查init 的值类型,不是会报错
- props 的required选项 必填校验项
-
vue规定:组件中封装的自定义属性是只读的,程序员不能直接修改,否则会报错
组件之间的样式冲突问题
- 默认情况下,写在.vue组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题
- 解决方式,在style行内加 scoped
组件的生命周期
- 生命周期 一个组件从创建-运行-销毁的整个阶段
- 生命周期函数
- 组件创建阶段 new Vue() beforeCreate-created-beforeMount-mounted 最少执行1次
- created 非常常用
- 经常在它里面,调用 methods方法,请求服务器的数据
- 并且把请求到的数据,转存到data中,供template模板渲染时使用
- 但是模板结构未生成,不能调用DOM
- mounted 可以开始第一次操作组件的dom
- 组件运行阶段 beforeUpdatad-updated 最少执行0次
- 当数据变化之后,为了能够操作最新的dom结构,必须把代码写到updated生命周期函数中
- 组件销毁阶段 beforeDestory-destoryed
- 组件创建阶段 new Vue() beforeCreate-created-beforeMount-mounted 最少执行1次
组件之间的数据共享
- 父向子共享数据
- 使用自定义属性
- 子向父共享数据
- 使用自定义事件
- $emit() 触发自定义事件
- 兄弟组件之间的数据共享
- 在vue2中,使用EventBus
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-j2ROVG5o-1652369871200)(image/eventBus.PNG)]
ref 引用
-
辅助开发者在不依赖jQuery的情况下,获取 DOM 元素或组件的引用
-
当代码需要延迟时,保证括号里的代码可以操作最新的DOM元素
- this.$nextTick(() => { this.$refs.iptRef.focus() })
动态组件
-
component 标签是 vue 内置的,作用:组件的占位符 -->
-
is 属性的值,表示渲染组件的名字 -->
-
keep-alive 缓存内部组件,而不是销毁 -->
-
二者选其一 ,不能同时使用 -->
-
include 指定要缓存的组件 -->
-
exclude 指定不被缓存的组件 -->
<keep-alive include="Left,Right" > <component :is="comName"></component> </keep-alive>
插槽
- <slot></slot>
自定义指令
-
私有自定义指令
- directives
-
-
directives: {
// 定义名为color 的指令,指向一个配置对象
// color: {
// 当指令第一次被绑定到元素上的时候,会立即触发 bind 函数
// 形参中的 el 表示当前的指令所绑定到的那个 DOM 对象
// bind(el, binding) {
// el.style.color = binding.value
// },
// // 在 DOM 更新的时候会触发 bind 函数
// update(el, binding) {
// el.style.color = binding.value
// },
// },// 函数简写形式
color(el, binding) {
el.style.color = binding.value
},
}
-
-
全局自定义指令
-
在main.js文件中定义
- Vue.directive(‘color’, function (el, binding) {
el.style.color = binding.value
})
- Vue.directive(‘color’, function (el, binding) {
ESlint
- 创建项目时选择
- [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KtfQfFSO-1652369871204)(image/ESlint.PNG)]
- 下一项选择 Lint on save
- 下一项倒数第二个
- 如果报错先用管理员模式运行试试
- prettier
- 下载并配置
路由 —— 就是对应关系
- 详情代码及使用见 day7-router-demo1
- 前端路由
- Hash 地址与组件之间的对应关系
- vue-router
- 1.下载vue-router
- npm i vue-router@3.5.2 -S
-
- 创建路由模块
-
在src源代码目录下,新建router/index.js路由模块,并初始化代码如下:
// 1. 导入 Vue 和 VueRouter 的包
import Vue from 'vue'
import VueRouter from 'vue-router'
// 2. 调用 Vue.use() 函数,把 VueRouter 装为插件
Vue.use(VueRouter)
// 3. 创建路由的实例对象
const router = new VueRouter()
export default router
-
- 在 main.js 文件中导入路由并进行挂载
- router: 路由名
- 在 main.js 文件中导入路由并进行挂载
####导航
- 声明式导航
- 点击链接实现导航的方式
- 例如:
- 编程式导航
- 调用API方法实现导航的方式
- 例如: location.href
- // 通过编程式导航API,调到指定页面,会增加一条历史记录
this.$router.push('/movie/1')
- // 不会增加历史记录
this.$router.replace('/movie/2')
- // 后退回上一个页面 超过后退上限则不动
this.$router.go(-1)
- 导航守卫
- 控制路由的访问权限
- 全局前置守卫