vue第二次笔记

Vue

axios

基本概念

const result = axios({
    method: 'get',
    url: 'http://www.liulongbin.top:3006/api/getbooks'
});
// axios 返回的是 promise，要调用 then 方法
result.then(res => {
    // 被包装的结果，要使用 res.data 获取真实数据
    console.log(res.data);
})

简化异步请求的发送

let btn = document.querySelector('.btn');
btn.onclick = async function() {
    const { data: res } = await axios({
        method: 'get',
        url: 'http://www.liulongbin.top:3006/api/getbooks'
    })
    console.log(res.data);
}

data数据的定义

// 必须以函数的形式来返回
data () {
    return {
        username: 'zhangsan'
    }
}

组件使用三步骤

// 1. import 导入
import Left from '@/components/Left.vue'

// 2. 注册组件
export default {
    components: {
        Left
    }
}

<!-- 3. 模板中使用组件 -->
<div class="app-container">
    <h1>App 根组件</h1>
    <hr/>
    <Left></Left>
</div>

全局组件注册，解决重复注册

// 在main.js 中全局注册
import Count from '@/components/Count.vue'
// 第一个参数起别名 
Vue.component('MyCount', Count);

计算属性

定义的时候是个方法，用的时候直接挂载到了属性上

computed: {
    fullState() {
    	return this.list.every((item) => item.goods_state);
    }
}

props 属性

// 组件的自定义属性，封装通用组件时，提高复用性
export default {
    // 通过 props 指定接收数据，是只读的
    props: ['init'],
    data () {
        return {
            count: 0
        }
    }
}

<div class="right-container">
    <h3>Right 组件</h3>
    <hr />
    // 通过 :变为属性绑定 里面写表达式，即这里直接是数字 9
    <MyCount :init='9'></MyCount>
</div>

给定一些相关属性

// 对象形式
props: {
    init: {
        //  给 props 一个默认值
        default: 0,
        type: String,
        required: true
    }
}

scoped

// 这会将 每个标签加上自定义属性 而后 通过 属性选择器 确定只在组件内部的作用域
<style lang="less" scoped>
</style>

/deep/

// 运用第三方库的时候可用  这样可以修改子级元素样式
/deep/ h3 {
    color: pink;
}

组件的生命周期

几个常用的 如：

created （已经加载好数据，但没有dom）

mounted：（已经有dom）

updated（数据变化后已经重新渲染了dom）

组件之间的数据共享

父向子传值

通过自定义属性传值

父组件写法：

<template>
    <div class="app-container">
        <Test :info='info' :msg='msg'></Test>
    </div>
</template>

<script>
import Test from '@/components/Test.vue'
export default {
    data() {
        return {
            info: {
                name: 'lisi',
                age: 12
            },
            msg: 'hello'
        }
    },
    components: {
        Test
    }
}
</script>

子组件写法

<template>
    <div class="test-demo">
        <h3>{{ mymsg }}</h3>
        <h3>{{ myinfo }}</h3>
    </div>
</template>

<script>
export default {
    props: ['msg', 'info'],
    data() {
        return {
            mymsg: this.msg,
            myinfo: this.info
        }
    },
}
</script>

子向父传值（事件传递）

子组件：

export default {
    data () {
        return {
            count: 0
        }
    },
    methods: {
        addCount() {
            this.count++;
			// 触发自定义事件  并携带参数
            this.$emit('changeNum', this.count);
        }
    },
}

父组件：

export default {
    data() {
        return {
            countFromSon: 0
        }
    },
    methods: {
		// 接收事件触发传递过来的参数
        changeNum (val) {
            this.countFromSon = val;
        }
    },
}

兄弟组件之间共享数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-z1AAl7pK-1651760109609)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220101135743692.png)]

ref 引用

作用：获取dom元素

vue特有的获取dom元素的方法

<template>
    <div class="right-container">
        // 通过 ref 属性来绑定到 vue 实例的 $refs
        <h3 ref="myh3">Right 组件</h3>
        <button @click="showDom">按钮</button>
        <hr />
    </div>
