vue2

src文档分类

1. assets:存放静态资源 图片字体
2. components 可重用组件
3. router 路由跳转
4. store vuex中的共分享数据
5. views 不同的视图组件，配合路由使用的
6. api：和后台交互，向后台发送请求
7. plugins：插件

app.vue 跟组件

vue的组件

template :生成html代码
script：代码部分，控制模板的数据的来源和行为
style：控制样式

vue export中的属性

1. data

data: function(){
    return{返回附带的属性}; 
}

2. methods

//用来存放方法
methods；{
    方法名(参数){
    return 
    }
}

3. computed：计算属性

变成了属性的方法
{{}}调用时只需要名称不需要像方法一样带括号
和方法的区别是，计算属性会有缓存，加快加载速度

4. mounted

mounted 在页面第一次出现的时候刷新

axios

1. 安装axios:在对应的文件包下

npm install axios -S

2. await的使用

• 要在函数中
• 在函数命要有async关键字

axios的方法

原始的使用方法

var xhttp =new XMLHttpRequest();//创建一个类容器
//发送异步请求
xmlhttpRequest.open(method,url)
xmlHttpRequest.send()
//获取响应了的数据
xmlHttpRequest.onreadystatechange=function(){
    if()//判断返回值以防获取失败
       //使用DOM.innerHTML插入
       DOM>innerHTML=xmlHttpRequest.responseText;
}

目的：是为了能够实现部分刷新的效果
返回值是一个httpresponse
第一种使用方法注意参数的带入
使用方法

1.
axios({
    url:
    method:
}).then((resp)=>{
    对返回值的操作
})
2.省去method
axios.method(url,如果有参数的话参数).then(resp=>{
    操作
})

中括号内表示可选可不选
axios.get(url,[config])
axios.delete(url,[config])
axios.head(url,[config])
axios.options(url,[config])
axios.post(url,data[config])
post也可以用带参数的格式

1. 字符串拼接

在config中携带
{
params:{
    name:
    age:
}
}

---

axios.put(url[,data[,config]])
axios.patch(url,[data[config]])

• config ：查询参数，请求头
• data 请求体数据，最常见的时json格式
• get,head无法携带请求体，被浏览器限制
• options,delete请求可以通过config中的data携带请求体

##自建axios
自己创建 axios对象并进行基础配置

const _axios=axios.create({
baseURL:在每个请求前加上baseURL字符串
headers:加上请求头
params:加载URL后面的参数，类型为简单对象或者URLSearchParams
data：自带请求体对象
withCredentials：跨域时是否携带Cookie 默认为false
responseType:相应格式，默认json
})

注意：在选择携带cookie是要注意在后台启用@crossorigin中添加 allowcredentials=true

拦截器

请求拦截器

axios.interceptors.request.use(
    function(config){
        return response;
    },
    function(error){
        return Promise.reject(error);
    }
);

响应拦截器

axios.interceptors.response.use(
    function(response){
        return response;
    },
    function(error){
        return Promise.reject(error);
    }
);

组件的复用

在需要重用的组件中的js内导入被复用组件
在const options中写入components模块并写入属性名和值

const options ={
    components:{
        "mybutton":mybutton//要是名字一样可以只写值
    }
}

如果是驼峰命名法MyButton，那么在template中使用my-button也是可以识别的
如果需要在复用的组件中加入文字，因该现在原来的组件中加入来占位

如果想让自己的组件在复用的过程中可以自由选择属性的话，可以在导出的options中加入可选的属性
举例：我想传入一个type类型

const options ={
    props:[//多个属性时要用[]
        type:{
            type:String,
            default:"默认值的属性名"
            validator:value=>['default','primary','secondeary'].includes(value)//用来限定写入的值
        },
    ]
}

然后将组件的部分用:class绑定属性多个属性要用[]

router

router配置

1. 导入各个组件以及router依赖
2. vue.use(router)
3. 创建路由

const routes=[{
    path；'/',
    name:访问名称,//也可以直接写入path中
    component:组件
},
  {
      path:'/about',
      name:访问名称
      component:组件
  }           
             ]///配置
//创建
constoruter =new VueRouter({
    routes
})
//确认能导出
export default router

其中寻找对应的路径是通过从上到下，因此我们可以在最后的位置配上一个*来确定寻找错误的情况

##动态导入

component: () => import(路径)

使用动态导入就不用在最上边进行静态导入

嵌套路由

在其中加入children属性,是个数组，然后其中的写法和上边一样，可以加入redirect(重定向属性)来确定初始页面
要想嵌套的组件能显示要注意在父组件中加入属性
使用router-link 标签，写上链接进行跳转

动态路由

从数据库中加入到前端路由中
登录之后使用for和addrouter进行添加
每次注销的时候要注意恢复路由

