ref 的使用 Vue 中 ref 的使用Vue2 中使用 ref父组件<template> <hello-world ref='son'></hello-world> <button @click='getSon'>获取</button> </template> <script> import HelloWorld from './components/HelloWorld.vue' export default { components: { HelloWorld }, data() { return { } }, methods: { getSon() { // 父组件获取子组件的属性和调用子组件的方法 console.log(this.$ref.son.title) this.$ref.son.sonMethod() } } } </script>子组件<template> <div> {{ title }} </div> </template> <script> export default { name: 'Son', data() { return { title: '我是子组件的标题' } }, methods: { sonMethod() { console.log('我是子组件的方法') } } } </script>

Object 操作对象 在工作中遇到了一个需求，后端传来的是对象然后需要写一个方法将它改动为键名在一边，键值在另一边的形式　　在做请求后，获得了一个 JSON 格式的数据，然后其中的一个对象，根据需求需要改为 键名：键名：键名 = 键值：键值：键值 这种格式。在这里我们需要用到 Object.keys(obj) 和 Object.values(obj) 这两个方法来完成。Object.keys(obj)　　参数 obj 为你要改动的那个对象，这个方法会将对象中的键名全部保存在一个数组中作为一个返回值进行返回。Object.values(obj)　　参数 obj 为你要改动的那个对象，这个方法会将对象中的键值全部保存在一个数组中作为一个返回值进行返回。　　然后再将数组转换为字符串，再使用 repalce 方法repalce()　　该方法可以将字符串中的某些字符替换为另一个字符，该方法中有两个参数，后面的那个参数将替换掉字符串中前面的参数。let test = { name: 'Tom', age: '24', address: 'home', } // 将对象中的键名和键值分别取出，然后转换为字符串，再将字符串中的 '，' 改为 ':' const key = Object.keys(test).toString().replace(/,/g,':') const value = Object.values(test).toString().replace(/,/g,':') const str = `${key} = ${value}`

Vuex的使用 Vuex 是什么?　　Vuex 是一个专门为 Vue 开发的状态管理模式。简单来说，就是 Vue 文件中 data 中的属性，当一个属性需要在多个组件中使用的时候，我们就可以使用 Vuex 来管理这些属性，这样可以让我们减少组件之中反复传值的操作。应用场景　　一般小项目很少会用到vuex，常规数据放在各个组件内即可，毕竟使用 vuex 的步骤是比较多的。　　一般的公共数据，如：用户信息、token这些可以存放在 vuex 中，最好也在 localstorage 中也存一份，我们在使用这些数据的时候可以先在 vuex 中进行获取如果 vuex 中没有再去 localstorage 中进行获取。　　然后就是在跨多组件传值中可以使用，将数据存放在 vuex 中，这样方便我们取值的同时，也能做到及时响应，一个组件的值发生变化，大家都发生变化。Vuex 的五个核心概念state：Vuex 中存放属性的。getters：加工 state 中的成员给外界。mutations：修改 state 中的属性的值，同步。actions：异步修改。modules：模块化状态管理。安装 Vuex　　在项目中使用 npm i vuex -S 进行安装 Vuex ，随后，在目录中创建 store 文件夹，在里面创建 store.js 文件，在 store.js 文件中，使用 import 引入 vue 和 Vuex 。import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { name: Tom, }, })　　然后我们需要在 main.js 文件中，将 Vuex 进行挂载。import store from './store' new Vue({ el: '#app', router, store, //store:store 和router一样，将我们创建的Vuex实例挂载到这个vue实例中 render: h => h(App) })　　这样我们的 Vuex 就挂载到我们的 Vue 项目中了，也就可以使用了。在组件中使用 Vuex　　我们在组件中需要使用到 Vuex 中的状态时，使用 {{ this.$store.state.name }} 来进行使用，但是这种方式不太推荐。 <template> <div> {{ this.$store.state.name }} </div> </template>　　我们可以在 mounted 中或者在computed 中来取 vuex 中的数据 <template> <div> {{ msg }} </div> </template> <script> // 使用 mounted 方式来获取 vuex 数据 export default { data () { return { msg: '' } }, mounted() { this.msg = this.$store.state.name } } // 使用 computed 来获取数据 export default { computed() { msg() { return this.$store.state.name } } } </script>修改 Vuex 中的数据　　使用 action -> mutation -> state 的方式来修改 Vuex 中的数据。　　组件代码：<template> <div>{{ name }}</div> <a-button @click="changeNameState">修改名字</a-button> </template> <script> export default { methods: { changeNameState() { this.$store.dispatch('setStateName') } }, computed: { name() { return this.$store.state.name } } } </script>　　Vuex 代码export default new Vuex.Store({ state: { name: 'Tom' }, mutations: { // 第一个参数state可以访问到仓库中的state, 第二个参数value则是我们传过来的数据 SET_NAME: (state, value) => { state.name = value } }, actions: { // 第一个形参store中有一个commit方法，这个参数就是通知 mutations 中的方法该工作了。 // 第二个参数value，则是我们在组件中用传来的数据 setStateName(store, value) { store.commit('SET_NAME', value) } }， // 在这里顺带说一下 getter 的使用，我们可以通过 getter 对 state 中的数据进行加工，来供组件使用 getters: { // 加工state中的数据,state中的数据也会相应改变 // 在组件中使用 this.$store.getters.otherName 来进行调用 otherName (state){ return state.name = 'Jack' } } })辅助函数　　辅助函数是可以让我们在某个组件中需要使用大量 store 中的数据时，可以少写几行代码，可以理解为就是一个语法题。<template> <div>{{ name }}</div> <div>{{ age }}</div> <div>{{ hight }}</div> </template> <script> // 从 vuex 中引入辅助函数 import { mapState } from 'vuex' export default { // 辅助函数一般搭配计算属性或者方法来进行使用 computed: { // 第一种方式可以通过数组的形式来进行引入 ...mapState(['name', 'age', 'height']) // 第二种方式通过对象的形式来引入，这种方式大多在 vuex 进行模块化后使用 ...mapState({ name: state => state.name, age: state => state.age, height: state => state.height, }) } } </script>　　除了 mapState 外辅助函数还有 mapMutations, mapActions, mapGetters 三个，他们的使用方法基本一样在这里就不在多说了。module 模块化　　模块化的思想还是大而化小、方便后续管理，我们可以将 store 模块化，每一个模块都拥有自己的 state、mutation、action、getter。　　示例代码：import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); // 一般 user 这部分代码是会专门写一个 js 文件然后通过 import 的方式引入到 store 中 index.js 文件里面 const user = { state: { token: '', userName: '' }, mutations: { SET_TOKEN: (state, value) => { state.token = value }, SET_USER_NAME: (state, value) => { state.userName = value }, }, actions: { login(store, value) { store.commit('SET_TOKEN', value) store.commit('SET_USER_NAME', value) } } } export default new Vuex.Store({ modules:{ user } }) 　　我们在组件中使用模块化的 store 时，需要在 state 和 属性之间加模块名比如：this.$store.state.user.token

Vue-cli初始化webpack模板 vue-cli3以下版本通过 vue init 命令来初始化项目，具体的使用方法为vue init <template-name> <project-name><template-name>：表示模板的名称，vue-cli官方为我们提供5中模板可供选择webpack：一个全面的 webpack+vue-loader 的模板，功能包括热加载、css扩展等。webpack-simple：一个简单 webpack+vue-loader 的模板，不包含其他功能，让你快速的搭建vue的开发环境。browserify：一个全面的 Browserify+vueify 的模板，功能包括热加载等。browserify-simple：一个简单 Browserify+vueify 的模板，不包含其他功能，让你快速的搭建vue的开发环境。simple：一个最简单的单页应用模板。<project-name>：为你项目的名称webpack模板　　一般我们会使用 webpack 模板来进行初始化，在命令行内输入 vue init webpack vueclitest。在我们输入命令后，会询问我们一些简单的选项，我们根据我们的需求进行选择即可。Project name：项目名称，如果不需要更改的话，直接点击回车即可。但是这里不能使用大写。Project description：项目描述，默认值为 A Vue.js project。Author：作者，如果你已经配置过Git设置，那么他会进行读取。Install vue-router？：是否安装vue的路由插件，我们这里是需要的，选择 Y。Use ESLint to lint your code?：是否使用 ESLint 来限制你的代码风格和错误，根据自己的需要进行选择。setup unit tests with Karma + Mocha?：是否安装单元测试工具 Karma + Mocha，根据自己的需要进行选择。Setup e2e tests with Nightwatch?：是否安装e2e来进行用户行为模拟测试，根据自己的需要进行选择。　　在选择完以后，我们的项目就创建完成了，然后我们在命令行输入 cd vueclitest 进入到我们vue的项目中，在输入 npm i 将我们项目的所有依赖进行下载，再下载完成后，就可以输入 npm run dev 来运行我们的项目了，运行后会在编译完成后，给你一个网址，直接 Ctrl + 鼠标左键 点击网址即可。vue-cli3以上版本初始化使用create初始化项目　　vue-cli3以上的版本，使用 vue create <project-name> 命令来进行创建项目。我们在编译器的终端中输入 vue create vueclitest 命令敲回车后，便会出现3个选项，前两个为默认的预设配置，第一个为vue2的预设配置，第二个为vue3的预设配置，如果选择前两个来创建项目，一路敲回车即可。第三个为手动选择配置，由我们自己来选择自己项目中需要的配置来进行初始化项目。　　我们选择第三个选项开始手动配置，首先会出现一个配置表，我们自己选择你项目中需要的。按空格为选择或取消，按 A 键为全选，I 键为全部反选。Choose Vue version：选择Vue版本，有 vue2.x 和 vue3.x 可供选择。Babel：支持高阶语法转换。TypeScript：支持使用 TypeScript。Progressive Web App (PWA) Support：支持PWA。Router：路由管理器。Vuex：支持 vuex。CSS Pre-processors：css预处理器。Linter / Formatter：代码风格、格式校验。Unit Testing：单元检测。E2E Testing：E2E测试。　　根据项目需要选择完成后，点击回车。然后还会出现一些选项让你进行选择。Choose a version of Vue.js that you want to start the project with：选择Vue版本。Use history mode for router?：是否使用路由的 history 模式，我选择的是 Y。Pick a CSS pre-processor：选择你的css预处理，我选择的是scss。Pick a linter / formatter config：选择Eslint代码验证规则，我们这里选择ESLint + Standard config 标准配置。Pick additional lint features：语法检查规则，我选择的是Lint on save，在保存时进行检查。Where do you prefer placing config for Babel, ESLint, etc.?：选择配置文件的存放位置，选择 In dedicated config files，在专用的配置文件中。Save this as a preset for future projects?：是否保存配置，可以选择 Y，这样我们可以在下次构建项目的时候，直接使用这次的配置进行构建。　　在将配置手动选择完成后，我们的项目也就开始初始化了，在初始化完成后，和之前一样在终端输入 cd vueclitest ，进入你刚刚构建的项目中，然后 npm i 下载依赖，在依赖下载完以后，这里需要注意，我们使用create初始化的项目，启动项目的命令不再是 npm run dev ， 而是 npm run serve ，然后项目启动完成后，Ctrl + 鼠标左键点击网址即可看到我们的项目了。使用init初始化项目　　vue-cli3以后，和旧版使用了相同的 vue 命令，所以 vue-cli2 被覆盖了，所以我们如果还需要使用旧版的 vue init 功能，就需要全局安装一个桥接工具。安装完成以后，我们就可以和vue-cli2一样继续使用，vue init <template-name> <project-name> 命令来创建项目了。npm i -g @vue/cli-init图形化界面　　vue-cli3以后，多了一个图形化界面的功能，我们在 cmd 命令行工具内输入 vue ui 命令来启动该功能。　　在启动图形化界面后，我们点击创建，它默认的创建目录为C盘，我们可以点击上一层按钮，或者点击编辑路径按钮，来选择我们项目的路径。　　然后点击 在此创建新项目，我们进入到创建界面，项目文件夹哪里，我们输入我们项目的名称就好了，包管理器选择 npm ，初始化Git仓库打开，然后点击下一步。然后会让我们选择预设配置，和使用 vue create 初始化项目一样，有默认配置和手动配置，但是这里多了一个可以从我们的git仓库中拉取预设的配置，我这里选择了默认的vue2配置，点击开始创建即可。　　在创建完成后，会自动跳转到项目仪表盘界面，然后我们点击任务，再点击 serve ，开始运行项目，在项目编译完成后，再点击启动app按钮，我们就可以看到项目了。

搭建博客 一直想要搭建一个自己的个人博客，最近也是有时间了，便就搭建了一个，也正好将自己学习前端编程的笔记和日常遇见的一些问题，可以放在博客上面，防止在需要时，找不到了首先，我们要租一个服务器　　进入阿里云官网，点击云服务器ECS，选择服务器进行购买，在购买完成后，点击右上角进入自己的控制台。　　在控制台中选择 云服务器ECS，进入到自己的云服务器中，点击远程连接，在点击远程连接后，会弹出一个弹框，我们选择第一个 Workbench远程连接，然后输入密码后就可以进入自己的服务器实例中。　　如果不知道自己的实例密码或者忘记实例密码，则在刚刚ECS云服务器页面，点击实例，进入到该实例的详情页面，然后在基本信息的右上角点击重置实例密码，然后输入你想要更改的实例密码就好了。安装宝塔　　为了方便我们后面对服务器实例的使用，我们可以在在服务器实例中安装一个宝塔面板，根据你服务器虚拟机的系统进行选择，我的服务器是Linux系统，点击Linux版，然后点击立即安装，随后按照宝塔Linux的安装教程进行安装即可。进入宝塔界面　　在我们安装完成后，会给到我们两个网址，一个内网网址一个外网网址，以及初始用户名和密码，我们复制外网的网址，在游览器中粘贴，即可进入。　　如果一直无法进入的话，我们需要在我们服务器实例的详情页面，在基本信息的右上角，点击配置安全组规则，然后再点击配置规则，在入方向下面，点击手动添加，将8888端口加入到安全组规则中，就可以进入了。　　在我们进入之后，会让我们下载服务器的相关配置，我们直接选择推荐的进行下载安装即可。域名　　想要有一个自己的网站，域名是不可或缺的，我们可以在阿里云官网处，进行域名注册，选择自己喜欢的域名进行查询，然后注册，在注册完成域名后，我们还需要下载阿里云手机app，来进行域名备案，备案完成后，我们在阿里云控制台处，点击 云解析DNS ，然后再点击解析设置，进行添加记录，然后 记录类型 我们选择A，然后主机记录，自己进行添加，记录值将你服务器的公网IP填入。然后在你的宝塔界面中的网站下，添加站点时，将你已经解析的域名进行添加就好了。typecho　　该博客使用了typecho模板，我们进入官网，点击立即下载，使用正式稳定版即可，在压缩包下载完成后，我们将压缩包解压，然后再压缩为以zip为后缀的压缩包。　　在域名没有完成备案之前，我们可以先开一个外网端口，将博客挂载在该端口上，然后在该端口的文件夹下，将压缩的文件夹进行解压，然后将build文件夹里面的文件剪切粘贴在端口文件夹下，然后就可以输入网址进入博客网页了，网址为你的服务器的公网 ip:端口号。Joe主题　　typecho模板有很多主题，该博客使用了Joe主题，在将主题下载完成后，将该主题的压缩包一样进行解压重新压缩为zip格式，将它上传到user文件夹下的themes中，然后进行解压。　　进入博客的后台（在你博客的网址后面加 /admin），在控制台下的外观中，启用Joe主题，直接点击启用就可以了。　　然后，后续我们可以在设置外观中，进行该主题的自带功能的开启和关闭，也可以添加你自己喜欢的样式。