</template>

showDom() {
    // 通过 $refs 可访问到该 dom 元素  其中键名为myh3，键值为该dom元素
	console.log(this.$refs.myh3);
}

ref 操作组件

<template>
    <div class="app-container">
        <button @click="reset">根组件按钮</button>
        <Right ref="comRight"></Right>
    </div>
</template>

reset() {
	this.$refs.comRight.reset();
    //this.$refs.comRight.count = 0;
}

$nextTick(cb)方法

将cb回调推迟到下一个DOM更新周期之后执行

这里的场景是等dom重新渲染出输入框，再执行函数

showIpt() {
    this.inputVisible = !this.inputVisible;
    this.$nextTick(() => {
        this.$refs.iptRef.focus();
    })
}

动态组件

利用component占位，根据组件名，渲染需要的组件

<button @click="comName = 'Left'">Left 组件</button>
<button @click="comName = 'Right'">Right 组件</button>

<!-- 渲染 Left 组件和 Right 组件 -->
<component :is="comName"></component>

keep-alive

<!-- keep-alive 让组件缓存起来，不让其重新销毁创建 -->
<keep-alive>
    <component :is="comName"></component>
</keep-alive>

// 组件被激活时触发的函数
activated() {
	console.log('Left 组件激活');
},
// 被切走时触发的函数
deactivated() {
	console.log('Left 组件失活');
}

<!-- keep-alive 包含或不包含的组件，逗号这里不能用空格 -->
<keep-alive include="Left,Right" exclude="...">
    <component :is="comName"></component>
</keep-alive>

插槽

插槽（Slot）是vue为组件的封装者提供的能力。允许开发者在封装组件时，把不确定的、希望由用户指定的部分定义为插槽。

// 定义插槽
<div class="left-container">
    <h3>Left 组件</h3>
    <hr />
    // 插槽带有名字
    <slot name="default"></slot>
</div>

// 使用插槽
<Left>
    // 指定使用插槽的名字，简写为   #default
    <template v-slot:default>
		<p>这是一段插槽文本</p>
    </template>
</Left>

// 定义插槽
<div class="left-container">
    <h3>Left 组件</h3>
    <hr />
    // 用户没有指定内容，其显示的后备内容
    <slot name="default">后备内容</slot>
</div>

作用域插槽

<Article>
    <!-- 作用域插槽，可用 scope（形参）接收定义插槽时赋予的属性 -->
    <template #title="scope">
        <p>这是标题</p>
        <p>{{ scope }}</p>
     </template>
</Article>

<div class="header">
    <!-- 定义插槽，赋予属性 -->
    <slot name="title" msg="hello vue"></slot>
</div>

自定义指令

bind 函数

使用指令

<h1 v-color >App 根组件</h1>

定义指令

export default {
    directives: {
        color: {
            // 被绑定上时执行，el 形参表示被指定的元素
            bind(el) {
                console.log('触发bind');
                el.style.color = 'red';
            }
        }
    }
}

指令传值

使用指令并传值

<h1 v-color="color">App 根组件</h1>

export default {
    data() {
        return {
            color: 'blue'
        }
    },
    directives: {
        color: {
            // binding 表示指定对象
            bind(el, binding) {
                console.log(binding);
                el.style.color = binding.value;
            }
        }
    }
}

update 函数

// 只在更新时调用
update(el, binding) {
    el.style.color = binding.value;
}

bind 与 update 简化写法

export default {
    data() {
        return {
            color: 'blue'
        }
    },
    directives: {
        // 以函数的方式书写 update 与 bind 同时绑定
        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) {
    el.style.color = binding.value;
})

设定全局URL

// 在 main.js 中导入并配置
axios.defaults.baseURL = 'http://www.liulongbin.top:3006'
Vue.prototype.$http = axios

// 发送请求
async postInfo() {
    const { data: res } = await this.axios.post('/api/post', { name: 'zs', age: 20 });
    console.log(res);
}

EsLint

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9TECjtnC-1651760109612)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\image-20220118155027882.png)]

Router

前端路由工作方式

