vue.js一课一得

前言

作为一名 Web 前端开发工程师，其主要职能就是将网站的界面更好地呈现给用户。随着互联网技术的爆发，越来越多的前端开发技术如雨后春笋般出现，在众多的 JavaScript 前端框架中，Vue.is 无疑是最出色的(曾经一项针对 JavaScript 的调查表明，Vue.is 有着 89%的开发者满意度)。相比其他前端框架，如 Angular 和 React，Vue.is 框架在实现上更容易，程序员上手更快。使用 Vue.is 技术不仅提高了开发的效率，也改善了开发的体验，因此，熟练掌握Vue.is 前端框架已经成为 Web 前端开发工程师的必备技能。

在学习vue中我们常常会遇到许多问题，以下是我遇到的问题及解答方式：

1. 理解响应式原理：Vue.js的响应式原理是其核心特性之一，但初学者可能难以理解其工作原理。这可能导致在开发过程中遇到一些问题，如数据不更新或更新不正确。
2. 组件间的通信：在Vue.js中，组件间的通信是一个重要的概念。然而，初学者可能会遇到如何正确地在组件间传递数据和触发事件的问题。
3. 路由管理：对于单页面应用程序（SPA），路由管理是一个重要的部分。Vue.js提供了Vue Router来进行路由管理，但初学者可能会遇到如何配置和组织路由的问题。
4. 状态管理：在大型应用程序中，状态管理是一个关键的概念。Vue.js提供了Vuex来进行状态管理，但初学者可能会遇到如何正确地使用和组织状态的问题。
5. 性能优化：在开发大型应用程序时，性能优化是一个重要的考虑因素。Vue.js提供了各种工具和技术来优化性能，但初学者可能不知道如何使用这些工具和技术。
6. 错误处理：在开发过程中，错误处理是一个重要的部分。Vue.js提供了错误捕获和日志记录等功能，但初学者可能不知道如何使用这些功能。

。

 1.axios的 post 请求后台接受不到!

axios默认是 json 格式提交,确认后台是否做了对应的支持;若是只能接受传统的表单序列化,就需要自己写一个转义的方法...当然还有一个更加省事的方案,装一个小模块qs.

npm install qs -S
// 然后在对应的地方转就行了..单一请求也行,拦截器也行...我是写在拦截器的.
// 具体可以看看我 axios 封装那篇文章
//POST传参序列化(添加请求拦截器)
Axios.interceptors.request.use(
  config => {
    // 在发送请求之前做某件事
    if (
      config.method === "post"
    ) {
      // 序列化
      config.data = qs.stringify(config.data); // ***** 这里转义
    }

    // 若是有做鉴权token , 就给头部带上token
    if (localStorage.token) {
      config.headers.Authorization = localStorage.token;
    }
    return config;
  },
  error => {
    Message({
      //  饿了么的消息弹窗组件,类似toast
      showClose: true,
      message: error,
      type: "error.data.error.message"
    });
    return Promise.reject(error.data.error.message);
  }
);

2. 我的 Vue 网站为什么 UC 访问一片空白亦或者flex布局错乱!!

UC 号称移动界的 IE 这称号不是白叫的。flexbox 布局错乱,一般是你没有把兼容方案写上..就是带各种前缀,复合属性拆分。

UC访问空白, 有一种情况绝对会造成,那就是 ES6的代码降级不够彻底. 其他情况可能就是路由配置问题(自己去排除)，现在的开发都推荐按需引入,靠babel-preset-env 来控制,以达到打包体积减小。
但是这样做的后果,有些内核比较老的...嘿嘿..拜拜。所以最好把代码完全 ES5话!!记住有些特性不能乱使用,没有对应的 polyfill,比如 ES6 的proxy

3.组件的通讯有哪几种啊!

基本最常用的是这几种：

父传子: props
子传父: emit
兄弟通讯:event bus: 就是找一个中间组件来作为信息传递中介
vuex: 信息树

4.npm run dev 报端口错误!Error: listen EADDRINUSE :::8080

Vue-cli 里面的 webpack 配置: config/index.js

