09 2021 档案
摘要：vue-cli3以后的版本，一些服务器配置都迁移到CLI Service里面，对于一些基础配置和一些扩展配置，需要在根目录新建一个vue.config.js文件进行配置。 module.exports={ publicPath:'/',//1、配置项目路径【这个在开发中要经常改动】 outputDi
阅读全文
摘要：解决方案： 1、点击开始按钮》找到Windows PowerShell 》管理员身份运行Windows PowerShell 2、在Windows PowerShell窗口 输入 》 set-ExecutionPolicy RemoteSigned （运行）》根据提示输入 y 3、继续回到项目执行s
阅读全文
摘要：在实际开发中不可能只有开发环境和生产环境，根据业务需求需要自己定义环境，比如测试环境、预览环境等。接下来自己定义一个测试环境。 首先在根目录创建.env.test（test名字随便写）文件。文件内容如下： VUE_APP_API=http://test.baidu.com 接下来在package.j
阅读全文
摘要：一个vue-cli项目有三个模式： development(开发环境)模式，用于vue-cli-service serve。 production(生产环境)模式，用于vue-cli-service build 和 vue-cli-service test:e2e。 test(测试环境)模式，用于v
阅读全文
摘要：package.json是一个json格式的NPM配置文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。 npm install命令根据这个配置文件，自动下载所需的模块，将package.json中的模块安装到node_modules文件夹下，也就是配置项目
阅读全文
摘要：如何运行项目？ 输入以下命令即可在开发者模式下运行项目。 npm run serve 输入以下命令即可构建发布版本。（这时会在项目的根目录下生成一个dist文件夹，该文件夹上传到服务器即可。） npm run build 输入以下命令即可安装serve。（一般服务器都是apache或nginx软件搭
阅读全文
摘要：通过vue-cli生成的项目目录结构，及各文件夹和文件的用途说明如下所示。 |—node_modules //项目依赖的模块 |—public //该目录下的文件不会被webpack编译压缩处理。存放静态资源文件，第三方非模块化js文件等。 |—favicon.ico //图标文件 |—index.
阅读全文
摘要：1、安装vue-cli后，就可以创建项目了。 2、创建项目有两种方式： 第一种是通过vue create<项目名称>命令创建。（推荐使用第一种） 第二种是通过vue ui命令启动图形界面来创建项目。 3、第一种是通过vue create<项目名称>命令创建。（推荐使用第一种） 选择好项目存放的目录（
阅读全文
摘要：NPM是node.js软件包管理器，项目所需的资源比如vue-cli，都是从网络下载到本地的。 NPM的默认镜像地址是：https://registry.npmjs.org/，这是国外的镜像地址，可能会出现丢包的问题。 如果安装失败，可以使用国内镜像地址，最常用的就是淘宝镜像地址：https://r
阅读全文
摘要：特别注意：如果已经全局安装了旧版本的vue-cli(1.x或2.x)，需要先卸载它。 //如果是windows系统请打开cmd命令提示符窗口，如果是MAC系统请打开终端，输入命令如下： npm uninstall vue-cli -g 步骤一：进入node.js官网https://nodejs.or
阅读全文
摘要：ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。 （1）如果在普通的DOM元素上使用，引用指向的就是DOM元素。 （2）如果用在子组件上，引用就指向组件实例。 <template><!--1、在普通的DOM元素上使用，引用指向的就是DOM元素。--> <div
阅读全文
摘要：虽然计算属性在大多数情况下更合适，但有时也需要一个自定义的侦听器。Vue通过watch选项提供了一个更通用的方法，来响应数据的变化。 当需要在数据变化时执行异步操作或开销较大的操作时，这个方式是最有用的。 在实际开发中可以解决自定义封装组件或是插件，异步初始化数据获取不到的问题。 （1）可以监听da
阅读全文
摘要：computed实战用法 （1）模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板内放入太多的逻辑会让模板过重难以维护。 使用computed前: {{message.split('').reverse().join('')}} 使用computed后：{{message}}{{re
阅读全文
摘要：todolist案例开发要实现的效果图如下： todolist案例开发代码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>todolist案例开发</title> <style> table{ border: 1px so
阅读全文
摘要：双向绑定的原理也叫响应式原理，面试时候经常会问到。 1、Vue时采用对象设计模式之发布者-订阅者模式的方式，通过Object.defineProperty()属性的setter，getter，在数据变动时 发布消息给订阅者，触发相应的监听回调。来完成双向绑定。 2、Object.defineProp
阅读全文
摘要：（1）.lazy：在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步（除了输入法组合文字时）。 你可以添加 lazy 修饰符，从而转为在change事件之后进行同步。 <input type='text' v-model.lazy='message'>结果：{{mess
阅读全文
摘要：对于单选按钮，复选框及选择框的选项，v-model绑定的值通常是静态字符串（value值）。 但是有时我们可能想把值绑定到vue实例的一个动态属性上， 这时可以用v-bind实现，并且这个属性的值可以不是字符串，可以是对象或者数组。 （1）绑定复选框 <input type='checkbox' v
阅读全文
摘要：v-model指令在表单<input>、<textarea>及<select>元素上创建双向数据绑定。 它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。 它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。 注意：对于需要使用输入法（
阅读全文
摘要：使用v-bind:style可以给元素绑定内联样式，不过在实际开发中尽量避免内联样式的出现，内联样式不便于维护。 1、对象语法 1>v-bind:style 的对象语法十分直观，看着非常像CSS，但其实是一个JavaScript对象。 2>CSS属性名可以用驼峰式（camelClass）或短横线分隔
阅读全文
摘要：1、操作HTML元素的class列表和内联样式是数据绑定的一个常见需求。 2、所以Vue可以通过用v-bind处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。 因此，在将v-bind用于class和style时，Vue做了专门的增强。 3、表达式结果的类型除了字符串之外，
阅读全文
摘要：可以用以下修饰符实现仅在按下相应按键时才能触发鼠标或键盘事件的监听器。 .ctrl：ctrl键 .alt：alt键 .shift：shift键 .meta：在Mac系统键盘上，meta对应commmand键（）。 在Windows系统键盘上，meta对应Windows徽标键（）。 在Sun操作系统键
阅读全文
摘要：1、事件修饰符 在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。 尽管可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理DOM事件细节。 为了解决这个问题，Vue为 v-on 提供了
阅读全文
摘要：1、可以用v-on指令，监听DOM事件，并在触发时运行一些JavaScript代码。 2、v-on可以缩写成@。 3、如果想访问原始的DOM事件，可以使用特殊的变量$event作为参数传入。 <template v-if='false'><!--1、可以在触发时运行一些JavaScript代码。--
阅读全文
摘要：1、当 v-for 与 v-if 一起使用时，v-for 的优先级比 v-if 更高。这意味着 v-if 分别重复运行于每个 v-for 循环中。 如果渲染一个列表时，需要按照条件来渲染，那么需要v-for与v-if一起使用了。 2、Vue官方不建议v-if和v-for同时用在一个元素上，因为一起使
阅读全文
摘要：在实际开发中经常会遇到层级比较多的数据结构，这时我们要用v-for循环嵌套遍历数据。 在做v-for嵌套循环时要注意以下几点： 1>父级循环中的index索引，与子级循环中的index索引必须区别开。 2>不要忽略 :key。 （父级循环的:key对应父级的index索引，子级循环的:key对应子级
阅读全文
摘要：1、v-for指令，基于一个数组来渲染一个列表。（也可以基于一个对象） （注意：指令v-for，也可以被template标签使用） 2、v-for指令，需要使用（item,index）in items 形式的特殊语法。其中 1>items 是源数据数组。 2>item 是被迭代的数组元素的别名。 3
阅读全文
摘要：1、指令v-show，可以根据表达式的值true或false，来显示或者隐藏HTML元素。 2、用法和v-if大致一样，不同的是，带有v-show的元素始终会被渲染并保留在DOM中。 3、v-show（值是false）相当于对CSS样式的display属性进行（none）操作。 4、面试问：v-if
阅读全文
摘要：1、v-if指令，用于条件性地渲染一块内容。 1> 只有指令的表达式返回true的时候，文档中对应的DOM元素才能被渲染。 2> 使用指令v-if='false'的标签，从文档中真正删去了这个DOM元素。 3> 用 v-if 作三元运算符，返回结果不是boolen类型的话是没有意义的,因为只有指令的
阅读全文
摘要：指令（Directives）是带有前缀v-的特殊属性。指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于DOM。 1、v-cloak 1>v-cloak指令设置样式，这些样式会在Vue实例编译结束时，从绑定的HTML元素上被移出。 2>当网络较慢，网页还在加载Vue.js，导致Vu
阅读全文
摘要：结合响应系统，实现数据更新即时渲染到View层。 1、模板语法——插值（数据绑定最常见的形式，就是使用“Mustache”语法即双大括号的文本插值。） 1>普通文本：使用{{}} 2>要解析HTML代码：使用指令v-html 3>html标签属性的value值：使用指令v-bind 2、Mustac
阅读全文
摘要：问题： console.log(this.$refs['box3']._proto_ ) //打印结果为undefined 解决方法: proto左右两边应该各自连续打两次_,我只打了一次_ console.log(this.$refs['box3'].__proto__);
阅读全文
摘要：每个Vue实例在被创建时，都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。 同时在这个过程中也会运行一些，叫做生命周期钩子的函数，这给了用户在不同阶段，添加自己代码的机会。 （简单说，不能瞎写代码，要到new Vue({})里面，在对应的
阅读全文
摘要：当一个Vue实例被创建时，它将 data 对象中所有的属性加入到 Vue 的响应式系统中。 当这些属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。 总结1，将 data 对象中所有的属性加入到 Vue 的响应式系统中。 （1）数据对象发生改变，使用数据对象的vue实例也会发生改变。 （
阅读全文
摘要：1、先引入 vue 2、创建 html 标签<div id="app"></div> 3、在 script 标签内部，new Vue ({ }) 4、通过 el 属性，绑定要渲染的 View。 4、也可以使用 $mount ( ) 方法，手动挂载 Vue 实例。 <script src="https
阅读全文
摘要：安装Vue有以下三种方式。 1、使用独立版本。 从Vue官网（https://vuejs.org）下载Vue的JavaScript脚本文件。脚本文件分两种，一种是开发版本，一种是生产版本。 （1）开发版本 包含所有的调试模式和警告，代码未压缩，适合开发阶段，便于开发者研究Vue源码。开发版本下载地址
阅读全文