在router中写一个函数
exoprt function ResetROuter(){
    router.matcher =new VueRouter{{routes}}.matcher
}

跨组件数据共享

使用vuex提供的mapState
使用对应的属性

computed:mapState['属性名']
//或者
computed{
    ..mapState(['属性名'])
}

修改对应的属性导入提供的mapMutation方法

import {mapMutation} from 'vuex'
mapMutation(['updatename'])
updatename('name')
vuex中要有方法名

注意事项

mutations中最好是立即响应的事件，不然会造成vue.js的浏览器插件与页面数据的不同步，不方便调试，响应应该写在actions中。即修改数据写在mutations中，请求写在action中保证方法同名
在actions中发送请求后，使用context.commit(‘mutations中对应的方法名’，[参数])
调用方法也变成mapActions

在Vue应用中，public和assets目录都可以用于存放静态资源，但它们有一些区别。

1. public目录：public目录在构建Vue应用时，其内容会被直接复制到输出的最终构建目录中（如dist目录）。这意味着public目录中的文件不经过Webpack或其他构建工具的处理，而是直接拷贝到构建结果中。适合于那些不需要经过编译处理的静态文件，如HTML文件、favicon.ico等。在页面中引用这些文件时，可以使用相对路径或绝对路径。
2. assets目录：assets目录用于存放需要经过构建工具处理的静态资源，例如样式表、图片、字体等。这些资源在构建过程中会经过打包、压缩、转换等处理，并通过模块化的方式引入到代码中。在Vue组件中，可以使用相对路径引用这些资源，Webpack会根据配置将它们正确地处理和打包。
   总结来说，public目录适合直接放置不需要经过构建处理的静态资源，而assets目录则用于放置需要经过构建处理的静态资源。根据实际需求选择合适的目录来组织和管理静态资源。

正式学习

指令修饰符

@keyup.enter监听回车
@v-model.trim 去掉首尾空格
@v-model.number 转数字
@事件.stop 阻止冒泡
@事件.prevent 阻止默认行为

v-bind对class的控制增强

:class=”{样式：判断表达式}”
:class=”[样式]”

v-model应用于其它表单元素

watch

生命周期

created

在响应式数据准备好之后开始初始化渲染请求

mounted

模板渲染完可以开始操作DOM

工程化开发

避免重复导入
先安装，然后使用vue create project-name 或者 vue ui来创建项目

data

对于组件来说，data选项必须是一个函数,可以确保在组件复用的情况下确保组件中的数据独立
就相当于开了多对象，而互不影响

data(){
    return {
    数据;
        }
}

组件通讯

父子关系

解决方案：props和$emit
props 父传子
$emit 子传父
props父传子

//1.在子组件中使用props注册类名
<script>
export default {
    props:['title']
}
</script>
//2.在父组件中的子组件上添加类名
<Son :title=""></Son>
//3.给类名赋值data中的属性
<Son :title="mytitle"></Son>
<script>
data(){
    return {
      mytitle:'66666'
    }
  }
</script>

$emit子传父

1. 通过$emit向父组件发送消息通知
   语法&emit(“属性名”，“属性”)
2. 父组件对子组件监听
   @属性名=“处理函数”

//通过$emit向父组件发送消息通知 语法$emit("属性名"，“属性”)
<script>
export default {
    methods:{
      fn() {
      this.$emit("changeson", "多少是个空想家");
    }
    }
}
</script>
父组件对子组件监听
<Son :title="mytitle"  @changeson="处理方法"></Son>

非父子关系

解决方案:provid & inject eventbus

通用解决方案 Vuex

.sync 修饰符

传递错误校验方式

props数组修改为props对象
使用方式prop{属性名：类型}
完整写法

prop{校验属性名{
    type:类型
    required:true,//是否必填
    default:默认值 //默认值
    validator(value){
    //自定义逻辑校验
    retrun 是否通过
}
}}

ref和$refs

作用:利用ref和$refs 可以用于 获取dom元素 或者组件实例
特点：相比于querySelector 这两个的查找范围更小更精确：只查找当前组件的
ref：在标签中添加
$refs.名字获取目标标签

vue的异步更新和自动聚焦

$nextTick 等dom更新完之后再更新

自定义指令即v-的操作

自己定义的指令，封装dom操作

全局注册

inserted:当标签被插入时
updata:在数值变化的时候更新

Vue.directive("focuss（属性名）", {
  inserted(el) {
    console.log(el);
    el.focus();
  }
})

局部注册

directives:{
 focus:{
   inserted(el) {
   console.log(el);
   el.focus();
 }
 }
}

参数的加载

<h1 v-color="color1">你好</h1>
<h1 v-color="color2">干嘛</h1>
directives:{
    color:{
      inserted(el,binding){
        el.style.color=binding.value;
        console.log(binding);
      }
    }
  }
