Vue基础入门(二)
Vue基础入门目录
- 一、过滤器vue3已经删除!!!!!!
- 1.什么是过滤器(Filters)
- 2.代码展示
- 3.私有过滤器和全局过滤器
- 4.过滤器的注意点
- 5.优化时间代码示例
- 二、watch 侦听器
- 1.什么是 watch 侦听器
- 2.侦听器的格式
- 2.1方法格式的侦听器
- 2.2对象格式的侦听器
- 3. immediate 选项
- 4. deep 选项
- 三、计算属性
- 1. 什么是计算属性
- 2.特点:
- 3.好处:
- 四、axios
- 1.axios 的基本使用
- 1.1 发起 GET 请求:
- 1.2. 发起 POST 请求:
- 1.3.重要-解构!!!
- 2.基于axios.get和axios.post请求
- 五、vue-cli 的使用
- 1.什么是单页面应用程序
- 2.什么是 vue-cli
- 3. 安装和使用
- 3.1在终端下运行如下的命令,创建指定名称的项目:
- 4.vue 项目中 src 目录的构成:
- 5. vue 项目的运行流程
- 六、vue组件
- 1. 什么是组件化开发
- 2. vue 中的组件化开发
- 3. vue 组件[UI结构的复用]的三个组成部分
- 3.1 template
- 3.2 script封装js业务逻辑-vue 组件中的 data 必须是函数
- 3.3 style-让 style 中支持 less 语法
- 4.组件之间的父子关系
- 4.1 使用组件的三个步骤
- 复习:路径中的@是在webpack.config.js中配置好的
- 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/ 样式穿透
- 小补充:
一、过滤器vue3已经删除!!!
1.什么是过滤器(Filters)
它是 vue 为开发者提供的功能,常用于文本的格式化
。
过滤器可以用在两个地方:插值表达式和 v-bind 属性绑定
。
过滤器应该被添加在 JavaScript 表达式的尾部,由“管道符”进行调用,
2.代码展示
// 过滤器函数,必须被定义到 filters 节点之下// 过滤器本质上是函数filters: {// 注意:过滤器函数形参中的 val,永远都是“管道符”前面的那个值capi(val) {// 字符串有 charAt 方法,这个方法接收索引值,表示从字符串中把索引对应的字符,获取出来// val.charAt(0)const first = val.charAt(0).toUpperCase()// 字符串的 slice 方法,可以截取字符串,从指定索引往后截取const other = val.slice(1)// 强调:过滤器中,一定要有一个返回值return first + other}}
3.私有过滤器和全局过滤器
在 filters 节点下定义的过滤器,称为**“私有过滤器”**,因为它只能在当前 vm 实例所控制的 el 区域内使用。
如果希望在多个 vue 实例之间共享过滤器,则可以定义全局过滤器
// 使用 Vue.filter() 定义全局过滤器
//第一个参数是全局过滤器的名字,第二个参数是处理函数Vue.filter('capi', function (str) {const first = str.charAt(0).toUpperCase()const other = str.slice(1)return first + other + '~~~'})
4.过滤器的注意点
- 要定义到 filters 节点下,本质是一个函数
- 在过滤器函数中,一定要有 return 值
- 在过滤器的形参中,可以获取到“管道符”前面待处理的那个值
- 如果全局过滤器和私有过滤器名字一致,此时按照“就近原则”,调用的是”私有过滤器“
5.优化时间代码示例
使用dayjs.js使用文档
// 声明格式化时间的全局过滤器Vue.filter('dateFormat', function (time) {// 1. 对 time 进行格式化处理,得到 YYYY-MM-DD HH:mm:ss// 2. 把 格式化的结果,return 出去// 直接调用 dayjs() 得到的是当前时间// dayjs(给定的日期时间) 得到指定的日期const dtStr = dayjs(time).format('YYYY-MM-DD HH:mm:ss')return dtStr})
二、watch 侦听器
1.什么是 watch 侦听器
watch 侦听器允许开发者监视数据的变化
,从而针对数据的变化做特定的操作
侦听器本质是个函数,要监听那个数据,就把它作为方法名,只要它发生了变化就会触发这个函数
注意传参时,新值在前,旧值在后。
2.侦听器的格式
2.1方法格式的侦听器
- 缺点1:无法在刚进入页面的时候,自动触发!!!
- 缺点2:如果侦听的是一个对象,如果对象中的属性发生了变化,不会触发侦听器!!!
2.2对象格式的侦听器
- 好处1:可以通过 immediate 选项,让侦听器
自动触发
!!! - 好处2:可以通过 deep 选项,让侦听器
深度监听对象中每个属性的变化
!!!
3. immediate 选项
默认情况下,组件在初次加载完毕后不会调用 watch 侦听器。如果想让 watch 侦听器立即被调用,则需要使用 immediate 选项。
示例代码如下:
immediate 选项的默认值是 false
immediate 的作用是:控制侦听器是否自动触发一次!
4. deep 选项
如果 watch 侦听的是一个对象,如果对象中的属性值发生了变化,则无法被监听到。此时需要使用 deep 选项
三、计算属性
1. 什么是计算属性
计算属性指的是通过一系列运算之后,最终得到一个属性值。
<!-- 在属性身上,: 代表 v-bind: 属性绑定 -->
<!-- :style 代表动态绑定一个样式对象,它的值是一个 { } 样式对象 -->
<!-- 当前的样式对象中,只包含 backgroundColor 背景颜色 -->
<div class="box" :style="{ backgroundColor: `rgb(${r}, ${g}, ${b})` }">{{ `rgb(${r}, ${g}, ${b})` }}
</div>
这样做复用性很低,所以有了计算属性这个概念!
methods: {// 点击按钮,在终端显示最新的颜色show() {console.log(this.rgb)}},
// 所有的计算属性,都要定义到 computed 节点之下// 计算属性在定义的时候,要定义成“方法格式”computed: {// rgb 作为一个计算属性,被定义成了方法格式,// 最终,在这个方法中,要返回一个生成好的 rgb(x,x,x) 的字符串rgb() {return `rgb(${this.r}, ${this.g}, ${this.b})`}}
这个动态计算出来的属性值可以被模板结构或 methods 方法使用。
2.特点:
- 定义的时候,要被定义为“方法”
- 本质当普通的属性使用即可
3.好处:
- 实现了代码的复用
- 只要计算属性中依赖的数据源变化了,则计算属性会自动重新求值!
四、axios
axios 是一个专注于网络请求的库!只负责发请求和拿数据
在后面的vue react都会用axios来请求数据
方法:导入库文件→调用axios方法返回值是 Promise 对象
→axios在请求到数据之后,在真正的数据之外,套了一层壳→data才是真实的数据→get传参用params,post传参用data
1.axios 的基本使用
1.1 发起 GET 请求:
// 1. 调用 axios 方法得到的返回值是 Promise 对象axios({// 请求方式method: 'GET',// 请求的地址url: 'http://www.liulongbin.top:3006/api/getbooks',// URL 中的查询参数params: {id: 1}}).then(function (result) {console.log(result)})
1.2. 发起 POST 请求:
document.querySelector('#btnPost').addEventListener('click', async function () {// 如果调用某个方法的返回值是 Promise 实例,则前面可以添加 await!// await 只能用在被 async “修饰”的方法中const { data: res } = await axios({method: 'POST', url: 'http://www.liulongbin.top:3006/api/post',data: {name: 'zs',age: 20}})console.log(res)})
1.3.重要-解构!!!
document.querySelector('#btnGet').addEventListener('click', async function () {// 解构赋值的时候,使用 : 进行重命名// 1. 调用 axios 之后,只要返回promise对象,使用 async/await 进行简化// 2. 使用解构赋值,从 axios 封装的大对象中,把 data 属性解构出来// 3. 把解构出来的 data 属性,使用 冒号 进行重命名,一般都重命名为 { data: res }const { data: res } = await axios({method: 'GET',url: 'http://www.liulongbin.top:3006/api/getbooks'})// 前面是服务器返回的真实数据,后面是列表数据console.log(res.data)})
2.基于axios.get和axios.post请求
<script>document.querySelector('#btnGET').addEventListener('click', async function () {/* axios.get('url地址', {// GET 参数params: {}}) */const { data: res } = await axios.get('http://www.liulongbin.top:3006/api/getbooks', {params: { id: 1 }})console.log(res)})document.querySelector('#btnPOST').addEventListener('click', async function () {// axios.post('url', { /* POST 请求体数据 */ })const { data: res } = await axios.post('http://www.liulongbin.top:3006/api/post', { name: 'zs', gender: '女' })console.log(res)})</script>
五、vue-cli 的使用
1.什么是单页面应用程序
单页面应用程序(英文名:Single Page Application)简称 SPA,顾名
思义,指的是一个 Web 网站中只有唯一的一个 HTML 页面
,所有的功能
与交互都在这唯一的一个页面内完成。
2.什么是 vue-cli
vue-cli 是 Vue.js 开发的标准工具。它简化了程序员基于 webpack 创建工程化的 Vue 项目的过程。
引用自 vue-cli 官网上的一句话:
程序员可以专注在撰写应用上,而不必花好几天去纠结 webpack 配置的问题。
中文官网:https://cli.vuejs.org/zh/
3. 安装和使用
vue-cli 是 npm 上的一个全局包,使用 npm install 命令,即可方便的把它安装到自己的电脑上:
npm install -g @vue/cli
3.1在终端下运行如下的命令,创建指定名称的项目:
//基于 vue-cli 快速生成工程化的 Vue 项目:
vue create vue项目的名称
4.vue 项目中 src 目录的构成:
assets 文件夹:存放项目中用到的静态资源文件,例如:css 样式表、图片资源components 文件夹:程序员封装的、可复用的组件,都要放到 components 目录下main.js 是项目的入口文件。整个项目的运行,要先执行 main.jsApp.vue 是项目的根组件。
5. vue 项目的运行流程
在工程化的项目中,vue 要做的事情很单纯:
通过 main.js 把 App.vue 渲染到 index.html 的指定区域
中。
其中:
① App.vue 用来编写待渲染的模板结构
② index.html 中需要预留一个 el 区域
③ main.js 把 App.vue 渲染到了 index.html 所预留的区域中
main.js文件
// 导入 vue 这个包,得到 Vue 构造函数
import Vue from 'vue'
// 导入 App.vue 根组件,将来要把 App.vue 中的模板结构,渲染到 HTML 页面中
import App from './App.vue'Vue.config.productionTip = false
// 创建 Vue 的实例对象
new Vue({// 把 render 函数指定的组件,替换掉|渲染到 HTML 页面中//render函数中 渲染的是哪个.vue组件,那么这个组件就叫做根组件render: h => h(App),
}).$mount('#app')// Vue 实例的 $mount() 方法,作用和 el 属性完全一样!
六、vue组件
1. 什么是组件化开发
组件化开发指的是:根据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护。
2. vue 中的组件化开发
vue 是一个支持组件化开发的前端框架。
vue 中规定:组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。
3. vue 组件[UI结构的复用]的三个组成部分
每个 .vue 组件都由 3 部分构成,分别是:
template -> 组件的模板结构
script -> 组件的 JavaScript 行为
style -> 组件的样式
其中,每个组件中必须包含 template 模板结构,而 script 行为和 style 样式是可选的组成部分
3.1 template
vue 规定:每个组件对应的模板结构,需要定义到 节点中。
注意:
template 是 vue 提供的容器标签,只起到包裹性质的作用,它不会被渲染为真正的 DOM 元素
template 中只能包含唯一的根节点
3.2 script封装js业务逻辑-vue 组件中的 data 必须是函数
vue 规定:.vue 组件中的 data 必须是一个函数,不能直接指向一个数据对象,否则会导致多个组件实例共用同一份数据的问题,
请参考官方给出的示例:
https://cn.vuejs.org/v2/guide/components.html#data-必须是一个函数
<script>
// 默认导出。这是固定写法!
export default {// data 数据源// 注意:.vue 组件中的 data 不能像之前一样,不能指向对象。// 注意:组件中的 data 必须是一个函数data() {// 这个 return 出去的 { } 中,可以定义数据return {username: "admin",};},
methods:{chagneName(){// 在组件中, this 就表示当前组件的实例对象console.log(this)this.username = '哇哈哈'}},
};
</script>
3.3 style-让 style 中支持 less 语法
<style>
标签上添加 lang=“less” 属性,即可使用 less 语法编写组件的样式
4.组件之间的父子关系
组件在被封装好之后,彼此之间是相互独立的,不存在父子关系 在使用组件的时候,根据彼此的嵌套关系,形成了父子关系、兄弟关系
4.1 使用组件的三个步骤
App.vue 组件
步骤1:使用 import 语法导入需要的组件
// 1. 导入需要使用的 .vue 组件
import Left from '@/components/Left.vue'
import Right from '@/components/Right.vue'
import Test from '@/components/Test.vue'
步骤2:使用 components 节点注册组件
// 2. 注册组件components: {Left,Right,Test}
步骤3:以标签形式使用刚才注册的组件
<Left></Left>
复习:路径中的@是在webpack.config.js中配置好的
想要导入文件时携带文件扩展名以及配置@的路径提示,先安装Path Autocomplete插件
再在settings.json里输入添加以下:
//左下角设置→右上角
//导入文件时是否携带文件的扩展名
//配置@的路径提示
"path-autocomplete.extensionOnImport": true,
"path-autocomplete.pathMappings": {"@":"${folder}/src"},
4.2 通过 components 注册的是私有子组件
例如:
在组件 A 的 components 节点下,注册了组件 F。
则组件 F 只能用在组件 A 中;不能被用在组件 C 中。
4.3 注册全局组件
如果某个组件频繁被用到,重复注册会很麻烦,可以注册全局组件
解决,只需注册一次,除了自己其他每个组件
都可以直接使用。
在 vue 项目的 main.js 入口文件中,通过 Vue.component() 方法,可以注册全局组件。
5. 组件的 props是自定义属性
props 是组件的自定义属性
,在封装通用组件的时候,合理地使用 props 可以极大的提高组件的复用性!
它的语法格式如下:
//Count.vue 全局组件名为MyCount
count的值是:{{ init }}
<scrpit>
export default {// props 是"自定义属性",允许使用者通过自定义属性,为当前组件指定初始值// 自定义属性的名字,是封装者自定义的(只要名称合法即可)// props 中的数据,可以直接在模板结构中被使用// 注意:props 是只读的,不要直接修改 props 的值,否则终端会报错!// props: ['init'],props: {// 自定义属性A : { /* 配置选项 */ },// 自定义属性B : { /* 配置选项 */ },// 自定义属性C : { /* 配置选项 */ },init: {// 如果外界使用 Count 组件的时候,没有传递 init 属性,则默认值生效default: 0,// init 的值类型必须是 Number 数字type: Number,// 必填项校验required: true}
}
</script>
//Left.vue
<MyCount :init="9"></MyCount>
//使用的是v-bind属性绑定,此处的9是数值,字符串应该再加一层引号
//Right.vue
<MyCount :init="6"></MyCount>
//使用的是v-bind属性绑定,此处的6是数值,字符串应该再加一层引号
前面加v-bind就是js中的数字,不是字符型了
5.1 props 是只读的!!!
vue 规定:组件中封装的自定义属性是只读的
,程序员不能直接修改 props 的值。否则会直接报错!!!!
要想修改 props 的值,可以把 props 的值转存到 data
中,因为 data 中的数据都是可读可写的
data() {return {//this表示当前组件的实例// 把 props 中的 init 值,转存到 count 上count: this.init}},
5.2 props 的 default 默认值
在声明自定义属性时,可以通过 default 来定义属性的默认值。
export default {props: { init: {// 如果外界使用 Count 组件的时候,没有传递 init 属性,则默认值生效default: 0,// init 的值类型必须是 Number 数字type: Number,// 必填项校验required: true}},
5.3 props 的 type 值类型
在声明自定义属性时,可以通过 type 来定义属性的值类型。
5.4 props 的 required 必填项
在声明自定义属性时,可以通过 required 选项,将属性设置为必填项,强制用户必须传递属性
的值。
小结:在封装通用组件的时候,合理地使用 props 可以极大的提高组件的复用性!
6. 组件之间的样式冲突问题
默认情况下,写在 .vue 组件中的样式会全局生效,因此很容易造成多个组件之间的样式冲突问题。
导致组件之间样式冲突的根本原因是:
① 单页面应用程序
中,所有组件的 DOM 结构,都是基于唯一的 index.html 页面
进行呈现的
② 每个组件中的样式,都会影响整个 index.html
页面中的 DOM 元素
6.1 思考:如何解决组件样式冲突的问题
为每个组件分配唯一的自定义属性
,在编写组件样式时,通过属性选择器
来控制样式的作用域
需要同一组件加相同的属性,不同的组件加的属性不一样。
6.2 style 节点的 scoped 属性
为了提高开发效率和开发体验,vue 为 style 节点提供了 scoped 属性,从而防止组件之间的样式冲突问题
:
(在底层Vue会为该组件的标签加上data-v-xxxx)
6.3 /deep/ 样式穿透
如果给当前组件的 style 节点添加了 scoped 属性,则当前组件的样式对其子组件是不生效的。如果想让某些样式对子组件生效,可以使用 /deep/ 深度选择器
当使用第三方组件库时,如果有修改组件默认样式的需求,需要用到/deep/
小补充:
1、实际上浏览器并不认识.vue文件,需要通过Vue模板编译器编译
成js文件再渲染到浏览器
package.json中的vue模板编译器包
"vue-template-compiler": "^2.6.11"
2、被调用的子组件相当于一个构造函数
,是Vue组件的实例对象,以标签形式使用组件相当于new一个构造函数的过程
困了zzzzz
Vue基础入门(二)相关推荐
- Vue(三):vue基础入门
目录 一.侦听器 1.1 什么是watch侦听器 1.2 方法格式的侦听器的应用--判断用户名是否被占用 1.3 immediate属性-对象格式的侦听器 1.4 deep属性-对象格式的侦听器 二 ...
- Vue开发入门(二) | 说说Vue全家桶有哪些~
全家桶,顾名思义,就是一个系列,可以组合开发成完整强大的Vue项目 前言: *Vue两大核心思想:组件化和数据驱动. 组件化:把整体拆分为各个可以复用的个体 数据驱动:通过数据变化直接影响bom展示, ...
- Vue 基础 (二)
一.Vue基础 1.模板语法 插值 a.文本{{ }} (mutache 语法糖,后面会详细讲解mutache) b.纯HTML c.表达式 指令:是带有v-前缀的特殊属性 v-bind v-if v ...
- Vue基础入门(2) Vue.js下载与安装
下载与安装Vue.js Vue.js的官网: https://cn.vuejs.org/ 如果在项目中使用Vue.js框架,有两种方式:一是在页面中使用Script的方式直接引入,可以在官网下载Vue ...
- 第一章 Vue基础入门
文章目录 引言 1.快速入门 1.1.创建项目 1.2.模型和视图 1.3.双向数据绑定 2.{{ }} - 插值 2.1.语法 2.2.案例 3.v-text.v-html(内容绑定) 3.1 语法 ...
- vue的基础知识-vue基础入门
vue的使用分享 1. Vue简介 2.Vue常用指令 3. V-router路由系统 4. Vue生命周期 1. Vue简介 工欲善其事,必先利其器 1.1 Vue是什么? Vue (读音 /vju ...
- Vue基础入门(下)
<script src="https://unpkg.com/vue@next"></script> nvm安装node.jsnvm文档手册 - nvm是一 ...
- 科协arduino二:基础入门二
一:电路基础: 1,电流:电子在导体中流动,形成电流.电流的计量单位是 安培(A), 1 A = 1000 mA (毫安) 2,电压:指电路两端的电势差或电位差.这个电位差引发电子的流动,产生电 ...
- [转载] python基础入门二
参考链接: Python集合Set 写代码,有如下变量,请按照要求实现每个功能 (共6分,每小题各0.5分) name = " aleX" 1)移除 name 变量对应的值两边 ...
最新文章
- docker swarm英文文档学习-8-在集群中部署服务
- 什么时候使用Java的@Override注释,为什么?
- vue切换路由页面数据缓存_Vue-Router实现前端页面缓存
- linux删除含有特殊字符的行,Linux 删除带有特殊字符的文件
- 几个非常实用的JQuery代码片段
- linux mysql 端口配置文件_linux虚拟机中各服务端口及配置文件路径
- PyFlink 开发环境利器:Zeppelin Notebook
- Android 多级树形菜单
- oracle取_后的数字,Oracle SQL语句实现数字四舍五入取整
- 判断数字在字符串中的位置 详解(C++)
- (转)智能投顾只能这么搞!美国证监会发15页指南
- IOS UI TabBar标签栏的使用
- MOOC|Coursera课程批量下载(保持资源原目录结构)
- 计蒜客 17119 Trig Function(切比雪夫多项式)
- android 下载instagram动态中图片的demo
- 运放 - 输出阻抗(Open loop output resistance)Ro
- 搜狗输入法按shift键切换到英文时会清空已输入字符的问题
- Unity初识之阿语显示
- Spark——累加器的理解
- 大数据——Flink 知识点整理
热门文章
- 种植巴旦木树苗需要什么条件?怎么选择巴旦木苗木品种?
- 今日新闻简报 十二条微语早报 每天一分钟 知晓天下事 2月25日
- 【论文阅读笔记】ISSTA 2021-Synthesize solving strategy for symbolic execution
- Histcite数据导入问题解决方案
- wifi mouse hd for linux,wifi mouse电脑版(无线鼠标控制助手)V1.7.3 官方版
- (学习笔记)An Uncertain future: forecasting from static images using variational autoencoders
- 小学计算机辅助教育,计算机辅助教育 [应用现代教育技术辅助小学数学教学] .doc...
- 怎么给电话手表安上Android,电话手表安卓版
- 一款好的记忆卡学习卡片工具有多重要
- mysql基础 Task05:SQL高级处理