dev: {
    env: require("./dev.env"),
    port: 8080, //  这里这里,若是这个端口已经给系统的其他程序占用了.改我改我!!!!!!
    autoOpenBrowser: true,
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {
      "/bp-api": {
        target: "http://new.d.st.cn",
        changeOrigin: true,
        // pathRewrite: {
        //   "^/bp-api": "/"
        // }
    }
},

以上是可能出现的一些问题，但并不是全部。在学习Vue.js的过程中，不断实践和总结经验是解决问题的关键。同时，查阅官方文档和社区资源也是获取帮助和学习的重要途径

关于组件

Vue组件是一种封装好的功能，可以自己编写，也可以使用别人编写的（称为插件）。组件提高了代码的可重用性，减少了代码的重复书写。

一个Vue组件主要由三部分构成：

1. template：组件的模板结构，声明了数据和最终呈现给用户的DOM之间的映射关系。初始化数据通常为私有共享props，参数默认是单向绑定，也可以双向绑定（MVVM）。
2. script：组件的JavaScript行为，包含组件的功能逻辑。
3. style：组件的样式。

每个组件中必须包含template模板结构，而script行为和style样式是可选的组成部分。

Vue的组件化开发方式将应用程序分解为可重用的组件，每个组件都有自己的模板、逻辑和样式。这使得大型应用程序的开发和维护更加简单。

此外，Vue还提供了一系列指令，如v-if、v-for、v-bind等，用于处理DOM元素和数据之间的交互。Vue也提供了路由管理和状态管理等功能，以及一个庞大的生态系统，包括第三方库和插件，可以帮助你处理各种需求。

以上内容仅供参考，如需更多信息，建议查阅Vue官方文档或咨询前端开发工程师。

vue组件和Vue有什么区别？

Vue组件和Vue的主要区别体现在以下方面：

1. 范围与功能：Vue实例代表着整个Vue应用程序，它可以管理整个应用程序的状态，包括所有的组件、模板等。而Vue组件实例只代表一个组件，每个组件都拥有自己的独立作用域，这意味着我们必须在组件之间传递参数来共享状态。
2. 挂载与渲染：Vue实例有el指定挂载元素，可以挂载到任何HTML元素上，并绑定该元素上的事件。而组件没有指定挂载元素，因为组件也是通过调用在渲染页面，直接通过调用组件名渲染。
3. 数据定义：在Vue实例中，data属性可以直接定义为一个对象，如data:{name:“aa”,age:18}。而在组件中，data属性必须是一个函数，返回一个对象，如data(){ return{name:“aa”,age:18} }。
4. 通信方式：在Vue实例中，没有父子关系，但是不同的实例之间可以通过EventBus或Vuex等方式进行通信。在Vue组件中，父组件可以通过props属性将数据传递给子组件进行渲染，并在子组件触发事件时更新父组件的数据。
5. 复用性与可维护性：组件实例具有更高的代码复用性和可维护性。Vue组件库就是典型的使用组件复用的方式来提高开发效率和可维护性。

总的来说，Vue实例和Vue组件实例都是Vue的重要组成部分，但前者更侧重于管理整个应用的状态，后者则更适合对UI进行模块化复用。以上内容仅供参考，如需了解更多关于vue组件和vue区别的信息，建议查阅相关书籍或咨询专业的技术人员。

Vue实例的构造选项包括：

1. data：用于存储应用程序的状态。
2. props：用于接收父组件传递给子组件的数据。
3. computed：用于计算属性，基于其他数据属性进行计算。
4. methods：用于定义组件内部的方法。
5. watch：用于观察和响应Vue实例上的数据变化。
6. template：用于定义组件的模板。
7. render：用于自定义渲染逻辑。
8. mounted、updated、beforeDestroy等生命周期钩子：用于在特定阶段执行逻辑操作。

这些构造选项可以帮助开发者在Vue实例中定义和管理组件的行为和状态，使得Vue应用程序更加灵活和可维护。

Vue实例常用的函数包括：

1. $mount：用于手动挂载Vue实例到DOM元素上。
2. $destroy：用于销毁Vue实例，包括销毁其子组件和解除所有事件监听器。
3. $set：用于添加响应式属性或更新现有响应式属性。
4. $watch：用于观察Vue实例上的数据变化，并在变化时执行回调函数。
5. $emit：用于触发自定义事件，并传递参数给父组件。
6. $on：用于添加事件监听器，监听Vue实例上的事件。
7. $off：用于移除事件监听器。

除了上述提到的Vue实例常用函数外，还有一些其他的Vue函数也经常被使用：

1. $nextTick：用于在下一个DOM更新循环结束之后执行延迟回调函数。
2. $refs：用于访问子组件的引用信息。
3. $route：用于访问当前路由对象。
4. $emit：用于触发自定义事件，并传递参数给父组件。
5. $once：用于添加一次性事件监听器。
6. $off：用于移除事件监听器。
7. $nextTick：用于在DOM更新后执行回调函数。
8. $watch：用于观察Vue实例上的数据变化，并在变化时执行回调函数。
9. $emit：用于触发自定义事件，并传递参数给父组件。
10. $on：用于添加事件监听器，监听Vue实例上的事件。
11. $nextTick：用于在下一个DOM更新循环结束之后执行延迟回调函数。
12. $route：用于访问当前路由对象。
13. $emit：用于触发自定义事件，并传递参数给父组件。
14. $on：用于添加事件监听器，监听Vue实例上的事件。

这些函数可以帮助开发者在Vue应用程序中执行特定的操作，如访问子组件、访问当前路由对象、触发自定义事件等，使Vue应用程序更加灵活和可维护。

这些Vue函数具有以下优点和缺点：

优点：

1. 灵活性：这些函数提供了开发者在Vue应用程序中执行各种操作的灵活性。例如，mount函数允许手动控制Vue实例的挂载过程，watch函数允许观察和响应数据的变化。
2. 可维护性：这些函数使得Vue应用程序更加模块化和可维护。例如，on和off函数可以方便地添加和移除事件监听器，$refs函数可以访问子组件的引用信息，方便父组件与子组件之间的通信。
3. 事件驱动：这些函数支持事件驱动的编程模型，使得开发者可以更加方便地处理用户交互和数据变化。

缺点：

1. 学习曲线：对于初学者来说，这些函数可能会带来一定的学习曲线。为了充分利用这些函数的优点，开发者需要理解Vue的核心概念和编程模型。
2. 代码量：过度依赖这些函数可能会导致代码量增加，尤其是在处理复杂逻辑和交互时。为了保持代码的简洁性和可读性，开发者需要注意函数的合理使用和组织。
3. 性能影响：某些函数（如$watch）可能会导致性能影响，因为它们会触发额外的计算和渲染。因此，在性能关键的场景下，开发者需要谨慎使用这些函数。
4. 错误处理：使用这些函数时需要注意错误处理，以避免程序崩溃或产生不可预期的行为。

总体而言，这些Vue函数的优点在于提供了强大的功能和灵活性，但开发者需要注意合理使用和组织代码，以避免潜在的性能问题和代码复杂度增加。

HTML中有许多常见的标签，以下是一些常用的HTML标签：

1. <html>：定义整个HTML文档。
2. <head>：定义文档的头部，它是所有头部元素的容器。
3. <title>：定义文档的标题，它显示在浏览器的标题栏或标签上。
4. <body>：定义文档的主体部分，包含了可见的页面内容，如文本、超链接、图片等。
5. <h1>到<h6>：定义六个级别的标题，<h1>最大，<h6>最小。
6. <p>：定义一个段落。
7. <br />或<br>：插入一个换行符。
8. <hr />：定义一条水平线。
9. <a>：定义一个超链接，可以链接到其他网页或网页的某个部分。
10. <img />：定义一个图像。
11. <div>：定义一个块级元素，通常用于组织内容或样式化。
12. <span>：定义一个行内元素，通常用于对文本或其他行内元素进行样式化。
13. <ul>、<ol>和<li>：分别定义无序列表、有序列表和列表项。
14. <form>：定义一个表单，用于收集用户输入。
15. <input>：定义一个输入控件，如文本框、复选框等。
16. <button>：定义一个按钮。
17. <script>：用于嵌入或引用JavaScript代码。
18. <style>：用于嵌入内部样式表。
19. <link>：用于链接外部资源，如CSS样式表。

以上是HTML中一些常见的标签，它们可以组合使用以创建复杂的网页结构和内容。

在Vue中，有一些常用的指令，它们用于操作DOM元素和绑定数据。以下是一些常用的Vue指令：

1. v-model：用于在表单元素和Vue实例之间创建双向绑定。
2. v-if、v-else-if和v-else：用于根据条件渲染元素。
3. v-for：用于在元素或组件上重复渲染一个列表。
4. v-bind：用于绑定属性或事件到表达式。
5. v-on：用于监听DOM事件并在触发时执行一些JavaScript代码。
6. v-show：用于根据条件显示或隐藏元素。
7. v-text：用于更新元素的textContent。
8. v-html：用于更新元素的innerHTML。
9. v-cloak：用于在元素加载之前隐藏Vue的编译标记。
10. v-pre：用于跳过编译，常用于显示原始的Mustache标签。
11. v-once：用于将元素和组件标记为只渲染一次。

这些指令都可以通过在HTML标签上添加特定的属性来使用，例如v-model="message"或v-for="item in items"。通过使用这些指令，开发者可以方便地控制DOM元素的行为和渲染方式，从而实现更复杂的前端应用。

计算属性和监听属性是Vue.js中的两种重要特性，它们在处理数据和响应数据变化方面有各自的特点。

计算属性

计算属性是一种更高级的数据绑定方式。计算属性基于它们的依赖进行缓存，只有在其依赖发生改变时才会重新求值。这就意味着只要依赖的数据不发生变化，多次访问计算属性将立即返回之前的计算结果，而不会再次执行计算函数，从而提高了性能。

在Vue中，我们可以通过computed选项来定义计算属性。例如：

new Vue({  
  el: '#app',  
  data: {  
    firstName: 'Foo',  
    lastName: 'Bar',  
  },  
  computed: {  
    fullName: function() {  
      return this.firstName + ' ' + this.lastName;  
    }  
  }  
})

在这个例子中，fullName是一个计算属性，它基于firstName和lastName这两个数据属性。当firstName或lastName发生变化时，fullName会自动更新。

监听属性

监听属性是一种更低级别的响应式系统，它可以监听数据属性的变化并在变化时执行特定的函数。使用watch选项可以定义监听属性。例如：

new Vue({  
  el: '#app',  
  data: {  
    firstName: 'Foo',  
    lastName: 'Bar',  
  },  
  watch: {  
    fullName: function(val) {  
      console.log('Full name changed to ' + val);  
    }  
  }  
})

在这个例子中，当fullName发生变化时，会执行我们定义的函数。然而，值得注意的是，这种方法无法直接获取是哪一个依赖数据发生了变化。如果你需要知道是哪个数据发生了变化，你可能需要使用更复杂的方法来处理。

使用VueCli快速构建项目

卸载命令如下：

//  注意，第一次使用vue脚手架的同学可直接忽略此步骤

npm uninstall vue-cli -g

1.vue cli 脚手架的安装

//  通过npm全局安装@vue/cli脚手架  @3.10表示下载某个指定版本，如果不写，则下载最新版本

npm install -g @vue/cli

PS:如果使用npm方式安装脚手架速度太慢，或者是卡死的话，可以选择淘宝镜像cnpm的方式安装

          //安装淘宝镜像的命令行

          ①  npm install -g cnpm --registry=https://registry.npmmirror.com

// 如果安装了cnpm淘宝镜像的话，可使用下面的命令行安装@vue/cli脚手架，网速会相对来说快一些

②  cnpm install -g @vue/cli

  //PS：如需要卸载vue/cli包，可执行以下命令行

         npm uninstall -g @vue/cli

vue cli安装成功之后，使用vue -V命令查看版本号，如果成功出现版本号即代表安装成功，我们就可以通过Vue Cli脚手架来创建项目了。