【vue.js|vue基础入门之侦听器、计算属性、vue-cli、vue组件】作者:大月月.vue基础入门
分享知识:vue基础入门
?:拒绝摆烂,天天向上
vue基础入门
-
- vue基础入门
- 侦听器
-
- 1. 什么是 watch 侦听器
- 2. 使用 watch 检测用户名是否可用
- 3. immediate 选项
- 4. deep 选项
- 5. 监听对象单个属性的变化
- 计算属性
-
- 1. 什么是计算属性
- 2. 计算属性的特点
- vue-cli
-
- 1. 什么是单页面应用程序
- 2. 什么是 vue-cli
- 3. 安装和使用
- 4. vue 项目的运行流程
- vue组件
-
- 1. 什么是组件化开发
- 2. vue 中的组件化开发
- 3. vue 组件的三个组成部分
-
- 3.1 template
- 3.2 script
- 3.3 style
- 4. 组件之间的父子关系
-
- 4.1 使用组件的三个步骤
- 4.2 通过 components 注册的是私有子组件
- 4.3 注册全局组件
- 5. 组件的 props
-
- 5.1 props 是只读的
- 5.2 props 的 default 默认值
- 5.3 props 的 type 值类型
- 5.4 props 的 required 必填项
- 6. 组件之间的样式冲突问题
-
- 6.1 思考:如何解决组件样式冲突的问题
- 6.2 style 节点的 scoped 属性
- 6.3 /deep/ 样式穿透
侦听器 1. 什么是 watch 侦听器
watch 侦听器允许开发者监视数据的变化,从而针对数据的变化做特定的操作。2. 使用 watch 检测用户名是否可用
语法格式如下:
文章图片
监听 username 值的变化,并使用 axios 发起 Ajax 请求,检测当前输入的用户名是否可用:
watch: {
// 监听 username 值的变化
async username(newVal) {
if (newVal === '') return
// 使用 axios 发起请求,判断用户名是否可用
const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(res)
}
}
3. immediate 选项
默认情况下,组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用,则需要使
用 immediate 选项。示例代码如下:
watch: {
username: {
// handler 是固定写法,表示当 username 的值变化时,自动调用 handler 处理函数
handler: async function (newVal) {
if (newVal === '') return
const { data: res } = await axios.get('https://www.escook.cn/api/finduser/' + newVal)
console.log(res)
},
// 表示页面初次渲染好之后,就立即触发当前的 watch 侦听器
immediate: true
}
}
4. deep 选项
如果 watch 侦听的是一个对象,如果对象中的属性值发生了变化,则无法被监听到。此时需要使用 deep 选5. 监听对象单个属性的变化
项,代码示例如下:
文章图片
如果只想监听对象中单个属性的变化,则可以按照如下的方式定义 watch 侦听器:计算属性 1. 什么是计算属性
文章图片
计算属性指的是通过一系列运算之后,最终得到一个属性值。2. 计算属性的特点
这个动态计算出来的属性值可以被模板结构或 methods 方法使用。示例代码如下:
文章图片
① 虽然计算属性在声明的时候被定义为方法,但是计算属性的本质是一个属性vue-cli 1. 什么是单页面应用程序
② 计算属性会缓存计算的结果,只有计算属性依赖的数据变化时,才会重新进行运算
单页面应用程序(英文名:Single Page Application)简称 SPA,顾名2. 什么是 vue-cli
思义,指的是一个 Web 网站中只有唯一的一个 HTML 页面,所有的功能
与交互都在这唯一的一个页面内完成。
vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。3. 安装和使用
引用自 vue-cli 官网上的一句话:
程序员可以专注在撰写应用上,而不必花好几天去纠结 webpack 配置的问题。
中文官网:链接: https://cli.vuejs.org/zh/.
vue-cli 是 npm 上的一个全局包,使用 npm install 命令,即可方便的把它安装到自己的电脑上:4. vue 项目的运行流程
npm install -g @vue/cli
基于 vue-cli 快速生成工程化的 Vue 项目:vue create 项目的名称
在工程化的项目中,vue 要做的事情很单纯:通过 main.js 把 App.vue 渲染到 index.html 的指定区域中。vue组件 1. 什么是组件化开发
其中:
① App.vue 用来编写待渲染的模板结构
② index.html 中需要预留一个 el 区域
③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中
组件化开发指的是:根据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。2. vue 中的组件化开发
vue 是一个支持组件化开发的前端框架。3. vue 组件的三个组成部分
vue 中规定:组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。
每个 .vue 组件都由 3 部分构成,分别是:3.1 template
template -> 组件的模板结构
script -> 组件的 JavaScript 行为
style -> 组件的样式
其中,每个组件中必须包含 template 模板结构,而 script 行为和 style 样式是可选的组成部分。
vue 规定:每个组件对应的模板结构,需要定义到 节点中。3.2 script
文章图片
注意:
template 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素
template 中只能包含唯一的根节点
vue规定:开发者可以在script节点中封装组件的JavaScript业务逻辑3.3 style
script节点的基本结构如下
文章图片
? .vue 组件中的 data 必须是函数
vue 规定:.vue 组件中的 data 必须是一个函数,不能直接指向一个数据对象。
因此在组件中定义 data 数据节点时,下面的方式是错误的:
文章图片
会导致多个组件实例共用同一份数据的问题,请参考官方给出的示例:链接: https://cn.vuejs.org/v2/guide/components.html.
#data-必须是一个函数
vue 规定:组件内的style> 节点是可选的,开发者可以在style节点中编写样式美化当前组件的 UI 结构。4. 组件之间的父子关系
script 节点的基本结构如下:
文章图片
?让 style 中支持 less 语法
在 style>标签上添加 lang=“less” 属性,即可使用 less 语法编写组件的样式:
文章图片
4.1 使用组件的三个步骤
文章图片
文章图片
?组件在被封装好之后,彼此之间是相互独立的,不存在父子关系 在使用组件的时候,根据彼此的嵌套关系,形成了父子关系、兄弟关系
4.2 通过 components 注册的是私有子组件
文章图片
例如:4.3 注册全局组件
在组件 A 的 components 节点下,注册了组件 F。
则组件 F 只能用在组件 A 中;不能被用在组件 C 中。
在 vue 项目的 main.js 入口文件中,通过 Vue.component() 方法,可以注册全局组件。示例代码如下:5. 组件的 props
文章图片
props 是组件的自定义属性,在封装通用组件的时候,合理地使用 props 可以极大的提高组件的复用性!5.1 props 是只读的
它的语法格式如下:
文章图片
vue 规定:组件中封装的自定义属性是只读的,程序员不能直接修改 props 的值。否则会直接报错:5.2 props 的 default 默认值
文章图片
要想修改 props 的值,可以把 props 的值转存到 data 中,因为 data 中的数据都是可读可写的!
文章图片
在声明自定义属性时,可以通过 default 来定义属性的默认值。示例代码如下:5.3 props 的 type 值类型
文章图片
在声明自定义属性时,可以通过 type 来定义属性的值类型。示例代码如下:5.4 props 的 required 必填项
文章图片
在声明自定义属性时,可以通过 required 选项,将属性设置为必填项,强制用户必须传递属性的值。示例代6. 组件之间的样式冲突问题
码如下:
文章图片
默认情况下,写在 .vue 组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题。6.1 思考:如何解决组件样式冲突的问题
导致组件之间样式冲突的根本原因是:
① 单页面应用程序中,所有组件的 DOM 结构,都是基于唯一的 index.html 页面进行呈现的
② 每个组件中的样式,都会影响整个 index.html 页面中的 DOM 元素
为每个组件分配唯一的自定义属性,在编写组件样式时,通过属性选择器来控制样式的作用域,示例代码如下:6.2 style 节点的 scoped 属性
文章图片
为了提高开发效率和开发体验,vue 为 style 节点提供了 scoped 属性,从而防止组件之间的样式冲突问题:6.3 /deep/ 样式穿透
文章图片
如果给当前组件的 style 节点添加了 scoped 属性,则当前组件的样式对其子组件是不生效的。如果想让某些样
式对子组件生效,可以使用 /deep/ 深度选择器。
文章图片
推荐阅读
- 卡拉云|最好用的 7 款 Vue admin 后台管理系统测评
- Vue实战--电商后台管理系统|Vue实战之 3. 登录/退出功能
- 前端|vue社区之---前端面试(前端中的那些方法)
- springboot|Springboot+Vue+Element实现的CRM管理系统
- java进阶-框架篇|springboot + VUE实现后台管理系统(集成JWT接口权限验证)
- SpringBoot教学|如何快速使用SpringBoot+Vue前后端分离实现echarts图形可视化(入门详细教程)
- springboot|Springboot+Vue+axios实现对文章收藏功能
- linux|前后端分离 -- Spring Boot + Vue实现视频管理系统 并部署阿里云服务器
- electron|使用Electron的webview组件开发一款无跨域功能的浏览器