通过binding的值获取元素

插槽slot

让组件内部的结构自定义
组件内定义slot
组件外传值

具名插槽

多个地方需要换
使用name属性区分名字
在提供结构的地方使用v-slot:名字 （不用带双引号）
要使用template包裹

作用域插槽

组件中传过来的值可以传到template中的#default=“属性名”，中的属性名，然后就可以使用属性名得到其它组件中的值，如果插槽有名字也可以使用名字
要使用template包裹

单页应用程序

路由

vue2对应的vuerouter版本是3.6.5
版本号+1就是当前所需要的版本
和vue相关的插件要Vue.use(插件)
然后创建路由对象并且注入到new Vue中

router-link自带高亮

自定义router-link 的高亮类名

const router = new VueRouter({
  routes:[....],
  linkActiveClass:"类名1"，
  linkExactActiveClass:"类名2"
})

查询参数传参

两种参数传参都可以使用对象的方式传参
适合多参数

1. 查询参数传参
   语法格式：to=”/path?参数名=值”
2. 在对应的页面接收
   $route.query.参数名

动态路由传参

适合单个
path:’/search/:key(自定义)’,
链接 to=’/path/参数值’
获取参数：$router.params.参数

重定向语法

{匹配路径；redirect：‘路径}

404

匹配不上时配置路径：’*’,当匹配不上的时候就会匹配出这个

history路由

在router中加入mode：“history”

跳转

path跳转
this.$router.push({
path:’’
})
name跳转
注册路由的时候要加上name
this.$router.push({
路由名字:’’
})

路由传参

this.$router.push({
path:’’
query:{
参数名：参数
}
})
路由传参和参数传参的区别是一个直接拼在路径上，一个是作为参数传递

eslint代码规范

vuex的概述

状态管理工具，管理数据（多用于多组件共享的数据），就好像有一个仓库

创建一个空仓库

state对象

state提供唯一的公共数据源，所有共享的数据都要同意放到Store中的State中存储

const store = new Vuex.Store({
    state: {
        title: '大标题',
        count: 100,
    }
})

通过store使用：

1. 在模板中

   <h1>根组件 {{ $store.state.count }}</h1>

2. 在模块js中

   this.$store.state.count

3. 在js中

   store.state.xxx

通过辅助函数使用

mapstate 自动帮我们把store中的数据自动映射成组件的计算属性中
最好写在计算属性中

1. 导入函数
   import {mapState} from ‘vuex’
2. 以数组的形式引入

state中数据的改变

组件是不能直接改变仓库中数据的 不便于排错
多使用mutations 发起通讯实现单向数据流
在创建仓库的时候通过strict:true开启严格模式

1. 在创建store的时候创建mutations的对像

   const store = new Vuex.Store({
       state: {
           title: '大标题',
           count: 100,
       },
       mutations: {
           addone(state) {
               state.count++;
           },
           addfive(state) {
               state.count = state.count + 5;
           }
       }
   })

2. 在其中加入方法
3. 在组件中使用的时候使用commit向仓库发起通讯

   <button @click="handlecountone()">值 + 1</button>
   methods:{
       handlecountone(){
         this.$store.commit('addone')
       }
   }

mutations的传参语法

只能传递一个参数
要是要传递多个参数就是用对象,数组等
形式this.$store.commit(‘addfive’，参数)
原型 addone(state，参数) {
​ state.count++;
​ },

辅助函数mapMutation

类似于mapstate

...mapMutation([‘方法])相当于methods:{
    方法(){
        
    }
  
 }

actions 处理异步操作

在vuex中提供actions方法，必有上下文

const store = new Vuex.Store({
    state: {
        title: '大标题',
        count: 100,
    },
    mutations: {
        addone(state) {
            state.count++;
        },
        addfive(state, a) {
            state.count = state.count + a;
        }
    }, actions: {
        //context上下文
        changecount(context, num) {
            setTimeout(() => {
                context.commit('addfive', num)
            }, 2000);
        }
    }
})

子组件中调用方法

methods:{
    change(num){
      this.$store.dispatch('changecount',num)//这里
    }
}

mapAction方法

和上边的map类方法一样

getters

实时渲染，一旦数据发生改变就会马上改变。对state中的数据进行修饰修改之后再返回。
注意点：形参第一个就是state，必须要有返回值，使用时往计算属性里添加。

const store = new Vuex.Store({
    state: {
        count: 10
    },
    getters: {
        doubleCount: state => state.count * 2
    }
});
// 在组件中使用
export default {
    computed: {
       ...mapGetters(['doubleCount'])
    }
}

modules

当开发规模过大、项目过于复杂时，store会变得繁杂臃肿。module的作用就是拆分store。

