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>

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按钮，我们就可以看到项目了。

Vue的安装 Vue.js是js的一个渐进式框架，也是目前国内使用率较高的一个前端框架，Vue不仅易于上手，也有很多第三方库可以使用直接下载进行引入　　我们直接在Vue官网上，下载Vue.js，然后在 <script> 标签中进行引用，但是在开发中，不要下载生产版本，不然会没有错误提示和警告。安装node.js　　在安装Vue前我们需要提前安装好 node.js ，我们需要用到npm来安装Vue、vue-cli。　　我们可以在node官网上下载node.js并进行安装，在安装完成以后，我们可以在命令行工具中，查看是否安装成功。即 Win + R，打开命令行工具，然后输入 node -v 、npm -v，如果出现版本号，则代表安装成功。安装vue-cli脚手架　　在命令行工具中，输入 npm i -g @vue/cli ，安装最新版vue-cli脚手架工具。如果之前你已经安装过旧版本的vue-cli（1.x或者2.x），那么先需要将旧版本的脚手架进行卸载 npm uninstall vue-cli -g。而且vue-cli4.x，也需要node.js版本最低为v8.9，推荐v10以上。在安装完成以后，我们可以在命令行工具中，输入 vue -V 这里的 V 要大写。