1. 用户点击了页面上的路由链接
2. 导致了URL地址栏中的Hash值发生了变化
3. 前端路由监听了到Hash地址的变化
4. 前端路由把当前Hash地址对应的组件渲染都浏览器中

首次使用

创建与导入

// 在 src/router/index.js 创建
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
const router = new VueRouter()

export default router

// 在 main.js 中导入
import router from '@/router/index.js'
new Vue({
  render: h => h(App),
  router
}).$mount('#app')

配置并使用

const router = new VueRouter({
  routes: [
     // 注意这里是 / ，没有 #
    { path:'/home', component: Home },
    { path:'/movie', component: Movie },
    { path:'/about', component: About }
  ]
})

<!-- 以下写法可被内部标签替换 -->
<a href="#/home">首页</a>
<a href="#/movie">电影</a>
<a href="#/about">关于</a>

<router-view></router-view>

内部标签写法

<router-link to="/home">首页</router-link>
<router-link to="/movie">电影</router-link>
<router-link to="/about">关于</router-link>

<router-view></router-view>

路由重定向

路径跳转

const router = new VueRouter({
  routes: [
     // 
    { path:'/', redirect: '/home' }
  ]
})

嵌套路由

父级路由的书写

<div class="about-container">
    <h3>About 组件</h3>
    <router-link to="/about/tab1">tab1</router-link>
    <router-link to="/about/tab2">tab2</router-link>
    <hr />
    <router-view></router-view> 
</div>

router 中的 index.js 的路由配置

const router = new VueRouter({
  routes: [
    { path:'/about', component: About,
      // 配置重定向
      redirect: '/about/tab1',
      // 配置子路由
      children: [
      { path: 'tab1', component: Tab1 },
      { path: 'tab2', component: Tab2 }
    ]}
  ]
})

动态路由匹配

动态路由指的是:把 Hash地址中可变的部分定义为参数项，从而提高路由规则的复用性。在vue-router 中使用英文的冒号(:）来定义路由的参数项。

链接的定义

<router-link to="/movie/1">上海滩</router-link>
<router-link to="/movie/2">赌神</router-link>
<router-link to="/movie/3">赌侠</router-link>

路由的配置

const router = new VueRouter({
  routes: [
    // 动态匹配路由
    { path:'/movie/:id', component: Movie },
  ]
})

动态路由中参数的获取

<div class="movie-container">
  <!-- 获取路由中的 id 参数 -->
  <h3>Movie 组件 --- {{ $route.params.id }}</h3>
  <button @click="showMsg">展示信息</button>
</div>

通过 props 的简化写法

// router 配置
const router = new VueRouter({
  routes: [
    // props 开启属性
    { path:'/movie/:id', component: Movie, props: true },
  ]
})

接收与使用

export default {
  props: ['id'],
}

<h3>Movie 组件 --- {{ id }}</h3>

查询参数的使用

<!-- path 获取路径  fullPath 获取全路径  query 获取查询参数 -->
<h3>Movie 组件 --- {{ $route.path }} 
--- {{ $route.query }} -- 
{{ $route.fullPath }}</h3>

uter = new VueRouter({
routes: [
// 动态匹配路由
{ path:‘/movie/:id’, component: Movie },
]
})

<br/>

##### 动态路由中参数的获取

```html
<div class="movie-container">
  <!-- 获取路由中的 id 参数 -->
  <h3>Movie 组件 --- {{ $route.params.id }}</h3>
  <button @click="showMsg">展示信息</button>
</div>

通过 props 的简化写法

// router 配置
const router = new VueRouter({
  routes: [
    // props 开启属性
    { path:'/movie/:id', component: Movie, props: true },
  ]
})

接收与使用

export default {
  props: ['id'],
}

<h3>Movie 组件 --- {{ id }}</h3>

查询参数的使用

<!-- path 获取路径  fullPath 获取全路径  query 获取查询参数 -->
<h3>Movie 组件 --- {{ $route.path }} 
--- {{ $route.query }} -- 
{{ $route.fullPath }}</h3>