1. 先在store下创建modules文件夹，用于存储分块的文件。
2. 在里面创建各个所需的核心内容并导出。
3. 在总的js文件中导入各个模块，并在创建vuex对象时，通过modules属性将其添加进去。

模块state

若要以原生方式访问state数据，需加上模块名（Vuex中注册的名字），例如：

const UserObj = this.$store.state.user.UserObj;

使用mapState辅助函数时，需开启命名空间，示例如下：

import { mapState } from 'vuex';
export default {
    computed: {
       ...mapState('user', ['UserObj'])
    }
}

在模块中开启命名空间：

const userModule = {
    namespaced: true,
    state: {
        UserObj: { name: '张三', age: 20 }
    }
}

模块getters

原生访问getters：$store.getters['模块名/方法']，因含有特殊字符/。
辅助函数：...mapGetters(['模块', '方法'])，示例：

import { mapGetters } from 'vuex';
export default {
    computed: {
       ...mapGetters('user', ['getUserInfo'])
    }
}

在模块中定义getters：

const userModule = {
    namespaced: true,
    state: {
        UserObj: { name: '张三', age: 20 }
    },
    getters: {
        getUserInfo: state => state.UserObj
    }
}

模块mutation

原生调用：$store.commit('模块名/xxx', 额外参数)。
使用辅助函数：mapMutations('模块名', ['xxx'])，示例：

import { mapMutations } from 'vuex';
export default {
    methods: {
       ...mapMutations('user', ['updateUserInfo']),
        updateUser() {
            this.updateUserInfo({ name: '李四', age: 21 });
        }
    }
}

在模块中定义mutation：

const userModule = {
    namespaced: true,
    state: {
        UserObj: { name: '张三', age: 20 }
    },
    mutations: {
        updateUserInfo(state, newUser) {
            state.UserObj = newUser;
        }
    }
}

模块action

与mutation类似，原生调用：$store.dispatch('模块名/xxx', 额外参数)，辅助函数使用方式也与mutation类似。

import { mapActions } from 'vuex';
export default {
    methods: {
       ...mapActions('user', ['asyncUpdateUserInfo']),
        asyncUpdate() {
            this.asyncUpdateUserInfo({ name: '王五', age: 22 });
        }
    }
}

在模块中定义action：

const userModule = {
    namespaced: true,
    state: {
        UserObj: { name: '张三', age: 20 }
    },
    mutations: {
        updateUserInfo(state, newUser) {
            state.UserObj = newUser;
        }
    },
    actions: {
        asyncUpdateUserInfo({ commit }, newUser) {
            // 模拟异步操作
            setTimeout(() => {
                commit('updateUserInfo', newUser);
            }, 1000);
        }
    }
}

vuex的持久化处理

通过封装storage存储模块，利用本地存储实现vuex的持久化处理，保证页面刷新或重新加载时数据不丢失。常见的做法是在store创建时，从本地存储中读取数据初始化state，并在state数据变化时，同步更新本地存储。例如：

const store = new Vuex.Store({
    state: {
        count: localStorage.getItem('count')? parseInt(localStorage.getItem('count')) : 0
    },
    mutations: {
        increment(state) {
            state.count++;
            localStorage.setItem('count', state.count.toString());
        }
    }
});

ui

• pc端：常用element-ui、ant-design-vue等UI框架，提供丰富的组件和样式，方便构建PC端应用界面。
• 移动端：vant-ui、Mint-Ui、cube Ui等适用于移动端开发，针对移动端设备特点进行优化，如触摸交互、响应式布局等。

总结

vue2

除去基本标签和事件绑定，剩下的进阶内容包含子父通讯（利用props和$emit实现父子组件间的数据传递和事件通信）、vuex的使用（涵盖state提供公共数据源、mutations用于修改state数据且必须是同步操作、actions处理异步操作并提交mutations、getters对state数据进行加工处理、module将store拆分以应对复杂项目）、自定义组件的创建（包括组件复用、属性传递、插槽使用等）、具名插槽（通过name属性区分不同插槽，在父组件中使用v-slot指定插入内容）等。

其中vuex的使用中的mutations、state、actions、getters、module五大核心，在多组件共享数据管理方面发挥着重要作用，通过规范的流程和方式实现数据的集中管理和高效操作，确保应用中数据的一致性和可维护性。

通过对这些知识的学习和运用，可以构建出结构清晰、功能强大、可维护性高的Vue 2应用程序，满足不同项目的需求。

在实际开发中，还需要不断地实践和总结经验，灵活运用这些技术点，解决遇到的各种问题，提升开发效率和应用质量。

同时，随着技术的不断发展和更新，也需要关注Vue及其相关技术的最新动态，及时学习和掌握新的特性和功能，以适应不断变化的开发环境和需求。

以上就是对Vue 2相关知识的较为全面的总结和回顾，希望对进一步深入学习和应用Vue 2有所帮助。