该文章仅供个人复习，不是重点没有代码示例，代码是在脚手架中运行。
这里写目录标题
一、基础
1、 生命周期
| vue的生命周期 | 描述 |
|---|---|
| beforCreate | 这里是在初始化数据之前 |
| created | 初始化数据之后 |
| beforeMount | 数据和html合并了，但是没有开始渲染 |
| mounted | 渲染完成之后 |
| beforeUpdate | 不知道 |
| updated | 不知道 |
| beforeDestroy | 不知道 |
| destroyed | 不知道 |
2、 基本指令
| 指令 | 描述 |
|---|---|
| v-if 和 v-else | 逻辑渲染 |
| v-text | 文本渲染，缩写是{{}} |
| v-once | 文本渲染，只渲染一次 |
| v-for | 批量渲染 |
| v-bind 或 : | 绑定标签的属性，支持对象写法或数组写法，缩写是: :class="[类名,{'类名':boolean}]" |
| v-model | 双向绑定，如：<input type="text" v-model="a"/> 当输入值的时候，data中的a也会随之input框中的值变化 |
| v-on 或 @ | 事件，如：@click="函数名 | ()=>{}" |
| v-show | 显示或者隐藏，内部其实是一个display |
二、组件基础
组件基础----->Vue对象的参数：data、watch、filters、computed、methods、components、生命周期钩子函数…下面一一介绍
1、data
1、data必须是一个函数，data是vue注重数据渲染中的数据
使用：----其实也看不出什么
new Vue({
data(){
return{
number: 1
}
}
})
2、watch
2、侦听属性watch，它会观察并响应数据--至于响应数据我还不理解是什么
new Vue({
watch:{
data中的名称:{
hander(newval,odlval){ //新的值，旧的值
},
deep:true|false,//是否深度侦听
immediate: true|false //true会从初始值开始侦听，false不会
}
},
// 也可以像下面这样写
watch:{
data中的名称(newval,odlval){}
}
})
3、过滤器filters
3、过滤器filters，其实就是一个模板，比如：我需要在每一个数字上面加上一个元。
// 注意：这里的例子是用脚手架的，懒得换了。
<template>
<div @click="number++" style="color: white">
{{number | money}} //使用是用一个 | 加上计算属性的名称，注意这里可以写多个|
</div>
</template>
<script>
export default {
data(){
return{
number: 1
}
},
filters:{
money(num){
return num+'元'
}
}
}
</script>
4、计算属性computed
4、计算属性computed，它可以监听到数据的变化，可以完成逻辑运算、算术运算..，和函数调用，最后只要返回一个结果就行了。
那这样描述跟侦听属性都没什么区别了呢，侦听属性也可以做运算和调用函数啊。
这里我主要觉得区别最大的是：
1、侦听属性只能侦听一个data中的属性，然后计算属性是可以侦听多个属性。
2、然后侦听属性是可以返回上一个值和新的值，计算属性没有
// 注意：这里的例子是用脚手架的，懒得换了。
<template>
<div @click="count++" style="color: white">
{{h | money}}
</div>
</template>
<script>
export default {
data(){
return{
number: 10,
count: 10
}
},
filters:{
money(num){
return num+'元'
}
},
computed:{
h:function(){
return this.number*this.count
}
}
}
</script>
5、methods
5、methods这个是一堆函数的集合，在里面写函数用的
6、components子组件
6、components子组件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<a-b></a-b> //第四步：使用子组件
</div>
//第一步、组件模板，里面写html
<template id="a">
<div>{{h}}</div>
</template>
<script>
// 第二步：这里是一个局部注册组件
let asse = {
template: '#a',//这里引用模板
data(){ //数据源
return {
number: 10,
count: 10
}
},
computed:{ //计算属性
h(){return this.number * this.count}
},
filters:{
money(val){return val + '元'}
}
}
new Vue({
el: '#app',
data(){return{}},
components:{'aB': asse}//第三步：-----这里是引入子组件，然后在<div id="app">上使用，主要这里是小驼峰命名，在那边大写字母会被-分开
})
</script>
</body>
</html>
7、created生命周期
7、生命周期created钩子函数一搬会在请求后端数据的时候拿来做初始化，数据用的，因为这个时候数据和view是没有进行合并的。
三、父子组件之间传值
这里我的多说一点，了解父子组件之间的传值是必要的。有两个原因
1、在使用别人的组件的时候你会知道人家是怎么把值传出来的
2、自己定义组件的时候你要怎么把值传出来，或者怎么实现数据的增删改查
1、父组件向子组件传值
下面介绍 父组件如何向子组件传值，主要是用到了prop
//----父组件向子组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
// 第四步
<a-b number="1" ></a-b>
</div>
// 第一步
<template id="a">
<div>
<div>{{number}}</div>
</div>
</template>
<script>
//第二步
let asse = {
template: '#a',
props:['number']
}
new Vue({
el: '#app',
data(){
return{}
},
components:{
'aB': asse //第三步
}
})
</script>
</body>
</html>
2、子组件向父组件传值
// 子组件向父组件传值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<a-b number="1" @add="e => getNumber(e)"></a-b>
</div>
<template id="a">
<div>
<div>{{number}}</div>
<button @click="addNumber">加一</button>
</div>
</template>
<script>
let asse = {
template: '#a',
props:['number'],
data(){
return {num: this.number}
},
methods:{
addNumber(){
this.num++
// 把事件名称和值抛出去
this.$emit('add',this.unm)
}
}
}
new Vue({
el: '#app',
components:{'aB': asse},
methods:{
getNumber(e){console.log(e)}
}
})
</script>
</body>
</html>
四、搭建脚手架
1、安装node.js环境
https://blog.csdn.net/qq_45716444/article/details/118664180?spm=1001.2014.3001.5501
2、利用idea搭建脚手架
https://blog.csdn.net/qq_45716444/article/details/116771126?spm=1001.2014.3001.5501
3、利用Vscode搭建脚手架
https://blog.csdn.net/qq_45716444/article/details/117158760?spm=1001.2014.3001.5501
五、使用ant design of vue组件
1、安装组件
使用vsCode或idea安装好脚手架之后，就可以使用一些公开的组件了，这里介绍ant design of vue，官网是https://www.antdv.com/docs/vue/introduce-cn/。先在vsCode的终端执行npm install ant-design-vue --save
2、在main.js中配置
然后在src目录下面找到main.js这个文件，把下面三行复制上去就行了。官网有介绍
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'
Vue.use(Antd)
3、怎么使用这些组件呢
//在src下面创建一个page文件夹，然后在里面创建一个abs.vue文件，然后在src下面
//找到一个router的文件夹，这个router在我们安装脚手架的时候就默认安装了，可以
//好好看看安装脚手架那堆yes no你就会发现了，然后找到index.js，里面的配置在下下面
//然后abs文件里面放下面这些代码
<style scoped>
.spin-content {
border: 1px solid #91d5ff;
background-color: #e6f7ff;
padding: 30px;
}
</style>
// template下面只能存在一个 html标签，然后这个写法就是父子组件传值上面的写法！！！！
<template>
<div>
// 加载中组件
<a-spin tip="Loading...">
<div class="spin-content">
我的描述文案是自定义的。。。
</div>
</a-spin>
</div>
</template>
// 路由的配置
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
component: () => import('@/page/abs) //这个是
}
]
})
六、vue路由、拦截器和嵌套路由
https://blog.csdn.net/qq_45716444/article/details/116848264?spm=1001.2014.3001.5501
七、前后端交互的axios
有空写
八、axios的封装思想 – 我们老师指导我的
https://blog.csdn.net/qq_45716444/article/details/118884031
九、Vuex没有父子关系的组件共享数据
有空写
扫一扫
220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
